styling

3 files changed, 30 insertions, 36 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 32888279..f90fe2c5 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -868,11 +868,10 @@ ready(function() {
         }
     });
     let location = window.location.href;
-    document.querySelectorAll('#global li a').forEach(el => {
+    document.querySelectorAll('#header_wrapper a').forEach(el => {
         if (el.href === location) {
             el.classList.add('active');
-            el.parentNode.classList.add('active');
-            el.parentNode.setAttribute('aria-disabled', 'true');
+            el.setAttribute('aria-disabled', 'true');
         }
     });
     initES();
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 45e1722a..f7acac3c 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -182,32 +182,27 @@ body > header {
 #global a {
     color: #88958d;
     display: inline-block;
-    padding: 14px 6px;
-    border-bottom: 2px solid transparent;
-}
-#global li {
-    display: inline-block;
+    padding: 14px;
     border-bottom: 2px solid transparent;
 }
 #ctitle a {
-    padding: 4px 20px;
+    padding: 2px 20px;
     border-bottom: 2px solid transparent;
 }
 .l a {
     border-bottom: 2px solid transparent;
 }
-#global li.active {
-    background: #fff;
-    color: #ff339a;
+#header_wrapper a.active {
+    background: #ff339a;
+    color: #fff;
     border-bottom: 2px solid #ff339a;
     pointer-events: none;
 }
-#global li:hover:not(.active),
+#global a:hover:not(.active),
 #ctitle a:hover:not(.active),
 .l a:hover {
     background: #fff;
     border-bottom: 2px solid #ff339a;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     cursor: pointer;
 }
 #search input {
@@ -548,16 +543,9 @@ article .tags > a,
 }
 
 @media screen and (max-width: 480px) {
-    #wrapper {
-        margin-top: 104px;
-    }
     #search {
         display: none;
     }
-    #global a {
-        padding: 14px 2px;
-        font-size: 11pt;
-    }
     .msg-cont > nav.l,
     article > nav.l {
         font-size: 9pt;
@@ -575,6 +563,9 @@ article .tags > a,
     .title2-right {
         line-height: initial;
     }
+    .icon-title {
+        display: none;
+    }
 }
 
 /* #endregion */
diff --git a/src/main/resources/templates/views/partial/navigation.html b/src/main/resources/templates/views/partial/navigation.html
index 8a21a437..3171c678 100644
--- a/src/main/resources/templates/views/partial/navigation.html
+++ b/src/main/resources/templates/views/partial/navigation.html
@@ -2,7 +2,7 @@
     <div id="header_wrapper">
         {% if visitor.uid > 0 %}
         <div id="ctitle">
-            <a href="/{{ visitor.name }}">
+            <a href="/{{ visitor.name }}/">
                 <img src="{{ visitor.avatar }}" alt=""/>{{ visitor.name }}
                 {% if not visitor.verified %}
                 <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
@@ -19,21 +19,25 @@
             </form>
         </div>
         <nav id="global">
-            <ul>
-                <li><a href="/"><i data-icon="ei-comment" data-size="s"></i>{{ i18n("messages","link.discuss") }}{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}</a></li>
-                <li><a href="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}</a></li>
+            <a href="/">
+                <i data-icon="ei-comment" data-size="s"></i>
+                <span class="icon-title">{{ i18n("messages","link.discuss") }}</span>{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}
+            </a>
+            <a href="/?show=all" rel="nofollow">
+                <i data-icon="ei-search" data-size="s"></i>
+                <span class="icon-title">{{ i18n("messages","link.allMessages") }}</span>
+            </a>
                 {% 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 class="a-login" href="/login" rel="nofollow">
-                        <i data-icon="ei-user" data-size="s"></i>{{ i18n("messages", "link.Login") }}
-                    </a>
-                </li>
-                {% endif %}
-            </ul>
+            <a id="post" href="/post">
+                <i data-icon="ei-pencil" data-size="s"></i>
+                <span class="icon-title">{{ i18n("messages","link.postMessage") }}</span>
+            </a>
+            {% else %}
+            <a class="a-login" href="/login" rel="nofollow">
+                <i data-icon="ei-user" data-size="s"></i>
+                <span class="icon-title">{{ i18n("messages", "link.Login") }}</span>
+            </a>
+            {% endif %}
         </nav>
     </div>
 </header>