ZeroMe mobile patch

content.json

@@ -95,5 +95,6 @@
  "translate": [
   "js/all.js"
  ],
+ "viewport": "width=device-width, initial-scale=1.0",
  "zeronet_version": "0.5.1"
 }

css/mobile.css

@@ -0,0 +1,144 @@
+/* ZeroMe Mobile */
+#Trigger {
+display: none;
+}
+
+@media screen and (max-width: 750px) {
+html, body, p, th, td, li {
+font-size: medium !important;
+}
+
+.head-container {
+position: fixed;
+background-color: #fff;
+width: 100%;
+height: 50px;
+z-index: 30;
+}
+.head {
+width: 100%;
+background-color: #fff;
+}
+.head .logo {
+margin-left: 50px;
+position: absolute;
+z-index: 1;
+}
+.right {
+position: fixed;
+right: 0;
+top: 0;
+}
+#Content {
+width: 100%;
+margin-top: 60px;
+margin-bottom: 5px;
+}
+.col-center {
+background-color: #f6f7f8;
+width: 100%;
+overflow: auto;
+padding-left: 5px;
+padding-right: 5px;
+display: block;
+padding-top: 60px;
+margin-top: -60px;
+}
+.col-left, .col-right {
+position: fixed;
+top: 60px;
+left: -300px;
+background-color: #f6f7f8;
+height: 100%;
+margin-left: 0px;
+padding-top: 60px;
+padding-right: 15px;
+padding-left: 15px;
+margin-top: -60px;
+width: 300px;
+overflow-x: hidden;
+overflow-y: auto;
+z-index: 1;
+transition: all 0.6s;
+}
+.trigger-on .col-left, .trigger-on .col-right {
+left: 0px;
+box-shadow: 0px 0px 30px #999;
+}
+
+#Trigger {
+display: block;
+position: fixed;
+left: 5px;
+top: 3px;
+width: 40px;
+height: 40px;
+z-index: 100;
+border: 1px solid #bbb;
+border-radius: 5px;
+}
+#Trigger .icon {
+background-image: url(../img/nav-icon.png);
+display: block;
+border: 12px solid #fff;
+height: 16px;
+outline: none;
+border-radius: 5px;
+}
+
+.user.card {
+background-color: #f6f7f8;
+box-shadow: none;
+margin-top: 10px;
+margin-left: -15px;
+}
+.activity-list .items {
+margin-bottom: 0px;
+}
+.more.small {
+padding: 10px;
+margin-bottom: 5px;
+background-color: #fff;
+border: 1px solid #eef0f1;
+border-radius: 5px;
+}
+.post-create .icon-image {
+margin-left: unset;
+right: 40px;
+}
+.post {
+overflow: hidden;
+}
+#Overlay .img {
+width: 100% !important;
+margin-left: 0px !important;
+margin-top: -40px !important;
+left: 0px !important;
+}
+.post .img {
+width: 100% !important;
+max-height: 300px !important;
+min-height: 100px;
+background-size: cover !important;
+}
+.post .img .fullsize {
+background-size: cover !important;
+}
+.post .img .details {
+z-index: 50;
+}
+.post blockquote {
+padding-left: 10px;
+padding-top: 10px;
+padding-bottom: 10px;
+}
+}
+
+@media screen and (max-width: 500px) {
+.post .sep, .user .address {
+display: none;
+}
+.post .added {
+margin-left: 10px;
+}
+}

img/nav-icon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path fill="#999" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+              <path fill="#999" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+              <path fill="#999" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+</svg>

index.html

@@ -15,6 +15,7 @@
 
 <div class="head-container">
  <div id="Head"></div>
+ <div id="Trigger" class="trigger-off"></div>
 </div>
 
 <div class="center" id="Content">
@@ -23,4 +24,4 @@
 <script type="text/javascript" src="js/all.js?lang={lang}"></script>
 
 </body>
-</html>
+</html>

js/Trigger.coffee

@@ -0,0 +1,18 @@
+class Trigger extends Class
+	constructor: ->
+		@trigger_off = true
+
+	handleTitleClick: =>
+		if @trigger_off
+		  @trigger_off = false
+		  document.body.classList.add("trigger-on")
+		else
+		  document.body.classList.remove("trigger-on")
+		  @trigger_off = true
+		return false
+
+	render: =>
+		h("div.Trigger", {classes: { "trigger-off": @trigger_off }}, [
+			h("a.icon", {"href": "#Trigger", onclick: @handleTitleClick})
+		])
+window.Trigger = Trigger

js/ZeroMe.coffee

@@ -39,6 +39,7 @@ class ZeroMe extends ZeroFrame
 		@content_profile = new ContentProfile()
 		@content_create_profile = new ContentCreateProfile()
 		@scrollwatcher = new Scrollwatcher()
+		@trigger = new Trigger()
 
 		if base.href.indexOf("?") == -1
 			@route("")
@@ -55,6 +56,7 @@ class ZeroMe extends ZeroFrame
 
 		@projector.replace($("#Head"), @head.render)
 		@projector.replace($("#Overlay"), @overlay.render)
+		@projector.merge($("#Trigger"), @trigger.render)
 		@loadLocalStorage()
 
 		# Update every minute to keep time since fields up-to date