diff --git a/static/resources_list.txt b/static/resources_list.txt index 7f90d6bfc..9939f4b61 100644 --- a/static/resources_list.txt +++ b/static/resources_list.txt @@ -18,6 +18,7 @@ skin/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png skin/jquery-ui/jquery-ui.theme.min.css skin/jquery-ui/jquery-ui.min.css skin/caret.png +skin/search-icon.svg skin/taskbar.js skin/langList.js skin/categoryList.js diff --git a/static/skin/home.css b/static/skin/home.css index c4f6874fc..3fb28094c 100644 --- a/static/skin/home.css +++ b/static/skin/home.css @@ -27,11 +27,14 @@ body { height: 200px; } -.kiwixNav__results { - font-size: 1.3rem; +.kiwixHomeBody__results { + font-size: 1.6rem; color: #333333; font-family: poppins; margin: 10px 0; + position: relative; + top: -10px; + left: 13px; } .kiwixNav__filters { @@ -42,17 +45,84 @@ body { } .kiwixNav__kiwixFilter { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + outline: 0; + box-shadow: none; + border: 0 !important; + background: white; + background-image: none; + border-radius: 1px; + width: 195px; height: 35px; - width: 231px; - border-radius: 100px; - border: solid 1px #b5b2b2; + } + + .kiwixNav__kiwixFilter:-ms-expand { + display: none; + } + +.kiwixNav__select { + position: relative; + display: flex; + width: 231px; + height: 35px; + line-height: 3; + background: #627B93; + overflow: hidden; + border-radius: 10px; + border: 1px solid #394856; +} + +.kiwixNav__kiwixFilter { + flex: 1; + color: black; + padding: 7px 10px 10px; + cursor: pointer; +} + +.kiwixNav__select::after { + content: '\25BC'; + color: #fff; + background-color: #627B93; + height: 100%; + position: absolute; + top: 0; + right: 0; + padding: 0 1em; + cursor: pointer; + pointer-events: none; + -webkit-transition: .25s all ease; + -o-transition: .25s all ease; + transition: .25s all ease; } .kiwixSearch { height: 35px; - width: 231px; - border-radius: 100px; + width: 229px; + border-radius: 10px; border: solid 1px #b5b2b2; + padding: 10px; + background-image: url('./search-icon.svg'); + background-repeat: no-repeat; + background-position: right center; + background-origin: content-box; + background-size: 15px; +} + +.searchButton { + margin: 0 17px; + height: 35px; + width: 100px; + border-radius: 10px; + color: white; + background-color: #627B93; + border: solid 1px #b5b2b2; +} + +.searchButton:hover { + background-color: #4f6478; } .kiwixHomeBody { @@ -96,6 +166,11 @@ body { margin: 10px 0 0 10px; } +.book__icon--image { + max-width: 100%; + max-height: 100%; +} + .book__title { display: grid; font-family: poppins; diff --git a/static/skin/index.js b/static/skin/index.js index 379db9ecd..752da8ae0 100644 --- a/static/skin/index.js +++ b/static/skin/index.js @@ -73,18 +73,8 @@ const iconUrl = getInnerHtml(book, 'icon'); const language = getInnerHtml(book, 'language'); const tags = getInnerHtml(book, 'tags'); - let tagHtml = tags.split(';').filter(tag => { return !(tag.split(':')[1] && tag.split(':')[1] == 'no')}) - .map((tag) => { - tag = tag.split(':'); - if (tag.length === 1) { - return tag[0].replace(/_/, ' '); - } else if (tag[1] !== 'yes') { - return tag[1].replace(/_/, ' '); - } else { - return (tag[0].indexOf('_') === 0 ? tag[0].replace('_', '') : tag[0]).replace(/_/, ' '); - } - }) - .filter((tag, index, tags) => tags.indexOf(tag) === index).join(' | '); + let tagHtml = tags.split(';').filter(tag => {return !(tag.split(':')[0].startsWith('_'))}) + .join(' | ').replace(/_/g, ' '); let downloadLink; let zimSize = 0; try { @@ -102,7 +92,7 @@ if (sort) { divTag.setAttribute('data-idx', bookOrderMap.get(id)); } - divTag.innerHTML = `
+ divTag.innerHTML = `
${title}
${humanFriendlyZimSize ? `
${humanFriendlyZimSize}
`: ''} @@ -139,7 +129,7 @@ } else { toggleFooter(); } - document.querySelector('.kiwixNav__results').innerHTML = `Results: ${results} items` + document.querySelector('.kiwixHomeBody__results').innerHTML = `${results} books` loader.style.display = 'none'; return books; }); @@ -162,7 +152,7 @@ setTimeout(() => { const divTag = document.createElement('div'); divTag.setAttribute('class', 'noResults'); - divTag.innerHTML = `No result. Would you like to reset filter?`; + divTag.innerHTML = `No result. Would you like to reset filter?`; kiwixHomeBody.append(divTag); kiwixHomeBody.setAttribute('style', 'display: flex; justify-content: center; align-items: center'); divTag.getElementsByTagName('a')[0].onclick = (event) => { @@ -226,6 +216,12 @@ 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()); diff --git a/static/skin/search-icon.svg b/static/skin/search-icon.svg new file mode 100644 index 000000000..a2c5d6047 --- /dev/null +++ b/static/skin/search-icon.svg @@ -0,0 +1,6 @@ + + + +Layer 1 + + \ No newline at end of file diff --git a/static/templates/index.html b/static/templates/index.html index 3d5630fa4..358896e31 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -46,14 +46,17 @@
-

- - +
+ +
+
+ +
@@ -61,6 +64,7 @@
+