fix: rm small gap (upper-right corner)v0.5.3

fix: correct overflow in blog catalogue
fix: better handling of narrow height in blog catalogue
feat: include tag count in blog catalogue
feat: select all checkboxes on load when none are selected

3 files changed, 28 insertions, 24 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index d5146f8..121a5cd 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -48,7 +48,7 @@
     <div class="bg-background-dark flex z-10 ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
         <div class="pl-[0.5vw] bg-background-dark border-r-[0.4vmin] border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-0.8:min-w-fit ar-gt-0.8:max-w-[100vh] flex flex-col bg-background-dark relative mt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
+        <div class="ar-gt-0.8:min-w-fit ar-gt-0.8:max-w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
             <div class="flex flex-row mb-[0.4vmin]">
                 <i onclick="location.pathname += location.pathname.endsWith('/') ? '../' : '/../';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
                 <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 6fe1c82..4cda19d 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,7 +1,7 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-0.8:flex-col flex-1 text-[1vmax]">
+<div class="flex flex-row ar-lt-0.8:flex-col max-h-[calc(100%-6vmax)] ar-lt-0.8:max-h-[80%] 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 ar-gt-0.8:mr-[1.2vmin]">
+        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 gap-[5%]">
@@ -10,7 +10,7 @@
                 </div>
                 {{- range .Tags }}
                 <div>
-                    <label><input type="checkbox" id="tag{{ . }}Checkbox" name="tags[]" value="{{ . }}" onclick="contextAll();" {{ if contains $.QueryTags . }}checked{{ end }}> {{ . }}</label>
+                    <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>
@@ -60,20 +60,6 @@
 <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
 
 <script>
-    const tagsContainers = document.querySelectorAll('form.tags-list');
-    tagsContainers.forEach(tagsContainer => {
-        const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
-        anyChecked = false;
-        checkboxes.forEach(checkbox => {
-            anyChecked = checkbox.checked ? true : anyChecked;
-        });
-        if (!anyChecked) {
-            selectAll();
-        }
-    });
-</script>
-
-<script>
     function selectAll() {
         const tagsContainers = document.querySelectorAll('form.tags-list');
         tagsContainers.forEach(tagsContainer => {
@@ -137,4 +123,20 @@
     document.addEventListener('DOMContentLoaded', contextAll);
 </script>
 
+<script>
+    const tagsContainers = document.querySelectorAll('form.tags-list');
+    tagsContainers.forEach(tagsContainer => {
+        const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
+        anyChecked = false;
+        checkboxes.forEach(checkbox => {
+            anyChecked = checkbox.checked ? true : anyChecked;
+        });
+        if (!anyChecked) {
+            const selectAllCheckbox = tagsContainer.querySelector('#tagsAllCheckbox');
+            selectAllCheckbox.checked = true;
+            selectAll();
+        }
+    });
+</script>
+
 {{ end }}
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 36a6184..a9e4010 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,13 +1,15 @@
 {{- range .BlogPages }}
 <hr class="first-of-type:hidden border-t-[0.3vh] my-[0.8vmin] border-dotted border-main-dark w-[80%] mx-auto">
 <div class="m-[0.4vmin] flex flex-row justify-center justify-items-center">
-    <img onclick="location.href='{{ .ArticleLink }}}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+    <img onclick="location.href='{{ .ArticleLink }}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
     <div class="grow my-[0.4vmin] mx-[0.8vmin] flex flex-col justify-center">
-        <div class="flex flex-row">
-            <a href="{{ .ArticleLink }}" class="block text-[1vmax] font-extrabold">{{ .Title }}</a>
-            <a href="{{ .ArticleLink }}" class="block text-[1vmax] font-extrabold pl-[0.4vmin] pr-[0.4vmin] select-none cursor-pointer text-secondary">//</a>
-            <a href="{{ .ArticleLink }}" class="block text-[1vmax] italic text-secondary">{{ .ActionDate }}</a>
-            <p class="text-[1vmax] italic text-secondary text-right grow">{{ .PublishedTime }}</p>
+        <div class="flex flex-row gap-[5%] max-w-[100%]">
+            <a href="{{ .ArticleLink }}" class="flex-9/12 grow-0 block text-[1vmax] cursor-pointer">
+                <span class="font-extrabold">{{ .Title }}</span>
+                <span class="font-extrabold select-none text-secondary">//</span>
+                <span class="italic text-secondary">{{ .ActionDate }}</span>
+            </a>
+            <p class="flex-3/12 grow-0 text-[1vmax] italic text-secondary text-right">{{ .PublishedTime }}</p>
         </div>
         <p class="text-[1vmax] text-main-dark">{{ .ShortDescription }}</p>
         <p class="text-[1vmax] text-secondary">{{ .L.TagsLabel }} {{ .Tags }}</p>