From ad7a63a471190af2a28e271438a019525fa1ff04 Mon Sep 17 00:00:00 2001 From: Manan Jethwani Date: Tue, 6 Jul 2021 08:43:42 +0530 Subject: [PATCH] minor change in UI --- static/skin/home.css | 72 ++++++++++++++++--------------------- static/skin/index.js | 41 ++++++++++++++++----- static/templates/index.html | 6 ++-- 3 files changed, 65 insertions(+), 54 deletions(-) diff --git a/static/skin/home.css b/static/skin/home.css index b8bb9aa14..12b526efe 100644 --- a/static/skin/home.css +++ b/static/skin/home.css @@ -23,15 +23,15 @@ body { .kiwixNav { background-color: #f4f6f8; width: 100%; - padding: 20px 11vw; - height: 200px; + padding: 20px 11vw 25px; + 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) { diff --git a/static/skin/index.js b/static/skin/index.js index 752da8ae0..d07ac6b70 100644 --- a/static/skin/index.js +++ b/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()); } })(); diff --git a/static/templates/index.html b/static/templates/index.html index 358896e31..cd317a9a1 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -48,18 +48,18 @@
-
-
- +