From 1c14a4088b068fefe425cad1acdde2d603bd27a9 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sat, 30 Aug 2025 16:00:28 +0700
Subject: feat: always show search buttons out of overflow feat: add favicon

---
 static/favicon.ico              | Bin 0 -> 5694 bytes
 static/input.css                |   4 +++
 views/pages/blog-catalogue.html |  75 +++++++++++++++++++++-------------------
 3 files changed, 43 insertions(+), 36 deletions(-)
 create mode 100644 static/favicon.ico

diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..33eb226
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/input.css b/static/input.css
index f254970..47e7d16 100644
--- a/static/input.css
+++ b/static/input.css
@@ -581,6 +581,10 @@ body[data-theme~="ram"] .leaflet-tile {
         width: 100vw;
     }
 
+    .ar-lt-0\.8\:max-h-\[25\%\] {
+        max-height: 25%;
+    }
+
     .ar-lt-0\.8\:max-h-\[80\%\] {
         max-height: 80%;
     }
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 25b0685..1d0a2de 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,44 +1,47 @@
 {{ define "body" }}
 <div class="flex flex-row ar-lt-0.8:flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] flex-1 text-[1vmax]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-0.8:min-w-[10vh] ar-gt-0.8:max-w-[20vh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] flex shrink-0 flex-col overflow-y-auto ar-gt-0.8:mr-[1.2vmin]">
-        <fieldset>
-            <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
-            <div class="flex flex-col ar-lt-0.8:grid grid-cols-5 grid-flow-row-dense">
-                <div class="m-[0.4vmin]">
-                    <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
+        class="tags-list ar-gt-0.8:min-w-[10vh] ar-gt-0.8:max-w-[20vh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[25%] flex shrink-0 flex-col ar-gt-0.8:mr-[1.2vmin]">
+        <div class="flex flex-col overflow-y-auto">
+            <fieldset>
+                <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
+                <div class="flex flex-col ar-lt-0.8:grid grid-cols-5 grid-flow-row-dense">
+                    <div class="m-[0.4vmin]">
+                        <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
+                    </div>
+                    {{- range .Tags }}
+                    <div class="m-[0.4vmin]">
+                        <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }}  <span class="text-secondary italic">{{ .Count }}</span></label>
+                    </div>
+                    {{- end }}
                 </div>
-                {{- range .Tags }}
-                <div class="m-[0.4vmin]">
-                    <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }}  <span class="text-secondary italic">{{ .Count }}</span></label>
+            </fieldset>
+            <fieldset class="mt-[0.8vmin]">
+                <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
+                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
+                    </div>
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label>
+                    </div>
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
+                    </div>
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
+                    </div>
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
+                    </div>
+                    <div class="m-[0.4vmin]">
+                        <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
+                    </div>
                 </div>
-                {{- end }}
-            </div>
-        </fieldset>
-        <fieldset class="mt-[0.8vmin]">
-            <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
-            <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
-                </div>
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label>
-                </div>
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
-                </div>
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
-                </div>
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label>
-                </div>
-                <div class="m-[0.4vmin]">
-                    <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label>
-                </div>
-            </div>
-        </fieldset>
-        <div class="flex flex-row bg-background-light my-[2vmin] p-[0.4vmin] rounded-[0.4vmin] justify-items-center">
+            </fieldset>
+        </div>
+        <hr class="border-t-[0.2vmax] border-dotted border-main-dark my-[0.4vmin]">
+        <div class="flex flex-row grow bg-background-light my-[2vmin] p-[0.4vmin] rounded-[0.4vmin] justify-items-center">
             <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-[1.5vmax] hover:bg-background-dark cursor-pointer transition-colors duration-300"></i>
             <div class="w-[0.5vmin] bg-background-dark grow-0"></div>
             <button class="flex-1" type="submit">
-- 
cgit v1.3.1+13