Fixed #31: fixed filter toggle UI

Author: rgaudin

assets/dashboard.js

@@ -180,8 +180,16 @@ const Filtering = class {
 
     function updateSort() {
       // large sort btn
-      // const btns = document.getElementsByClassName('kiwix-sort-btn');
-      const btns = document.getElementsByClassName('kiwix-order-dir-btn');
+      let btns = document.getElementsByClassName('kiwix-sort-btn')
+      for (var i=0; i<btns.length; i++) {
+        let funcClass = (btns[i].value == thefilter.order_by) ? addClass : removeClass;
+        funcClass(btns[i], 'kiwix-sort-btn-active');
+        funcClass(btns[i], 'kiwix-mobile-btn-active');
+        funcClass(btns[i], `kiwix-${page}-btn-active`);
+      }
+
+      // arrow asc/desc
+      btns = document.getElementsByClassName('kiwix-order-dir-btn');
       for (var i=0; i<btns.length; i++) {
         let funcClass = (btns[i].value == thefilter.order_dir) ? addClass : removeClass;
         funcClass(btns[i], 'kiwix-sort-btn-active');

templates/base.html

@@ -142,7 +142,7 @@
           <button
             id="sort-by-name"
             value="name"
-            class="kiwix-{{ page }}-btn akiwix-{{ page }}-btn-active kiwix-sort-btn akiwix-sort-btn-active"
+            class="kiwix-{{ page }}-btn akiwix-{{ page }}-btn-active kiwix-sort-btn kiwix-sort-btn-active"
           >Title</button>
           <button
             id="sort-by-size"
@@ -152,7 +152,7 @@
           <button
             id="order-desc"
             value="desc"
-            class="kiwix-{{ page }}-btn akiwix-{{ page }}-btn-active kiwix-order-dir-btn akiwix-order-dir-btn-active ms-6"
+            class="kiwix-{{ page }}-btn akiwix-{{ page }}-btn-active kiwix-order-dir-btn kiwix-order-dir-btn-active ms-6"
           ><i title="Descending order" class="fa-solid fa-arrow-down"></i></button>
           <button
             id="order-asc"
@@ -347,7 +347,7 @@ <h3 class="text-[1.2em] font-semibold mt-[2em]">Order</h3>
           <button
             id="order-desc"
             value="desc"
-            class="kiwix-mobile-btn akiwix-mobile-btn-active kiwix-order-dir-btn akiwix-order-dir-btn-active rounded-[1.5em] w-[5em]"
+            class="kiwix-mobile-btn akiwix-mobile-btn-active kiwix-order-dir-btn kiwix-order-dir-btn-active rounded-[1.5em] w-[5em]"
           ><i title="Descending order" class="fa-solid fa-arrow-down"></i></button>
           <button
             id="order-asc"