1 files changed, 49 insertions, 31 deletions
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 6fe1c82..9fa8ea7 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,39 +1,39 @@
 {{ 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%-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 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%]">
-                <div>
+            <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>
-                    <label><input type="checkbox" id="tag{{ . }}Checkbox" name="tags[]" value="{{ . }}" onclick="contextAll();" {{ if contains $.QueryTags . }}checked{{ end }}> {{ . }}</label>
+                <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>
         </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 gap-[5%]">
-                <div>
+            <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
@@ -49,7 +49,7 @@
 
     <div class="w-[0.5vh] border-r-[0.3vh] border-dotted border-main-dark bg-background-dark"></div>
 
-    <div hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
+    <div hx-get="/api/v1/blog-search" hx-vals='js:{lang: "{{ .Lang }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
         class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-[2.4vmin]">
         Loading...
     </div>
@@ -57,22 +57,6 @@
 {{ end }}
 
 {{ define "footer" }}
-<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');
@@ -105,7 +89,7 @@
             checkboxes.forEach(checkbox => {
                 checkbox.checked = true;
             });
-            const sortRadio = tagsContainer.querySelector('#sortTitleAsc');
+            const sortRadio = tagsContainer.querySelector('#sortPublicationDateDesc');
             sortRadio.checked = true;
         });
     }
@@ -134,7 +118,41 @@
         window.history.pushState({}, '', url.toString());
     }
 
+    function pickedTagSetHrefParams(tag) {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('tags[]');
+        url.searchParams.set('tags[]', tag);
+
+        const tagsContainers = document.querySelectorAll('form.tags-list');
+        tagsContainers.forEach(tagsContainer => {
+            const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = false;
+            });
+            chosenCheckbox = tagsContainer.querySelector(`#tag${tag}Checkbox`);
+            chosenCheckbox.checked = true;
+        });
+
+        window.history.pushState({}, '', url.toString());
+    }
+
     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 }}