From 4886adee5a2995a986b1ffe925055edc08790e91 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Thu, 24 Oct 2024 22:30:05 +1100
Subject: [PATCH] nav and heading restyling

---
 assets/views/discovery.jet.html       |  6 ++++--
 assets/views/following.jet.html       |  4 +++-
 assets/views/index.jet.html           | 16 ++++++++------
 assets/views/newest.jet.html          |  6 ++++--
 assets/views/novelDiscovery.jet.html  |  6 ++++--
 assets/views/pixivisionIndex.jet.html |  2 +-
 assets/views/rank.jet.html            | 30 +++++++++++++--------------
 assets/views/user.jet.html            |  4 +++-
 8 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/assets/views/discovery.jet.html b/assets/views/discovery.jet.html
index 65ac4f2..4a39739 100644
--- a/assets/views/discovery.jet.html
+++ b/assets/views/discovery.jet.html
@@ -5,11 +5,11 @@
 <link rel="prefetch" href="/discovery/novel">
 
 <div class="row justify-content-center g-4">
-  <h1 class="text-center"><i class="bi bi-compass me-2"></i>Discovery</h1>
+  <h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>
 
   <div class="col-12">
 
-    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
       <div class="mb-2 mb-md-0">
         {{- Type := "discovery" }}
         {{- path := slice("discovery", "discovery/novel") }}
@@ -34,6 +34,8 @@
       </div>
     </div>
 
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
+
     <!-- Main content -->
     <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
       {{- include "fragments/small-tn" .Artworks }}
diff --git a/assets/views/following.jet.html b/assets/views/following.jet.html
index 61b5641..916d5e6 100644
--- a/assets/views/following.jet.html
+++ b/assets/views/following.jet.html
@@ -7,7 +7,7 @@
 
   <div class="col-12">
 
-    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
       {{- Mode := isset(Queries.mode) ? Queries.mode : "safe" }}
       {{- url := "/self/followingWorks" + "?mode=" }}
       {{- path := slice("all", "safe", "r18") }}
@@ -20,6 +20,8 @@
       </div>
     </div>
 
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
+
     <!-- Main content -->
     <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
       {{- if len(.Artworks) > 0 }}
diff --git a/assets/views/index.jet.html b/assets/views/index.jet.html
index bbe1d28..c6ec293 100644
--- a/assets/views/index.jet.html
+++ b/assets/views/index.jet.html
@@ -22,13 +22,15 @@
 
   <!-- Today's illustration rankings -->
   <div class="col-12">
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
-      <h2 class="mb-3 mb-md-0">Today's illustration rankings</h2>
-      <a href="/ranking" class="custom-btn-secondary">See more</a>
-    </div>
+    <h2>Today's illustration rankings</h2>
 
     <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
-      {{- include "fragments/ranking-tn" .Data.Rankings.Contents }}
+      {* NOTE: we only render 48 items here to avoid a newline at the end with only two items *}
+      {{- include "fragments/ranking-tn" (.Data.Rankings.Contents[:48]) }}
+    </div>
+
+    <div class="d-flex mt-3">
+      <a href="/ranking" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
     </div>
   </div>
 
@@ -78,7 +80,9 @@
     </div>
   </div>
 
-  <div class="col-12">
+  <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-0">
+
+  <div class="col-12 mt-3">
     <h2>Recommended works</h2>
     <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
       {{- include "fragments/small-tn" .Data.Recommended }}
diff --git a/assets/views/newest.jet.html b/assets/views/newest.jet.html
index aa0c2b6..9c85843 100644
--- a/assets/views/newest.jet.html
+++ b/assets/views/newest.jet.html
@@ -2,10 +2,10 @@
 {{- import "blocks/underlinenav" }}
 {{- block body() }}
 <div class="row justify-content-center g-4">
-  <h1 class="text-center"><i class="bi bi-stars me-2"></i>Newest</h1>
+  <h1 class="mb-0"><i class="bi bi-stars me-2"></i>Newest</h1>
 
   <div class="col-12">
-    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-end mx-auto mb-4">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-end mx-auto">
       {{- baseURL := "/newest" }}
       {{- paths := slice("", "?mode=r18") }}
       {{- names := slice("Safe", "R-18") }}
@@ -17,6 +17,8 @@
       </div>
     </div>
 
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
+
     <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
       {{ include "fragments/small-tn" .Items }}
     </div>
diff --git a/assets/views/novelDiscovery.jet.html b/assets/views/novelDiscovery.jet.html
index 6837a0e..40f9438 100644
--- a/assets/views/novelDiscovery.jet.html
+++ b/assets/views/novelDiscovery.jet.html
@@ -5,11 +5,11 @@
 <link rel="prefetch" href="/discovery">
 
 <div class="row justify-content-center g-4">
-  <h1 class="text-center"><i class="bi bi-compass me-2"></i>Discovery</h1>
+  <h1 class="mb-0"><i class="bi bi-compass me-2"></i>Discovery</h1>
 
   <div class="col-12">
 
-    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-4">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
       <div class="mb-2 mb-md-0">
         {{- Type := "/discovery/novel" }}
         {{- path := slice("/discovery", "/discovery/novel") }}
@@ -34,6 +34,8 @@
       </div>
     </div>
 
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
+
     <!-- Main content -->
     <div class="row row-cols-1 row-cols-lg-2 g-4">
       {{- range .Novels }}
diff --git a/assets/views/pixivisionIndex.jet.html b/assets/views/pixivisionIndex.jet.html
index 47650b4..f20d30d 100644
--- a/assets/views/pixivisionIndex.jet.html
+++ b/assets/views/pixivisionIndex.jet.html
@@ -2,7 +2,7 @@
 {* {{- import "blocks/pagination" }} *}
 {{- block body() }}
 <div class="row justify-content-center g-4">
-  <h1 class="text-center"><i class="bi bi-palette me-2"></i>pixivision</h1>
+  <h1 class="mb-0"><i class="bi bi-palette me-2"></i>pixivision</h1>
 
   <div class="col-12">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index 22c2651..05f3383 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -41,15 +41,24 @@
 </div>
 
 <div class="row justify-content-center g-4">
-  <h1 class="text-center"><i class="bi bi-bar-chart-line me-2"></i>Ranking</h1>
-
   <noscript>
     {{ include "noscript/ranking" }}
   </noscript>
 
-  <div class="col-12">
-    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Content types">
+  <div class="d-flex flex-row align-items-center justify-content-start">
+    <!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
+    {{- if isset(Queries.mode) && isset(Queries.content) }}
+    <h1 class="text-capitalize mb-0 me-3"><i class="bi bi-bar-chart-line me-2"></i>{{ Queries.mode }} {{ Queries.content }} rankings for {{ .Data.CurrentDate }}</h1>
+    {{- else }}
+    <h1 class="text-capitalize mb-0 me-3"><i class="bi bi-bar-chart-line me-2"></i>Daily All Rankings for {{ .Data.CurrentDate }}</h1>
+    {{- end }}
+    <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
+      <i class="bi bi-gear-fill"></i>
+    </button>
+  </div>
 
+  <div class="col-12">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto" aria-label="Content types">
       {*
       TODO: add additional checks to these UnderlineNav buttons to ensure only valid URLs can be generated
             e.g. selecting the "Ugoira" button hides the buttons under
@@ -72,17 +81,8 @@
       {{- name := slice("Overall", "Illustrations", "Ugoira", "Manga")}}
       {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Content)}}
     </div>
-    <div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Ranking options">
-      <!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
-      {{- if isset(Queries.mode) && isset(Queries.content) }}
-      <h2 class="text-capitalize mb-0"><i class="bi bi-bar-chart-line me-2"></i>{{ Queries.mode }} {{ Queries.content }} rankings for {{ .Data.CurrentDate }}</h2>
-      {{- else }}
-      <h2 class="text-capitalize mb-0"><i class="bi bi-bar-chart-line me-2"></i>Daily All Rankings for {{ .Data.CurrentDate }}</h2>
-      {{- end }}
-      <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
-        <i class="bi bi-gear-fill me-0 me-md-2"></i>Options
-      </button>
-    </div>
+
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
 
     <div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Date navigation">
       {{- yield RankingNav()}}
diff --git a/assets/views/user.jet.html b/assets/views/user.jet.html
index a3a2835..754d26a 100644
--- a/assets/views/user.jet.html
+++ b/assets/views/user.jet.html
@@ -98,7 +98,7 @@
 
   <div class="col-12" id="checkpoint">
     <!-- Navigation -->
-    <div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto mb-4">
+    <div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto">
       {{- baseURL := "/users/" + .User.ID + "/" }}
       {{- paths := slice("" + "#checkpoint", "illustrations" + "#checkpoint", "manga" + "#checkpoint", "novels" + "#checkpoint", "bookmarks" + "#checkpoint") }}
       {{- names := slice("Home", "Illustrations", "Manga", "Novels", "Bookmarks") }}
@@ -106,6 +106,8 @@
       {{- yield UnderlineNavUser(baseURL=baseURL, paths=paths, names=names, categoryCounts=categoryCounts, activeState=.Category.Value + "#checkpoint") }}
     </div>
 
+    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">
+
     <!-- User content -->
 
     <!-- Home category (all works) -->