improve navigation link style

neodb-social · May 31, 2024 · 1879aa7 · 1879aa7
1 parent 20ca5fa
commit 1879aa7
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 25 deletions.
diff --git a/catalog/templates/discover.html b/catalog/templates/discover.html
@@ -3,7 +3,7 @@
 {% load mastodon %}
 {% load thumb %}
 <!DOCTYPE html>
-<html lang="zh" class="classic-page">
+<html lang="zh" class="classic-page nav-page-discover">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,7 +23,7 @@
   <script src="{% static 'js/podcast.js' %}"></script>
 </head>
 <body>
-  {% include "_header.html" with current="discover" %}
+  {% include "_header.html" %}
   <script>
     function _scroll_left(el){
       el.scrollBy(0-el.offsetWidth, 0);

diff --git a/catalog/templates/search_results.html b/catalog/templates/search_results.html
@@ -6,7 +6,7 @@
 {% load duration %}
 {% load thumb %}
 <!DOCTYPE html>
-<html lang="zh" class="classic-page">
+<html lang="zh" class="classic-page nav-page-search">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/common/static/scss/_header.scss b/common/static/scss/_header.scss
@@ -21,11 +21,11 @@ body {
         min-width: -moz-max-content;
       }
 
-      ul li a.current {
-        font-weight: bold;
-        color: var(--pico-primary);
+      .nav-links a {
+        color: var(--pico-secondary);
       }
 
+      font-weight: bold;
 
       .nav-search,
       .nav-search li {
@@ -171,3 +171,21 @@ body {
     */
   }
 }
+
+.nav-page-discover .nav-links a.nav-link-discover {
+  color: var(--pico-primary) !important;
+  font-weight: bold;
+}
+
+.nav-page-feed .nav-links a.nav-link-feed {
+  color: var(--pico-primary) !important;
+  font-weight: bold;
+}
+.nav-page-home .nav-links a.nav-link-home {
+  color: var(--pico-primary) !important;
+  font-weight: bold;
+}
+.nav-page-search .nav-links a.nav-link-search {
+  color: var(--pico-primary) !important;
+  font-weight: bold;
+}
diff --git a/common/templates/_header.html b/common/templates/_header.html
@@ -51,29 +51,27 @@
     </ul>
     <ul class="nav-links">
       <li class="small-only">
-        <a _="on click toggle .unhide on .nav-search then call #q.focus()"
+        <a class="nav-link-search"
+           _="on click toggle .unhide on .nav-search then call #q.focus()"
            href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
       </li>
       <li class="small-only">
-        <a href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a>
+        <a class="nav-link-discover" href="{% url 'catalog:discover' %}"><i class="fa-solid fa-globe"></i></a>
       </li>
       <li class="small-only">
-        <a href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a>
+        <a class="nav-link-feed" href="{% url 'social:feed' %}"><i class="fa-solid fa-users"></i></a>
       </li>
       <li class="small-only">
-        <a href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a>
+        <a class="nav-link-home" href="{% url 'common:me' %}"><i class="fa-solid fa-house-user"></i></a>
       </li>
       <li class="large-only">
-        <a class="{% if current == 'discover' %}secondary{% endif %}"
-           href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
+        <a class="nav-link-discover" href="{% url 'catalog:discover' %}">{% trans 'Explore' %}</a>
       </li>
       <li class="large-only">
-        <a class="{% if current == 'timeline' %}secondary{% endif %}"
-           href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
+        <a class="nav-link-feed" href="{% url 'social:feed' %}">{% trans 'Feed' %}</a>
       </li>
       <li class="large-only">
-        <a class="{% if current == 'home' %}secondary{% endif %}"
-           href="{% url 'common:me' %}">{% trans 'Home' %}</a>
+        <a class="nav-link-home" href="{% url 'common:me' %}">{% trans 'Home' %}</a>
       </li>
     </ul>
     <ul class="nav-dropdown">

diff --git a/journal/templates/collection.html b/journal/templates/collection.html
@@ -110,7 +110,9 @@ <h3>
         <section>
           <div class="entity-list"
                hx-get="{% url 'journal:collection_retrieve_items' collection.uuid %}"
-               hx-trigger="load"></div>
+               hx-trigger="load">
+            <i class="fa-solid fa-compact-disc fa-spin loading"></i>
+          </div>
         </section>
         <section>
           {% if request.user.is_authenticated %}

diff --git a/journal/templates/profile.html b/journal/templates/profile.html
@@ -3,7 +3,7 @@
 {% load mastodon %}
 {% load thumb %}
 <!DOCTYPE html>
-<html lang="zh" class="classic-page">
+<html lang="zh" class="classic-page{% if me %} nav-page-home{% endif %}">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -30,7 +30,7 @@
   </head>
   <body>
     {% if request.user == identity.user %}
-      {% include "_header.html" with current="home" %}
+      {% include "_header.html" %}
     {% else %}
       {% include "_header.html" %}
     {% endif %}

diff --git a/social/templates/feed.html b/social/templates/feed.html
@@ -4,7 +4,7 @@
 {% load mastodon %}
 {% load thumb %}
 <!DOCTYPE html>
-<html lang="zh" class="feed-page">
+<html lang="zh" class="feed-page nav-page-feed">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,7 +16,7 @@
   <script src="{% static 'js/podcast.js' %}"></script>
 </head>
 <body>
-  {% include "_header.html" with current="timeline" %}
+  {% include "_header.html" %}
   <main>
     <div class="grid__main">
       <h5>{% trans 'Activities from those you follow' %}</h5>

diff --git a/social/templates/notification.html b/social/templates/notification.html
@@ -4,7 +4,7 @@
 {% load mastodon %}
 {% load thumb %}
 <!DOCTYPE html>
-<html lang="zh" class="feed-page">
+<html lang="zh" class="feed-page nav-page-feed">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/users/templates/users/account.html b/users/templates/users/account.html
@@ -11,7 +11,7 @@
     {% include "common_libs.html" %}
   </head>
   <body>
-    {% include "_header.html" with current="data" %}
+    {% include "_header.html" %}
     <main>
       <div class="grid__main">
         {% if allow_any_site %}

diff --git a/users/templates/users/data.html b/users/templates/users/data.html
@@ -11,7 +11,7 @@
     {% include "common_libs.html" %}
   </head>
   <body>
-    {% include "_header.html" with current="data" %}
+    {% include "_header.html" %}
     <main>
       <div class="grid__main">
         <article>

diff --git a/users/templates/users/preferences.html b/users/templates/users/preferences.html
@@ -12,7 +12,7 @@
     {% include "common_libs.html" %}
   </head>
   <body>
-    {% include "_header.html" with current="data" %}
+    {% include "_header.html" %}
     <main>
       <div class="grid__main">
         <article>