www: responsive layout

9 files changed, 427 insertions, 125 deletions

diff --git a/juick-www/src/main/resources/messages.properties b/juick-www/src/main/resources/messages.properties
index 5911e3b4..8bf51837 100644
--- a/juick-www/src/main/resources/messages.properties
+++ b/juick-www/src/main/resources/messages.properties
@@ -15,6 +15,7 @@ link.discuss=Discuss
 link.recommended=Recommended
 link.postMessage=Post
 link.logout=Logout
+link.login=Login
 
 link.settings.main=Main
 link.settings.password=Password
diff --git a/juick-www/src/main/resources/messages_ru.properties b/juick-www/src/main/resources/messages_ru.properties
index 105b3505..7c948bc5 100644
--- a/juick-www/src/main/resources/messages_ru.properties
+++ b/juick-www/src/main/resources/messages_ru.properties
@@ -15,6 +15,7 @@ link.discuss=Обсуждения
 link.recommended=Рекомендации
 link.postMessage=Написать
 link.logout=Выйти
+link.login=Войти
 
 link.settings.main=Главная
 link.settings.password=Пароль
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index afc94973..6a28d96d 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -30,6 +30,54 @@ Element.prototype.selectText = function () {
     }
 };
 
+function once(el, eventType, callback) {
+    function eventHandler(e) {
+        el.removeEventListener(eventType, eventHandler);
+        callback(e);
+    }
+    el.addEventListener(eventType, eventHandler);
+}
+function nextClick(callback) {
+    setTimeout(() => once(document, 'click', callback), 0);
+}
+function nextClickWithCondition(predicate, callback) {
+    function clickCheck(e) {
+        if (predicate(e)) {
+            callback();
+        } else {
+            nextClick(clickCheck);
+        }
+    }
+    nextClick(clickCheck);
+}
+
+function keyboardClickable(el) {
+    el.addEventListener('keydown', e => {
+        if ((e.which === 13) || (e.which === 32)) { // 13 = Return, 32 = Space
+            e.preventDefault();
+            el.click();
+        }
+    });
+}
+
+function makeMenu(target, dropdown) {
+    target.addEventListener('click', e => {
+        if (!dropdown.contains(e.target)) {
+            target.classList.toggle('expanded');
+        }
+        nextClickWithCondition(
+            e => !target.contains(e.target),
+            () => target.classList.remove('expanded')
+        );
+    });
+    keyboardClickable(target);
+    dropdown.addEventListener('blur', e => {
+        if (!dropdown.contains(e.relatedTarget)) {
+            target.classList.remove('expanded');
+        }
+    }, true);
+}
+
 function autosize(el) {
     let offset = (!window.opera)
         ? (el.offsetHeight - el.clientHeight)
@@ -643,9 +691,30 @@ ready(function () {
         });
     });
 
-    var content = document.getElementById('content');
+    makeMenu(
+        document.querySelector('#user-menu'),
+        document.querySelector('#user-menu-dropdown')
+    );
+
+    let column = document.querySelector('#column');
+    if (column && column.querySelector('#ctitle') && column.querySelector('#column-expander')) {
+        let columnExpander = column.querySelector('#column-expander');
+        keyboardClickable(columnExpander);
+        columnExpander.addEventListener('click', () => {
+            column.classList.toggle('expanded');
+        });
+    } else {
+        column.classList.add('expanded');
+    }
+
+    let tagsColumn = document.querySelector('#column > .tags');
+    if (tagsColumn) {
+        document.querySelector('#column').classList.add('bottom');
+    }
+
+    let content = document.getElementById('content');
     if (content) {
-        var pageMID = content.getAttribute('data-mid');
+        let pageMID = content.getAttribute('data-mid');
         if (pageMID > 0) {
             document.querySelectorAll('li.msg').forEach(li => {
                 let showMoreBtn = li.querySelector('.msg-comments');
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index c09d7e88..2320b6e3 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -22,6 +22,14 @@ textarea {
     font-size: 12pt;
     -webkit-font-smoothing: subpixel-antialiased;
 }
+html {
+    box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
 h1,
 h2 {
     font-weight: normal;
@@ -60,6 +68,9 @@ pre::-moz-selection {
 .u {
     text-decoration: underline;
 }
+.flex-spacer {
+    flex-grow: 1;
+}
 
 /* #endregion */
 
@@ -70,20 +81,24 @@ html {
     color: #222;
 }
 #wrapper {
-    margin: 0 auto;
+    align-items: flex-start;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    margin: 55px auto 0 auto;
+    max-width: 100%;
     width: 1000px;
-    margin-top: 50px;
 }
 #column {
-    float: left;
-    margin-left: 10px;
+    margin: 12px 0 0 10px;
+    order: 0;
     overflow: hidden;
-    padding-top: 10px;
     width: 240px;
 }
 #content {
-    float: right;
     margin: 12px 0 0 0;
+    max-width: 100%;
+    order: 1;
     width: 728px;
 }
 body > header {
@@ -92,22 +107,32 @@ body > header {
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 10;
+    z-index: 9;
 }
 #header_wrapper {
     margin: 0 auto;
+    max-width: 100%;
+    min-height: 55px;
     width: 1000px;
-    display: flex;
 }
 #footer {
-    clear: both;
     color: #999;
     font-size: 10pt;
-    margin: 40px;
-    padding: 10px 0;
+    height: 32px;
+    margin: 20px auto;
+    max-width: 100%;
+    padding: 0 12px;
+    width: 1000px;
+}
+.announcement {
+    background: #f2f2ec;
+    margin-top: 12px;
+    padding: 6px;
+    text-align: center;
+    width: 100%;
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 1000px) {
     body {
         -moz-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
@@ -116,24 +141,31 @@ body > header {
     body,
     #wrapper,
     #topwrapper,
-    #content,
     #footer {
-        float: none;
         margin: 0 auto;
-        min-width: 310px;
         width: auto;
     }
     #wrapper {
-        margin-top: 50px;
+        align-items: center;
+        flex-direction: column;
+        margin: 55px auto 0 auto;
     }
     body > header {
         margin-bottom: 15px;
     }
     #column {
-        float: none;
-        margin: 0 10px;
-        padding-top: 0;
-        width: auto;
+        margin: 12px 0 0 0;
+        max-width: 100%;
+        padding: 0 8px;
+        width: 728px;
+    }
+    #column.bottom {
+        order: 3;
+    }
+    #content {
+        max-width: 100%;
+        padding: 0 8px;
+        width: 728px;
     }
 }
 
@@ -141,13 +173,18 @@ body > header {
 
 /* #region header internals */
 
-body > header a {
+#header_wrapper {
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+}
+#header_wrapper a {
     color: #069;
     font-size: 13pt;
 }
 #logo {
     height: 36px;
-    margin: 7px 25px 0 20px;
+    margin: 0 25px 0 20px;
     width: 110px;
 }
 #logo a {
@@ -161,48 +198,175 @@ body > header a {
     white-space: nowrap;
     width: 110px;
 }
-#global {
-    flex-grow: 1;
+#global > ul {
+    display: flex;
 }
 #global li {
-    display: inline-block;
-    margin: 14px 12px 0 0;
+    margin: 0 10px;
 }
 #search {
-    margin: 12px 20px 12px 0;
+    margin: 0;
 }
-#search input {
+#search input,
+#user-menu-dropdown input {
     background: #FFF;
     border: 1px solid #DDDDD5;
     padding: 4px;
 }
-body > header nav li:after {
-    color: #AAA;
-    content: "|";
-    display: inline-block;
-    margin-left: 12px;
+
+#menu-spacer-1,
+#menu-expander {
+    display: none;
 }
-body > header nav li:last-child:after {
+#menu-expander {
+    align-self: center;
+    cursor: pointer;
+    padding: 10px;
+}
+#user-menu {
+    align-self: stretch;
+    display: flex;
+    min-width: 10px;
+    position: relative;
+}
+#user-menu.expanded {
+    outline: none;
+}
+#user-menu > img {
+    cursor: pointer;
+    display: block;
+    height: 36px;
+    margin: 10px;
+    user-select: none;
+}
+body:not([data-hash]) #user-menu > img {
+    display: none;
+}
+body:not([data-hash]) #user-menu > #menu-expander {
+    display: block;
+    order: 3;
+}
+#user-menu-dropdown {
+    background: #f2f2ec;
+    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.28);
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 160px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+}
+#user-menu:not(.expanded) > #user-menu-dropdown {
+    display: none;
+}
+#user-menu-dropdown > ul {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: -1px 0 1px 0;
+}
+#user-menu-dropdown > ul.right-column {
+    min-width: 9em;
+    order: 1;
+}
+#user-menu-dropdown > ul.left-column {
+    display: none;
+    flex-grow: 100;
+    min-width: 11em;
+    order: 0;
+}
+#user-menu-dropdown > ul.left-column input {
+    max-width: 12em;
+    width: 100%;
+}
+#user-menu-dropdown li {
+    padding: 6px;
+}
+#user-menu-dropdown li > a {
+    display: block;
+}
+#user-menu-dropdown li > a .icon {
+    margin-right: 0.25em;
+}
+#user-menu-dropdown li:first-child,
+#user-menu-dropdown li.next-section {
+    border-top: 1px solid #ccc;
+}
+#user-menu-dropdown .icon--ei-share-apple {
+    transform: rotate(90deg);
+}
+#menu-photos-2,
+#menu-popular-2 {
     display: none;
 }
 
-@media screen and (max-width: 850px) {
-    body > header a {
-        font-size: 12pt;
+@media screen and (min-width: 710px) {
+    #user-menu:hover > #user-menu-dropdown {
+        display: flex;
     }
+}
+
+@media screen and (max-width: 850px) {
     #logo {
-        display: none;
+        margin: 0 10px 0 10px;
+    }
+}
+
+@media screen and (max-width: 710px) {
+    #user-menu {
+        flex-grow: 1;
+    }
+    #user-menu-dropdown {
+        border: 10px solid #f2f2ec;
+        overflow: hidden;
+        width: 100vw;
+    }
+    #user-menu-dropdown > ul.left-column {
+        display: flex;
     }
-    #global {
-        margin-left: 10px;
+    #menu-expander,
+    #menu-spacer-1 {
+        display: block;
     }
+    #search,
+    #menu-spacer-2 {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 600px) {
     #global li {
-        margin-right: 10px;
+        margin: 0 10px;
     }
-    #search {
+    #menu-photos-1 {
+        display: none;
+    }
+    #menu-photos-2 {
         display: inline-block;
-        float: none;
-        margin: 10px 10px;
+    }
+}
+
+@media screen and (max-width: 470px) {
+    #logo {
+        display: none;
+    }
+    #menu-popular-2 {
+        display: inline-block;
+    }
+    #user-menu > img {
+        margin: 6px;
+    }
+    #header_wrapper {
+        min-height: 48px;
+    }
+    #header_wrapper a {
+        font-size: 12pt;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    #user-menu-dropdown > ul.left-column input {
+        max-width: 100%;
     }
 }
 
@@ -219,12 +383,12 @@ body > header nav li:last-child:after {
 #column hr {
     margin: 10px 0;
 }
-#column li > a {
+#column > *:not(#ustats) li > a {
     display: block;
     height: 100%;
     padding: 6px;
 }
-#column li > a:hover {
+#column > *:not(#ustats) li > a:hover {
     background-color: #f2f2ec;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     transition: background-color 0.2s ease-in;
@@ -247,12 +411,15 @@ body > header nav li:last-child:after {
     width: 222px;
 }
 #ctitle {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
     font-size: 14pt;
 }
 #ctitle img {
     margin-right: 5px;
+    max-width: 48px;
     vertical-align: middle;
-    width: 48px;
 }
 #ustats li {
     font-size: 10pt;
@@ -269,6 +436,51 @@ body > header nav li:last-child:after {
     width: 48px;
 }
 
+#column-expander {
+    cursor: pointer;
+    display: none;
+    flex-grow: 1;
+    text-align: end;
+}
+
+@media screen and (min-width: 1001px) {
+    #column {
+        position: sticky;
+        top: 60px;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    #column-expander {
+        display: block;
+    }
+    #column:not(.expanded) > *:not(#ctitle) {
+        display: none;
+    }
+    ul.toolbar {
+        display: flex;
+        justify-content: space-around;
+        padding-top: 10px;
+    }
+    #ustats ul {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+    }
+    #ustats li {
+        margin: 3px 6px;
+    }
+}
+
+@media screen and (max-width: 470px) {
+    #column .inp {
+        width: 100%;
+    }
+    #ustats li {
+        width: 45%;
+    }
+}
+
 /* #endregion */
 
 /* #region main content */
@@ -276,7 +488,12 @@ body > header nav li:last-child:after {
 #content > p,
 #content > h1,
 #content > h2 {
-    margin: 1em 0;
+    margin: 10px 0;
+}
+#content > p:first-child,
+#content > h1:first-child,
+#content > h2:first-child {
+    margin-top: 0;
 }
 .page {
     background: #f2f2ec;
@@ -354,7 +571,7 @@ article .tags > a,
 .msg-avatar {
     float: left;
     height: 48px;
-    margin-right: 10px;
+    margin: 0 10px 10px 0;
     width: 48px;
 }
 .msg-avatar img {
@@ -366,10 +583,13 @@ article .tags > a,
     background: #FFF;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     line-height: 140%;
-    margin-bottom: 12px;
+    margin: 0 0 12px 0;
     padding: 20px;
     width: 640px;
 }
+li.msgthread .msg-cont {
+    width: 100%;
+}
 .reply-new .msg-cont {
     border-right: 5px solid #0C0;
 }
@@ -463,40 +683,34 @@ article .tags > a,
     line-height: 24px;
 }
 #content .title2 h2 {
-    font-size: x-large;
+    font-size: 12pt;
     margin: 0;
 }
 
-@media screen and (max-width: 850px) {
-    article {
-        margin: 8px;
-        overflow: auto;
+@media screen and (max-width: 1000px) {
+    li.msgthread .msg-cont .msg-avatar,
+    li.msgthread .msg-cont .msg-header > span {
+        display: none;
     }
+}
+
+@media screen and (max-width: 750px) {
     article p {
-        margin: 10px 0 8px 0;
-    }
-    article > nav.l,
-    .msg-cont > nav.l {
-        flex-direction: column;
-    }
-    article > nav.l a,
-    .msg-cont > nav.l a {
-        padding: 6px;
+        margin: 5px 0 10px 0;
     }
     .msg,
     .msg-cont {
-        min-width: 280px;
+        min-width: 240px;
         width: auto;
     }
-    .msg-cont {
-        margin: 8px;
+    article,
+    .msg-cont,
+    .title2 {
+        margin: 0 0 8px 0;
     }
     .msg-media {
         overflow: auto;
     }
-    .title2 h2 {
-        font-size: large;
-    }
     .msg-comment {
         flex-direction: column;
     }
@@ -507,12 +721,12 @@ article .tags > a,
     }
 }
 
-@media screen and (max-width: 480px) {
-    .msg-ts {
-        float: none;
+@media screen and (max-width: 500px) {
+    article > nav.l > a > span,
+    .msg-cont > nav.l > a > span {
+        display: none;
     }
     .msg-tags {
-        margin-top: 10px;
         min-height: 1px;
     }
     .msg-txt {
@@ -521,12 +735,6 @@ article .tags > a,
     .title2 {
         font-size: 11pt;
     }
-    #content .title2 h2 {
-        font-size: 11pt;
-    }
-    .title2-right {
-        line-height: initial;
-    }
 }
 
 /* #endregion */
@@ -556,7 +764,6 @@ q, blockquote {
 }
 #newmessage textarea {
     border: 1px solid #CCC;
-    box-sizing: border-box;
     margin: 0 0 5px 0;
     margin-top: 20px;
     max-height: 6em;
@@ -643,6 +850,12 @@ q, blockquote {
     width: 100px;
 }
 
+@media screen and (max-width: 450px) {
+    .newpm {
+        margin: 20px 0 30px 0;
+    }
+}
+
 /* #endregion */
 
 /* #region popup dialog (lightbox) */
@@ -704,7 +917,7 @@ q, blockquote {
 .dialoglogin {
     background: #EEEEE5;
     padding: 25px;
-    width: 300px;
+    width: 350px;
 }
 .dialog-opened {
     overflow: hidden;
@@ -852,7 +1065,6 @@ fieldset {
     margin: 30px -3px 15px -3px;
 }
 .embedContainer > * {
-    box-sizing: border-box;
     flex-grow: 1;
     margin: 3px;
     min-width: 49%;
diff --git a/juick-www/src/main/webapp/WEB-INF/layouts/content.html b/juick-www/src/main/webapp/WEB-INF/layouts/content.html
index f4ca0d84..d3260acf 100644
--- a/juick-www/src/main/webapp/WEB-INF/layouts/content.html
+++ b/juick-www/src/main/webapp/WEB-INF/layouts/content.html
@@ -47,7 +47,7 @@
 {% include "views/partial/navigation" %}
 <div id="wrapper">
     {% if visitor.uid == 0 %}
-    <div class="page">
+    <div class="announcement">
         <p>{{ i18n("messages","message.loginForSending", "/login") | raw }}.</p>
     </div>
     {% endif %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
index 2d0e3e97..ccbfe361 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
@@ -27,35 +27,35 @@
     <nav class="l">
         {% if visitor.uid == msg.user.uid %}
         <a href="/{{ msg.mid }}">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+            <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
             {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
         </a>
         {% elseif visitor.uid > 0 %}
         <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+            <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
             {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
         </a>
         {% else %}
         <a href="/login" class="a-login">
-            <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+            <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
             {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
         </a>
         {% endif %}
         {% if (visitor.uid > 0 and not msg.ReadOnly) or (visitor.uid == msg.user.uid) %}
         <a href="/{{ msg.mid }}" class="a-comment">
-            <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
+            <i data-icon="ei-comment" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.comment") }}</span>
             {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
         </a>
         <a href="#" class="msg-menu">
-            <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+            <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
         </a>
         {% elseif visitor.uid == 0 and not msg.ReadOnly %}
         <a href="/login" class="a-login">
-            <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
+            <i data-icon="ei-comment" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.comment") }}</span>
             {% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
         </a>
         <a href="#" class="msg-menu">
-            <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+            <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
         </a>
         {% endif %}
         {% if msg.FriendsOnly %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
index cabdca02..ff845ce9 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
@@ -4,17 +4,47 @@
         <nav id="global">
             <ul>
                 <li><a href="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}</a></li>
-                <li><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
-                <li><a id="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>{{
-                    i18n("messages","link.postMessage") }}</a>
-                </li>
+                <li id="menu-photos-1"><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
+                {% if visitor.uid > 0 %}
+                <li><a id="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>{{ i18n("messages","link.postMessage") }}</a></li>
+                {% else %}
+                <li><a href="/login" class="a-login"><i data-icon="ei-pencil" data-size="s"></i>{{ i18n("messages","link.postMessage") }}</a></li>
+                {% endif %}
             </ul>
         </nav>
+        <div id="menu-spacer-2" class="flex-spacer"></div>
         <div id="search">
             <form action="/">
-                <input name="search" class="text"
-                       placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
+                <input name="search" class="text" placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
             </form>
         </div>
+        <div id="user-menu" tabindex="0">
+            <div id="menu-expander"><i data-icon="ei-chevron-down" data-size="s"></i></div>
+            <div id="menu-spacer-1" class="flex-spacer"></div>
+            <img src="//i.juick.com/a/{{ visitor.uid }}.png" alt="{{ visitor.name }}"/>
+            <div id="user-menu-dropdown">
+                <ul class="right-column">
+                    {% if visitor.uid > 0 %}
+                    <li><a href="/{{ visitor.name }}"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","blog.blog") }}</a></li>
+                    <li><a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a></li>
+                    <li><a href="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a></li>
+                    <li><a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a></li>
+                    <li><a href="/settings" rel="nofollow"><i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}</a></li>
+                    <li class="next-section"><a href="/logout"><i data-icon="ei-share-apple" data-size="s"></i>{{ i18n("messages","link.logout") }}</a></li>
+                    {% else %}
+                    <li><a href="/login"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.login") }}</a></li>
+                    {% endif %}
+                </ul>
+                <ul class="left-column">
+                    <li id="menu-popular-2"><a href="/"><i data-icon="ei-star" data-size="s"></i>{{ i18n("messages","link.popular") }}</a></li>
+                    <li id="menu-photos-2"><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
+                    <li>
+                        <form action="/">
+                            <input name="search" class="text" placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}" size="1"/>
+                        </form>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
 </header>
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html b/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
index edf218a1..0906218a 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
@@ -2,6 +2,7 @@
     <a href="/{{ user.name }}">
         <img src="//i.juick.com/a/{{ user.uid }}.png" alt=""/>{{ user.name }}
     </a>
+    <div id="column-expander" tabindex="0"><i data-icon="ei-chevron-down" data-size="s"></i></div>
 </div>
 {% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %}
 <ul class="toolbar">
@@ -43,21 +44,8 @@
 <hr/>
 {% endif %}
 <ul>
-    {% if visitor is not empty and visitor.uid == user.uid %}
-    <li><a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a></li>
-    <li><a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a></li>
-    <li><a href="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a></li>
-    {% endif %}
     <li><a href="/{{ user.name }}/?show=recomm" rel="nofollow"><i data-icon="ei-heart" data-size="s"></i>{{ i18n("messages","blog.recommendations") }}</a></li>
     <li><a href="/{{ user.name }}/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","blog.photos") }}</a></li>
-    {% if visitor is not empty and visitor.uid == user.uid and false %}
-    <li><a href="/?show=mycomments" rel="nofollow">{{ i18n("messages","blog.comments") }}</a></li>
-    <li><a href="/?show=unanswered" rel="nofollow">Неотвеченные</a></li>
-    {% endif %}
-    {% if visitor is not empty and visitor.uid == user.uid %}
-    <li><a href="/settings" rel="nofollow"><i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}</a></li>
-    <li><a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a></li>
-    {% endif %}
 </ul>
 <hr/>
 <form action="/{{ user.name }}/">
@@ -79,10 +67,10 @@
     <div class="iread">
         {% for u in iread %}
         <span>
-                <a href="/{{ u.name }}/">
-                    <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}"/>
-                </a>
-            </span>
+            <a href="/{{ u.name }}/">
+                <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}"/>
+            </a>
+        </span>
         {% endfor %}
     </div>
     {% endif %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/thread.html b/juick-www/src/main/webapp/WEB-INF/views/thread.html
index a488b960..fc6ad086 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/thread.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/thread.html
@@ -17,7 +17,7 @@
             </div>
             <div class="msg-header">
                 <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
-                <a itemprop="url" rel="author" href="/{{ msg.user.name }}/"><span itemprop="name">{{ msg.user.name }}</span></a>
+                    <a itemprop="url" rel="author" href="/{{ msg.user.name }}/"><span itemprop="name">{{ msg.user.name }}</span></a>
                 </span>
                 <div class="msg-tags" itemprop="headline">
                     {{ tags(msg.user.name, msg.tags | tagsList) }}
@@ -34,36 +34,37 @@
             <nav class="l">
                 {% if visitor.uid == msg.user.uid %}
                 <a href="/{{ msg.mid }}">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+                    <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
                     {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
                 </a>
                 {% elseif visitor.uid > 0 %}
                 <a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+                    <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
                     {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
                 </a>
                 {% else %}
                 <a href="/login" class="a-login">
-                    <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+                    <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
                     {% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
                 </a>
                 {% endif %}
-                <a href="#" class="msg-menu"><i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}</a>
+                <a href="#" class="msg-menu">
+                    <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
+                </a>
                 {% if visitor.uid > 0 %}
                     {% if visitor.uid != msg.user.uid %}
                         {% if visitorSubscribed %}
                 <a href="/post?body=U+%23{{ msg.mid }}">
-                    <i data-icon="ei-check" data-size="s"></i>&nbsp;{{ i18n("messages","message.subscribed") }}
+                    <i data-icon="ei-check" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.subscribed") }}</span>
                 </a>
                         {% else %}
                 <a href="/post?body=S+%23{{ msg.mid }}">
-                    <i data-icon="ei-eye" data-size="s"></i>
-                    &nbsp;{{ i18n("messages","message.subscribe") }}
+                    <i data-icon="ei-eye" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.subscribe") }}</span>
                 </a>
                         {% endif %}
                     {% else %}
                 <a href="/post?body=D+%23{{ msg.mid }}">
-                    <i data-icon="ei-close" data-size="s"></i>&nbsp;{{ i18n("messages","message.delete") }}
+                    <i data-icon="ei-close" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.delete") }}</span>
                 </a>
                     {% endif %}
                 {% endif %}