From 213bb87bf9090a672b6dce224ab6f7489efb78f0 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Wed, 2 Oct 2024 14:57:45 +1000
Subject: [PATCH] Improve UI/UX for discovery and ranking pages

Update Switcher block with new styling and active state indicator.
Enhance discovery page layout and integrate Switcher for filters.
Refine ranking page with explanatory text and reorganised navigation.
---
 assets/views/blocks/switcher.jet.html | 10 +++++++---
 assets/views/discovery.jet.html       | 18 ++++++++++++------
 assets/views/rank.jet.html            | 13 +++++++++----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/assets/views/blocks/switcher.jet.html b/assets/views/blocks/switcher.jet.html
index 18d59b8..fca44ea 100644
--- a/assets/views/blocks/switcher.jet.html
+++ b/assets/views/blocks/switcher.jet.html
@@ -8,21 +8,25 @@
 
     The template loops through the paths, creating a button for each one.
     Each button is styled using Bootstrap 5 classes, including:
-    - btn-outline-secondary for the button style (or btn-outline-danger for r18 paths)
+    - btn-secondary for the button style (or btn-danger for r18 paths)
     - rounded-pill for pill-shaped edges
     - fw-bold for bold text
 
     The template also handles the active state:
     - Adds 'active' class to the button if its path matches the activeState
     - Sets aria-pressed attribute for accessibility
+    - Adds an icon (bi-circle-fill) for the active state
 
     This switcher can be used for tabbed navigation or toggling between different views.
 *}
 
 {{- block Switcher(baseURL, paths, names, activeState) }}
     {{- range i, k := paths }}
-        <a href="{{ baseURL }}{{k}}" class="btn {{ len(k) >= 3 && k[len(k) - 3:] == "r18" ? "btn-outline-danger" : "btn-outline-secondary" }} text-body fw-bold border-2 rounded-pill me-2 mb-2 {{ activeState == k ? " active" : "" }}" role="button" aria-pressed="{{ activeState == k ? "true" : "false" }}">
-        {{- names[i] }}
+        <a href="{{ baseURL }}{{k}}" class="btn {{ len(k) >= 3 && k[len(k) - 3:] == "r18" ? "btn-danger" : "btn-secondary" }} fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center position-relative {{ activeState == k ? "active" : "" }}" aria-pressed="{{ activeState == k ? "true" : "false" }}" role="button">
+            {{- if activeState == k }}
+                <i class="bi bi-circle-fill start-icon position-absolute start-0 ms-3"></i>
+            {{- end }}
+            <span>{{ names[i] }}</span>
         </a>
     {{- end }}
 {{- end }}
diff --git a/assets/views/discovery.jet.html b/assets/views/discovery.jet.html
index 6591c2f..5d93d7d 100644
--- a/assets/views/discovery.jet.html
+++ b/assets/views/discovery.jet.html
@@ -1,14 +1,18 @@
 {{- extends "layout/default" }}
+{{- import "blocks/switcher" }}
 {{- block body() }}
 <div class="row justify-content-center">
   <h1 class="h3 fw-bold text-center mb-4">Discover artworks</h1>
 
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
-      <h2 class="h4 fw-bold mb-3">Type</h2>
+      <h2 class="h4 fw-bold mb-3"><i class="bi bi-list"></i> Type</h2>
       <p class="text-muted">Choose between discovering artworks or novels from users on Pixiv.</p>
       <div class="d-flex" aria-label="Artwork type">
-        <a href="/discovery" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">Artworks</a>
+        <a href="/discovery" class="btn btn-secondary fw-bold rounded-pill flex-fill active py-2 me-3 d-flex align-items-center justify-content-center position-relative" aria-pressed="true">
+          <i class="bi bi-circle-fill start-icon position-absolute start-0 ms-3"></i>
+          <span>Artworks</span>
+        </a>
         <a href="/discovery/novel" class="btn btn-secondary fw-bold rounded-pill py-2 flex-fill">Novels</a>
       </div>
     </div>
@@ -16,12 +20,14 @@
 
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
-      <h2 class="h4 fw-bold mb-3">Filter</h2>
+      <h2 class="h4 fw-bold mb-3"><i class="bi bi-funnel-fill"></i> Filter</h2>
       <p class="text-muted">Filter by content rating to customize your discovery experience.</p>
       <div class="d-flex" aria-label="Filter options">
-        <a href='{{replaceQuery(.Queries, "mode", "all")}}' class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">All</a>
-        <a href='{{replaceQuery(.Queries, "mode", "safe")}}' class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3">Safe</a>
-        <a href='{{replaceQuery(.Queries, "mode", "r18")}}' class="btn btn-danger fw-bold rounded-pill flex-fill py-2">R-18</a>
+        {{- Mode := isset(Queries.mode) ? Queries.mode : "all" }}
+        {{- url := replaceQuery(.Queries, "mode", "") }}
+        {{- path := slice("all", "safe", "r18") }}
+        {{- name := slice("All", "Safe", "R-18")}}
+        {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}
       </div>
     </div>
   </div>
diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index 6207509..338ba26 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -8,6 +8,7 @@
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Content</h2>
+      <p class="text-muted">Select the type of content you want to see in the rankings.</p>
       {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
       {{- Content := isset(Queries.content) ? Queries.content : "all" }} {{- url := "" }}
       {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
@@ -24,6 +25,7 @@
   <div class="col-12 col-lg-6">
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Modes</h2>
+      <p class="text-muted">Choose the time frame or category for the rankings.</p>
       {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
       <div class="d-flex flex-wrap mb-3">
         {{- path := slice("daily", "weekly") }}
@@ -50,16 +52,19 @@
 
     <div class="card border-0 rounded-5 bg-body-tertiary p-4 mb-4">
       <h2 class="h4 fw-bold mb-3">Date (current: {{ .Data.CurrentDate }})</h2>
+      <p class="text-muted">Navigate through different dates or view the latest rankings.</p>
       {{ url := "/ranking?content=" + Content + "&mode=" + Mode + "&page=1" }}
+      <div class="d-flex flex-wrap">
+        <a href="{{ url }}" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Latest</a>
+        <a href="/rankingCalendar" class="btn btn-outline-secondary text-body fw-bold border-2 rounded-pill me-2 mb-2">Ranking calendar</a>
+      </div>
       <div class="d-flex flex-wrap">
         {{- if .Data.PrevDate != "false" }}
-        <a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Yesterday</a>
+        <a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Previous day</a>
         {{- end }}
         {{ if .Data.NextDate != "false" }}
-        <a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Next day</a>
+        <a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Next day</a>
         {{- end }}
-        <a href="{{ url }}" class="btn btn-secondary fw-bold rounded-pill me-2 mb-2">Latest</a>
-        <a href="/rankingCalendar" class="btn btn-secondary fw-bold rounded-pill mb-2">Ranking calendar</a>
       </div>
     </div>