Update toolbar style

5 files changed, 78 insertions, 93 deletions

diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 1c8fb023..94052ac2 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -214,21 +214,31 @@ body > header {
 
 /* #region left column internals */
 
+.toolbar {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    border-top: 1px solid #eee;
+}
+
+.toolbar a {
+    padding: 14px;
+    color: #88859d;
+    align-items: center;
+    vertical-align: middle;
+    border-right: 2px solid transparent;
+}
+.toolbar > a:hover {
+    background-color: #f8f8f8;
+    cursor: pointer;
+    border-right: 2px solid #ff339a;
+}
+
 #column ul,
 #column p,
 #column hr {
     margin: 10px 0;
 }
-#column li > a {
-    display: block;
-    height: 100%;
-    padding: 6px;
-}
-#column li > a:hover {
-    background-color: #fff;
-    border: 1px solid #eee;
-    transition: background-color 0.2s ease-in;
-}
 #column .margtop {
     margin-top: 15px;
 }
diff --git a/src/main/resources/templates/views/partial/homecolumn.html b/src/main/resources/templates/views/partial/homecolumn.html
index 5ab0d128..5b13dd66 100644
--- a/src/main/resources/templates/views/partial/homecolumn.html
+++ b/src/main/resources/templates/views/partial/homecolumn.html
@@ -1,20 +1,14 @@
-<ul class="toolbar">
-    <li>
-        <a href="/?show=top" title="Top">
-            <i data-icon="ei-heart" data-size="s"></i>Top
-        </a>
-    </li>
-    <li>
-        <a href="/?show=all" title="{{ i18n("messages","link.allMessages") }}">
-        <i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}
-        </a>
-    </li>
-    <li>
-        <a href="/?show=photos" title="{{ i18n("messages","link.withPhotos") }}">
-        <i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}
-        </a>
-    </li>
-</ul>
+<div class="toolbar">
+    <a href="/?show=top" title="Top">
+        <i data-icon="ei-heart" data-size="s"></i>Top
+    </a>
+    <a href="/?show=all" title="{{ i18n("messages", "link.allMessages") }}">
+    <i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}
+    </a>
+    <a href="/?show=photos" title="{{ i18n("messages", "link.withPhotos") }}">
+    <i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages", "link.withPhotos") }}
+    </a>
+</div>
 <div class="tags">
     <h4>{{ i18n("messages","link.trends") }}</h4>
     {% include "views/partial/tags" %}
diff --git a/src/main/resources/templates/views/partial/settings_tabs.html b/src/main/resources/templates/views/partial/settings_tabs.html
index 4715253e..60337d92 100644
--- a/src/main/resources/templates/views/partial/settings_tabs.html
+++ b/src/main/resources/templates/views/partial/settings_tabs.html
@@ -1,6 +1,8 @@
-<div id="pagetabs"><ul>
-    <li><a href="/settings">{{ i18n("messages","link.settings.main") }}</a></li>
-    <li><a href="/settings?page=password">{{ i18n("messages","link.settings.password") }}</a></li>
-    <li><a href="/settings?page=about">{{ i18n("messages","link.settings.about") }}</a></li>
-    <li><a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a></li>
-</ul></div>
\ No newline at end of file
+<div id="pagetabs">
+    <div class="toolbar">
+        <a href="/settings">{{ i18n("messages","link.settings.main") }}</a>
+        <a href="/settings?page=password">{{ i18n("messages","link.settings.password") }}</a>
+        <a href="/settings?page=about">{{ i18n("messages","link.settings.about") }}</a>
+        <a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/tagcolumn.html b/src/main/resources/templates/views/partial/tagcolumn.html
index 3e61d3d3..c411c3c4 100644
--- a/src/main/resources/templates/views/partial/tagcolumn.html
+++ b/src/main/resources/templates/views/partial/tagcolumn.html
@@ -2,32 +2,24 @@
     <h2>*{{ tag.name }}</h2>
 </div>
 {% if visitor is not empty and visitor.uid > 0 %}
-<ul class="toolbar">
+<div class="toolbar">
     {% if isSubscribed %}
-    <li>
-        <a href="/post?body=U+%2A{{ tag.name }}" title="Подписан">
-            <i data-icon="ei-check" data-size="s"></i>Subscribed
-        </a>
-    </li>
+    <a href="/post?body=U+%2A{{ tag.name }}" title="Подписан">
+        <i data-icon="ei-check" data-size="s"></i>Subscribed
+    </a>
     {% else %}
-    <li>
-        <a href="/post?body=S+%2A{{ tag.name }}" title="Подписаться">
-            <i data-icon="ei-plus" data-size="s"></i>Subscribe
-        </a>
-    </li>
+    <a href="/post?body=S+%2A{{ tag.name }}" title="Подписаться">
+        <i data-icon="ei-plus" data-size="s"></i>Subscribe
+    </a>
     {% endif %}
     {% if isInBL %}
-    <li>
-        <a href="/post?body=BL+%2A{{ tag.name }}" title="Разблокировать">
-            <i data-icon="ei-close-o" data-size="s"></i>Unblock
-        </a>
-    </li>
+    <a href="/post?body=BL+%2A{{ tag.name }}" title="Разблокировать">
+        <i data-icon="ei-close-o" data-size="s"></i>Unblock
+    </a>
     {% else %}
-    <li>
-        <a href="/post?body=BL+%2A{{ tag.name }}" title="Заблокировать">
-            <i data-icon="ei-close" data-size="s"></i>Block
-        </a>
-    </li>
+    <a href="/post?body=BL+%2A{{ tag.name }}" title="Заблокировать">
+        <i data-icon="ei-close" data-size="s"></i>Block
+    </a>
     {% endif %}
-</ul>
+</div>
 {% endif %}
diff --git a/src/main/resources/templates/views/partial/usercolumn.html b/src/main/resources/templates/views/partial/usercolumn.html
index 3e51644b..5d1aaff6 100644
--- a/src/main/resources/templates/views/partial/usercolumn.html
+++ b/src/main/resources/templates/views/partial/usercolumn.html
@@ -4,65 +4,52 @@
         <img src="{{ user.avatar }}" alt=""/>{{ user.name }}
     </a>
 </div>
-<ul class="toolbar">
+<div class="toolbar">
     {% if isSubscribed %}
-    <li>
-        <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
-            <i data-icon="ei-check" data-size="s"></i>Subscribed
-        </a>
-    </li>
+    <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
+        <i data-icon="ei-check" data-size="s"></i>Subscribed
+    </a>
     {% else %}
-    <li>
-        <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
-            <i data-icon="ei-plus" data-size="s"></i>Subscribe
-        </a>
-    </li>
+    <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
+        <i data-icon="ei-plus" data-size="s"></i>Subscribe
+    </a>
     {% endif %}
     {% if isInBL %}
-    <li>
-        <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
-            <i data-icon="ei-close-o" data-size="s"></i>Unblock
-        </a>
-    </li>
+    <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
+        <i data-icon="ei-close-o" data-size="s"></i>Unblock
+    </a>
     {% else %}
-    <li>
-        <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
-            <i data-icon="ei-close" data-size="s"></i>Block
-        </a>
-    </li>
+    <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
+        <i data-icon="ei-close" data-size="s"></i>Block
+    </a>
     {% endif %}
     {% if not isInBLAny %}
-    <li>
-        <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
-            <i data-icon="ei-envelope" data-size="s"></i>PM
-        </a>
-    </li>
+    <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
+        <i data-icon="ei-envelope" data-size="s"></i>PM
+    </a>
     {% endif %}
-</ul>
+</div>
 {% endif %}
-<ul>
+<div class="toolbar">
     {% 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-bell" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a></li>
+    <a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a>
+    <a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a>
+    <a href="/?show=discuss"><i data-icon="ei-bell" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a>
     {% 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>
+    <a href="/?show=mycomments" rel="nofollow">{{ i18n("messages","blog.comments") }}</a>
+    <a href="/?show=unanswered" rel="nofollow">Неотвеченные</a>
     {% 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") }}
             {% if not visitor.verified %}
             <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
             {% endif %}
         </a>
-    </li>
     {% endif %}
-</ul>
+</div>
 <form action="/{{ user.name }}/">
     <p><input type="text" name="search" class="inp" placeholder="{{ i18n('messages','label.search') }}"/></p>
 </form>