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>