Hub feed timeline, language character filter and chronological timeline

README.md

@@ -1,2 +1,5 @@
 # ZeroMe
+
 Social network for ZeroNet
+
+![Screenshot](http://funkyimg.com/i/2BKNE.png)

content.json

@@ -1,6 +1,7 @@
 {
  "address": "1MeFqFfFFGQfa1J3gJyYYUvb5Lksczq7nH",
  "background-color": "#F2F4F6",
+ "background-color-dark": "#242424",
  "cloneable": true,
  "description": "Social site",
  "domain": "Me.ZeroNetwork.bit",
@@ -78,6 +79,10 @@
    "sha512": "dfd554eca364f1fb86ecedc98866638dee8c2118bedbf9b32fee797ec6b60fe4",
    "size": 3491
   },
+  "languages/sk.json": {
+   "sha512": "779e69b2a6750847438458971431b0406047784314c1c30a66f6b03091d378c1",
+   "size": 3518
+  },
   "languages/tr.json": {
    "sha512": "d9df6b218bcf359766ee3416a0cf4b4a3e9181601a7106957f674b22a79aa07a",
    "size": 3428
@@ -101,9 +106,9 @@
  "postmessage_nonce_security": true,
  "settings": {
   "default_hubs": {
-   "1White24UrrwQrD86o6Vrc1apgZ1x1o51": {
+   "1MoonP8t4rk9QamBUPh5Aspkwa1Xhf5ux2": {
     "description": "Hub for ZeroMe users. Runner: Nofish",
-    "title": "White hub"
+    "title": "Moon hub"
    }
   }
  },
@@ -115,5 +120,5 @@
  "title": "ZeroMe",
  "translate": ["js/all.js"],
  "viewport": "width=device-width, initial-scale=0.8",
- "zeronet_version": "0.5.7"
-}
+ "zeronet_version": "0.6.0"
+}

css/Button.css

@@ -8,7 +8,7 @@
 .button:active { transform: translateY(1px); transition: all 0.3s, transform none; box-shadow: inset 0px 5px 7px -3px rgba(212, 212, 212, 0.41); outline: none; transition: none }
 
 .button.loading {
-	color: rgba(0,0,0,0) !important; background: url(../img/loading.gif) no-repeat center center !important; border-color: rgba(0,0,0,0) !important;
+	color: rgba(0,0,0,0) !important; background: rgba(128, 128, 128, 0.5) url(../img/loading.gif) no-repeat center center !important; border-color: rgba(0,0,0,0) !important;
 	transition: all 0.5s ease-out; pointer-events: none; transition-delay: 0.5s
 }
 
@@ -24,7 +24,7 @@
 	padding: 12px 30px; border-radius: 3px; margin-top: 11px; background-color: #5d68ff; /*box-shadow: 0px 1px 4px rgba(93, 104, 255, 0.41);*/
 	border: none; border-bottom: 2px solid #4952c7; font-weight: bold;  color: #ffffff; font-size: 12px; text-transform: uppercase; margin-left: 10px;
 }
-.button-submit:hover { color: white; background-color: #6d78ff }
+.button-submit:hover, .button-submit:focus { color: white; background-color: #6d78ff }
 
 .button-small { padding: 7px 20px; margin-left: 10px }
 .button-outline { background-color: white; border: 1px solid #EEE; border-bottom: 2px solid #EEE; color: #AAA; }

css/Comment.css

@@ -5,7 +5,9 @@
 .comment-list .body { padding-top: 0px }
 .comment-list .body p { padding: 0px }
 
-.comment-create textarea { width: 100%; margin-bottom: 11px; box-sizing: border-box; }
+.comment-create { position: relative; }
+.comment-create textarea { width: 100%; margin-bottom: 11px; box-sizing: border-box; padding-right: 90px; }
+.comment-create .button-submit { right: 13px; position: absolute; bottom: 23px; }
 .comment { padding-top: 10px }
 .comment-list .comment .user { padding-bottom: 0px; white-space: nowrap; line-height: 15px; }
 .comment .body { padding-top: 4px; padding-bottom: 10px; }
@@ -15,4 +17,4 @@
 .comment .icon-reply:hover { opacity: 1; transition: none }
 .comment .user .name { line-height: 16px; }
 
-.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 { font-size: inherit; font-weight: bold }
+.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 { font-size: inherit; font-weight: bold }

css/Head.css

@@ -11,7 +11,7 @@
 .head .user .address { display: block }
 .head .settings {
 	display: inline-block; height: 50px; width: 50px; text-align: center; vertical-align: middle; transition: all 0.3s;
-	border-left: 1px solid #EEE; line-height: 50px; font-size: 20px; color: #AAA; font-weight: normal; text-decoration: none;
+	border-left: 1px solid rgba(0, 0, 0, 0.05); line-height: 50px; font-size: 20px; color: #AAA; font-weight: normal; text-decoration: none;
 }
 .head .settings:hover { color: #5d68ff; background-color: #FAFAFA; transition: none }
 .head .settings:active { background-color: #F5F5F5; transition: none }
@@ -20,4 +20,4 @@
 
 @media screen and (max-width: 1100px) {
 	.head .right { margin-right: 80px; }
-}
+}

css/Menu.css

@@ -1,7 +1,7 @@
 .menu {
 	background-color: white; padding: 10px 0px; position: absolute; top: 0px; max-height: 0px; overflow: hidden; transform: translate(-100%, -30px); pointer-events: none;
 	box-shadow: 0px 2px 8px rgba(0,0,0,0.1); border-radius: 2px; opacity: 0; transition: opacity 0.2s ease-out, transform 1s ease-out, max-height 0.2s ease-in-out; z-index: 99;
-	display: inline-block; z-index: 999; margin-top: 50px;
+	display: inline-block; z-index: 99999999999999999; margin-top: 50px;
 }
 .menu-right { left: 100% }
 .menu.visible { opacity: 1; max-height: 350px; transform: translate(-100%, 0px); transition: opacity 0.1s ease-out, transform 0.3s ease-out, max-height 0.3s ease-in-out; pointer-events: all }
@@ -10,8 +10,120 @@
 .menu-item-separator { margin-top: 3px; margin-bottom: 3px; border-top: 1px solid #eee }
 
 .menu-item:hover { background-color: #F6F6F6; transition: none; color: inherit; cursor: pointer; color: black; text-decoration: none }
-.menu-item:active, .menu-item:focus { background-color: #AF3BFF; color: white; transition: none }
+.menu-item:active, .menu-item:focus {
+background-color: transparent;
+color: white; transition: none;
+-webkit-tap-highlight-color: transparent;
+}
 .menu-item.selected:before {
 	content: "L"; display: inline-block; transform: rotateZ(45deg) scaleX(-1); line-height: 15px;
 	font-weight: bold; position: absolute; margin-left: -14px; font-size: 12px; margin-top: 2px;
-}
+}
+
+.menu-radio { white-space: normal; line-height: 26px }
+.menu-item:hover, .menu-radio:hover {background-color: transparent}
+.menu-radio span, .menu-radio a.all, .menu-radio a.filter {
+	background-color: #EEE; width: 18.5%; text-align: center; margin-top: 2px; margin-bottom: 2px; color: #333; font-weight: bold;
+	text-decoration: none; font-size: 13px; transition: all 0.3s; text-transform: uppercase; display: inline-block;
+}
+.post-list-type .menu-radio a:hover {color: #333}
+.menu-item .menu-radio .lang-on:hover,
+.menu-radio .lang-on.selected {
+background-color: rgba(130,255,137,0.2);
+}
+.menu-item .menu-radio .lang-off:hover,
+.menu-radio .lang-off.selected {
+background-color: rgba(255,138,140,0.2);
+}
+.menu-radio a:hover, .menu-radio a.all.active { transition: none; background-color: #d8f1d9;}
+.menu-radio a.long { font-size: 11px }
+
+.menu-radio span {
+text-align: center;
+width: 46%;
+margin-top: 2px;
+margin-right: 4px;
+display: inline-block;
+white-space: pre;
+outline: 4px solid transparent;
+}
+.menu-radio a {
+position: absolute;
+white-space: pre;
+display: block !important;
+width: 59px !important;
+}
+.menu-radio a.all, .menu-radio a.filter {
+position: relative;
+width: 46% !important;
+float: left;
+margin-right: 4px !important;
+}
+.menu-radio .lang-on {
+text-align: left;
+color: #333;
+}
+.menu-radio .lang-off {
+color: #333;
+text-align: right;
+margin-left: 59px !important;
+}
+
+.post-list-type .menu {
+width: 280px;
+text-align: left;
+margin-left: -55px;
+margin-top: 43px;
+transform: none;
+transition: max-height 0.3s ease-out;
+}
+.post-list-type .hub-menu, .post-list-type .filters-menu {
+position: relative;
+z-index: 1;
+display: inline-block;
+}
+.post-list-type .filters-menu .menu {
+margin-left: -85px;
+width: 257px;
+padding-left: 15px;
+}
+.post-list-type .hub-menu .menu .menu-item {
+width: 90px;
+overflow: hidden;
+}
+.post-list-type .hub-menu .menu .menu-item a {
+width: 90%;
+overflow: hidden;
+text-overflow: ellipsis;
+}
+.post-list-type .menu .menu-item, .post-list-type .menu .menu-radio a {
+padding: 0;
+margin: 0px;
+border-bottom: none !important;
+}
+.post-list-type .menu .menu-radio .all, .post-list-type .menu .menu-radio .filter {
+margin-bottom: 2px;
+margin-top: 2px;
+}
+
+/* Drop menu show after */
+
+.show-after, .show-since {
+padding: 3px 0;
+}
+.show-after .menu-item, .show-since .menu-item {
+display: inline;
+padding-right: 5px;
+}
+.show-after #show-after-date {
+width: 100px;
+border: 1px solid transparent;
+border-bottom: 1px solid #333;
+padding: 1px 5px;
+}
+.show-since #show-since-day {
+width: 17px;
+border: 1px solid transparent;
+border-bottom: 1px solid #333;
+padding: 1px 5px;
+}