mirror of https://github.com/kiwix/libkiwix.git
minor change in UI
This commit is contained in:
Manan Jethwani
Emmanuel Engelhart
parent
6e8200637e
commit
ad7a63a471
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue