From e2e48d9679c58bcfec136263a48e23fd36b6ef9f Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Wed, 2 Oct 2024 15:20:03 +1000
Subject: [PATCH] style ranking

---
 assets/views/rank.jet.html | 46 ++++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/assets/views/rank.jet.html b/assets/views/rank.jet.html
index 129ca16..da93df0 100644
--- a/assets/views/rank.jet.html
+++ b/assets/views/rank.jet.html
@@ -4,8 +4,9 @@
 {{- block body() }}
 <div class="row justify-content-center">
   <h1 class="h3 fw-bold text-center mb-4">{{ .Title }}</h1>
-
-  <div class="col-12 col-lg-6">
+  <div class="col-12">
+    <div class="row g-3">
+  <div class="col-12 col-lg-9">
     <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>
@@ -17,20 +18,13 @@
         {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
       {{- end }}
       <!-- TODO: align the names of the "Overall" and "Manga" buttons vertically -->
-      <div class="d-flex flex-wrap mb-2">
-        {{- path := slice("all") }}
-        {{- name := slice("Overall")}}
-        {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
-      </div>
       <div class="d-flex flex-wrap">
-        {{- path := slice("illust", "manga", "ugoira") }}
-        {{- name := slice("Illustrations", "Manga", "Ugoira")}}
+        {{- path := slice("all", "illust", "manga", "ugoira") }}
+        {{- name := slice("Overall", "Illustrations", "Manga", "Ugoira")}}
         {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Content)}}
       </div>
     </div>
-  </div>
 
-  <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>
@@ -57,24 +51,38 @@
         {{- yield Switcher(baseURL=url, paths=path, names=name, activeState=Mode)}}</div>
       {{- end }}
     </div>
+  </div>
+
+
+  <div class="col-12 col-lg-3">
+    <div class="card-body rounded-5 bg-body-tertiary p-4 mb-4">
+      <h2 class="h4 fw-bold mb-3">Reset modes</h2>
+      <p class="text-muted">You can reset all currently applied ranking modes and filters.</p>
+      <a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset modes</a>
+    </div>
 
     <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>
+      <h2 class="h4 fw-bold mb-3">Date ({{ .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 class="d-flex flex-wrap mb-2">
+        <a href="{{ url }}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center">
+          <span>Latest</span>
+        </a>
       </div>
       <div class="d-flex flex-wrap">
         {{- if .Data.PrevDate != "false" }}
-        <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-outline-secondary text-body flex-fill fw-bold border-2 rounded-pill me-2 mb-2">Next day</a>
+        <a href="{{ url }}&date={{.Data.PrevDate}}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center">
+          <span>Previous day</span>
+        </a>
         {{- end }}
+        <a href="{{ url }}&date={{.Data.NextDate}}" class="btn btn-secondary fw-bold rounded-pill flex-fill py-2 me-3 mb-2 d-flex align-items-center justify-content-center{{ .Data.NextDate == "false" ? " disabled" : "" }}"{{ .Data.NextDate == "false" ? " aria-disabled=\"true\"" : "" }}>
+          <span>Next day</span>
+        </a>
       </div>
     </div>
+  </div>
+</div>
 
   </div>