From 1879aa7c4ee778362a856dd5bfd42f513c3276ed Mon Sep 17 00:00:00 2001
From: Henri Dickson <90480431+alphatownsman@users.noreply.github.com>
Date: Fri, 31 May 2024 13:40:49 -0400
Subject: [PATCH] improve navigation link style

---
 catalog/templates/discover.html        |  4 ++--
 catalog/templates/search_results.html  |  2 +-
 common/static/scss/_header.scss        | 24 +++++++++++++++++++++---
 common/templates/_header.html          | 18 ++++++++----------
 journal/templates/collection.html      |  4 +++-
 journal/templates/profile.html         |  4 ++--
 social/templates/feed.html             |  4 ++--
 social/templates/notification.html     |  2 +-
 users/templates/users/account.html     |  2 +-
 users/templates/users/data.html        |  2 +-
 users/templates/users/preferences.html |  2 +-
 11 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/catalog/templates/discover.html b/catalog/templates/discover.html
index 04a7ea94..5f5c0aee 100644
--- 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
index 56a119e7..185bf16f 100644
--- 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
index 19413292..bc4f397b 100644
--- 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
index 2281c822..4fd9c7e3 100644
--- 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
index ecd943d5..71022317 100644
--- 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
index 53b27245..7689e184 100644
--- 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
index 3d76b785..b5a13a79 100644
--- 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
index c50dfd13..c054b7ca 100644
--- 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
index ac2b968e..b804517c 100644
--- 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
index 574f7e42..aad6d855 100644
--- 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
index 3685d603..97350342 100644
--- 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>