www: responsive layout

3 files changed, 48 insertions, 30 deletions

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 %}