minor change in UI

static/skin/home.css

@@ -23,15 +23,15 @@ body {
 .kiwixNav {
     background-color: #f4f6f8;
     width: 100%;
-    padding: 20px 11vw;
+    padding: 20px 11vw 25px;
-    height: 200px;
+    height: 140px;
 }
 
 .kiwixHomeBody__results {
     font-size: 1.6rem;
     color: #333333;
     font-family: poppins;
-    margin: 10px 0;
+    margin: 10px 0 -5px;
     position: relative;
     top: -10px;
     left: 13px;
@@ -73,16 +73,16 @@ body {
     width: 231px;
     height: 35px;
     line-height: 3;
-    background: #627B93;
+    background: #909090;
     overflow: hidden;
     border-radius: 10px;
-    border: 1px solid #394856; 
+    border: 1px solid #b5b2b2;
 }
 
 .kiwixNav__select::after {
     content: '\25BC';
     color: #fff;
-    background-color: #627B93;
+    background-color: #909090;
     height: 100%;
     position: absolute;
     top: 0;
@@ -95,6 +95,11 @@ body {
     transition: .25s all ease;
 }
 
+.kiwixNav__kiwixFilter option {
+    background-color: #fff;
+    color: #000;
+}
+
 .kiwixSearch {
     height: 35px;
     width: 229px;
@@ -114,17 +119,17 @@ body {
     width: 100px;
     border-radius: 10px;
     color: white;
-    background-color: #627B93;
+    background-color: #909090;
     border: solid 1px #b5b2b2;
 }
 
 .searchButton:hover {
-    background-color: #4f6478;
+    background-color: #858585;
 }
 
 .kiwixHomeBody {
     padding: 20px 15vw;
-    min-height: calc(100vh - 230px);
+    min-height: calc(100vh - 170px);
     position: relative;
 }
 
@@ -202,6 +207,7 @@ body {
     font-weight: 300;
     font-size: 1.2rem;
     color: #4d4d4d;
+    line-height: 1.25;
 }
 
 .book__languageTag {
@@ -257,26 +263,8 @@ body {
     font-family: roboto;
 }
 
-.book__links > a::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform: scaleY(0);
-    transform-origin: bottom center;
-    background: #00b4e4;
-    color: white;
-    z-index: -1;
-    transition: transform 0.2s;
-}
-
-.book__links > a:hover::after {
-    transform: scaleY(1);
-}
-
 .book__links > a:hover {
+    background: #00b4e4;
     color: white;
 }
 
@@ -349,38 +337,38 @@ body {
 
 @media screen and (max-width: 1100px) {
 
-    .kiwixNav {
-        height: 250px;
-    }
-
     .kiwixHomeBody {
         padding: 20px 10vw;
-        min-height: calc(100vh - 280px);
+        min-height: calc(100vh - 170px);
     }
 
     .kiwixNav__filters {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
     }
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width: 590px) {
 
     .kiwixNav {
-        height: 350px;
+        height: 257px;
     }
 
     .kiwixHomeBody {
-        min-height: calc(100vh - 380px);
+        min-height: calc(100vh - 287px);
+    }
+    
+    .kiwixSearch {
+        margin-top: 11px;
+    }
+    
+    .searchButton {
+        margin: 19px 0;
+        width: 229px;
     }
 
     .kiwixNav__filters {
         grid-template-columns: 1fr;
     }
-
-    .searchButton {
-        margin: 17px 0;
-        width: 229px;
-    }
 }
 
 @media screen and (max-width: 340px) {

static/skin/index.js

@@ -129,7 +129,12 @@
             } else {
                 toggleFooter();
             }
-            document.querySelector('.kiwixHomeBody__results').innerHTML = `${results} books`
+            const kiwixResultText = document.querySelector('.kiwixHomeBody__results')
+            if (results) {
+                kiwixResultText.innerHTML = `${results} books`;
+            } else {
+                kiwixResultText.innerHTML = ``;
+            }
             loader.style.display = 'none';
             return books;
         });
@@ -160,7 +165,14 @@
                         window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`);
                         setCookie(filterCookieName, 'lang=');
                         resetAndFilter();
-                        filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
+                        document.querySelectorAll('.filter').forEach(filter => {
+                            filter.value = params.get(filter.name) || '';
+                            if (filter.value) {
+                                filter.style = 'background-color: #858585; color: #fff';
+                            } else {
+                                filter.style = 'background-color: #ffffff; color: black';
+                            }
+                        })
                     };
                     loader.setAttribute('style', 'position: absolute; top: 50%');
                 }, 300);
@@ -216,22 +228,23 @@
         bookOrderMap.clear();
         params = new URLSearchParams(window.location.search);
         if (filterType) {
-            const filter = document.getElementsByName(filterType)[0];
-            if (filterValue) {
-                filter.style = 'background-color: #4f6478; color: #fff';
-            } else {
-                filter.style = 'background-color: #ffffff; color: black';
-            }
             params.set(filterType, filterValue);
             window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
             setCookie(filterCookieName, params.toString());
         }
+        document.querySelectorAll('.filter').forEach(filter => {
+            if (filter.value) {
+                filter.style = 'background-color: #858585; color: #fff';
+            } else {
+                filter.style = 'background-color: #ffffff; color: black';
+            }
+        });
         await loadAndDisplayBooks(true);
     }
 
     window.addEventListener('popstate', async () => {
         await resetAndFilter();
-        filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
+        document.querySelectorAll('.filter').forEach(filter => {filter.value = params.get(filter.name) || ''});
     });
 
     async function loadSubset() {
@@ -277,6 +290,9 @@
         await loadAndDisplayBooks();
         await loadAndDisplayOptions('#languageFilter', langList);
         await loadAndDisplayOptions('#categoryFilter', categoryList);
+        document.querySelectorAll('.filter').forEach(filter => {
+            filter.addEventListener('change', () => {resetAndFilter(filter.name, filter.value)});
+        });
         filterTypes.forEach((filter) => {
             const filterTag = document.getElementsByName(filter)[0];
             filterTag.addEventListener('change', () => {resetAndFilter(filterTag.name, filterTag.value)});
@@ -292,6 +308,13 @@
             langFilter.value = browserLang.length === 3 ? browserLang : iso6391To3[browserLang];
             langFilter.dispatchEvent(new Event('change'));
         }
+        document.querySelectorAll('.filter').forEach(filter => {
+            if (filter.value) {
+                filter.style = 'background-color: #858585; color: #fff';
+            } else {
+                filter.style = 'background-color: #ffffff; color: black';
+            }
+        });
         setCookie(filterCookieName, params.toString());
     }
 })();

static/templates/index.html

@@ -48,18 +48,18 @@
     <div class='kiwixNav'>
       <div class="kiwixNav__filters">
         <div class="kiwixNav__select">
-          <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter'>
+          <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>
             <option value="" selected>All languages</option>
           </select>
         </div>
         <div class="kiwixNav__select">
-          <select name="category" id="categoryFilter" class='kiwixNav__kiwixFilter'>
+          <select name="category" id="categoryFilter" class='kiwixNav__kiwixFilter filter'>
             <option value="" selected>All categories</option>
           </select>
         </div>
       </div>
       <form id='kiwixSearchForm' class='kiwixNav__SearchForm'>
-        <input type="text" name="q" placeholder="Search" id="searchFilter" class='kiwixSearch'>
+        <input type="text" name="q" placeholder="Search" id="searchFilter" class='kiwixSearch filter'>
         <input type="submit" class="searchButton" value="Search"/>
       </form>
     </div>