Skip to content

Commit

Permalink
Fixed #11: added mobile filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgaudin
rgaudin committed Apr 26, 2024
1 parent 2cdc1e5 commit bd38b9e
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 8 deletions.
18 changes: 18 additions & 0 deletions assets/dashboard-tailwind-src.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,20 @@ select {
@apply z-50 pr-[2em] hover:cursor-default;
}

.kiwix-mobile-btn {
@apply hover:bg-kwordergrey-600 hover:text-white bg-kwordergrey-100 text-kwwhite;
}
.kiwix-mobile-btn-active {
@apply border-white text-kworange bg-white drop-shadow-md hover:text-kworange-100 hover:bg-white hover:cursor-default;
}

.kiwix-mobile-filter-btn {
@apply mr-0 last:mr-0 cursor-pointer box-border px-[2em] py-0 text-[0.9em] leading-[1.1em] h-[2em] rounded-2xl min-w-[3em] md:min-w-[6em] relative z-40 pr-[1.8em] drop-shadow-none kiwix-mobile-btn mb-1 me-1;
}
.kiwix-mobile-filter-btn-active {
@apply border-white text-kworange-100 bg-white drop-shadow-md hover:text-kworange-100 hover:bg-white hover:cursor-default;
}

.kiwix-download-filter-label {
@apply text-white;
}
Expand Down Expand Up @@ -162,6 +176,10 @@ select {
.hide-after-2:nth-child(3), .hide-after-2:nth-child(4) {
@apply hidden;
}

.mobile-filters-shadow {
filter: drop-shadow(-0.5em 0 0.6em #6f8291);
}
}

body {
Expand Down
78 changes: 75 additions & 3 deletions assets/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,13 @@ const Filtering = class {
this.only_category = only_category || this.only_category;
}

reset() {
this.order_by = 'name';
this.order_dir = '';
this.only_lang = '';
this.only_category = '';
}

toString() {
return `order_by=${this.order_by}, order_dir=${this.order_dir}, only_lang=${this.only_lang}, only_category=${this.only_category}`
}
Expand Down Expand Up @@ -191,12 +198,13 @@ function run() {
return;
const btns = document.getElementsByClassName('kiwix-sort-btn');
for (var i=0; i<btns.length; i++) {
const is_mobile = btns[i].className.indexOf('kiwix-mobile-') >= 0;
if (btns[i] == el) {
addClass(btns[i], 'kiwix-sort-btn-active');
addClass(btns[i], `kiwix-${page}-btn-active`);
addClass(btns[i], is_mobile ? `kiwix-mobile-btn-active` : `kiwix-${page}-btn-active`);
} else {
removeClass(btns[i], 'kiwix-sort-btn-active');
removeClass(btns[i], `kiwix-${page}-btn-active`);
removeClass(btns[i], is_mobile ? `kiwix-mobile-btn-active` : `kiwix-${page}-btn-active`);
}
}
filter.order_by = el.value;
Expand All @@ -207,7 +215,8 @@ function run() {
return;
const btns = document.getElementsByClassName('kiwix-order-dir-btn');
for (var i=0; i<btns.length; i++) {
toggleClass(btns[i], `kiwix-${page}-btn-active`);
const is_mobile = btns[i].className.indexOf('kiwix-mobile-') >= 0;
toggleClass(btns[i], is_mobile ? `kiwix-mobile-btn-active` : `kiwix-${page}-btn-active`);
}
filter.order_dir = el.value;
filter.render(true);
Expand All @@ -223,6 +232,61 @@ function run() {
window.location.assign("/download");
}

function onOpenMobileFiltersButtonClick(el, ev) {
// open filters on mobile
removeClass(document.getElementById("mobile-filters"), "hidden");
}

function onCloseMobileFiltersButtonClick(el, ev) {
// close filters on mobile
addClass(document.getElementById("mobile-filters"), "hidden");
}

function toggleMobileLanguageFilterButtonClick(el, ev) {
const was_active = (filter.only_lang == el.value);
const className = 'kiwix-mobile-filter-btn-active';
const btns = document.querySelectorAll('#mobile-filters .lang-filter-btn');
for (var i=0; i<btns.length; i++) {
removeClass(btns[i], className);
}
if (!was_active) // only set active if was not set
addClass(el, className);
filter.only_lang = was_active ? '' : el.value; // remove filter if was active
filter.render();
}

function toggleMobileCategoryFilterButtonClick(el, ev) {
const was_active = (filter.only_category == el.value);
const className = 'kiwix-mobile-filter-btn-active';
const btns = document.querySelectorAll('#mobile-filters .category-filter-btn');
for (var i=0; i<btns.length; i++) {
removeClass(btns[i], className);
}
if (!was_active) // only set active if was not set
addClass(el, className);
filter.only_category = was_active ? '' : el.value; // remove filter if was active
filter.render();
}

function resetMobileFiltersButtonClick(el, ev) {
classNames = ['kiwix-sort-btn-active', 'kiwix-mobile-filter-btn-active', 'kiwix-order-dir-btn-active', 'kiwix-mobile-btn-active'];
classNames.forEach(function (className) {
const btns = document.querySelectorAll(`#mobile-filters .${className}`);
for (var i=0; i<btns.length; i++) {
removeClass(btns[i], className);
}
});
document.querySelectorAll('#sort-by-name').forEach(function (el) {
addClass(el, 'kiwix-sort-btn-active');
addClass(el, 'kiwix-mobile-btn-active');
});
document.querySelectorAll('#order-desc').forEach(function (el) {
addClass(el, 'kiwix-mobile-btn-active');
});
filter.reset();
filter.render();
}

live('#sort-by-name', 'click', onSortByButtonClick);
live('#sort-by-natural', 'click', onSortByButtonClick);
live('#sort-by-size', 'click', onSortByButtonClick);
Expand All @@ -232,6 +296,14 @@ function run() {
live('#close-download-drawer', 'click', onCloseDownloadDrawerButtonClick);
live('#open-download-drawer', 'click', onOpenDownloadDrawerButtonClick);

live('#close-mobile-filters', 'click', onCloseMobileFiltersButtonClick);
live('#open-mobile-filters', 'click', onOpenMobileFiltersButtonClick);

live('#mobile-filters .lang-filter-btn', 'click', toggleMobileLanguageFilterButtonClick)
live('#mobile-filters .category-filter-btn', 'click', toggleMobileCategoryFilterButtonClick)

live('#reset-filters', 'click', resetMobileFiltersButtonClick)

filter.render(true);
}

Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = {
extend: {
screens: {
'xxs': {'min': '376px', 'max': '439px'},
'xs': {'min': '450px', 'max': '639px'},
'xs': {'min': '440px', 'max': '639px'},
},
colors: {
kwwhite: '#eef2f6',
Expand Down
100 changes: 96 additions & 4 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@
class="object-scale-down w-[11rem] h-[6rem] object-left" />
</a>
</div>
<div class="
cursor-pointer
text-kwtextgrey
md:hidden">
<div
id="open-mobile-filters"
class="
cursor-pointer
text-kwtextgrey
md:hidden
">
<i title="Open filters" class="fa-solid fa-bars fa-2xl"></i>
</div>
<div class="hidden md:flex flex-none font-normal">
Expand Down Expand Up @@ -286,6 +289,95 @@
</div>
{% endif %}

<div
id="mobile-filters"
class="
hidden
bg-kwfiltersgrey
w-[19rem]
xxs:w-[19rem]
xs:w-[23rem]
sm:w-[30rem]
md:hidden
h-[100%]
fixed
top-0
right-0
items-center
align-left
mobile-filters-shadow
p-[1em]
text-kwtextgrey
overflow-y-scroll
"
>

<div class="
m-[2em]
text-right
cursor-pointer
"
id="close-mobile-filters"
title="Close filters">
<i class="fa fa-xmark fa-2xl"></i>
</div>

<div class="
grid-cols-1
">
<h3 class="text-[1.2em] font-semibold mb-1">Sort by</h3>
<div class="text-center text-[1.5em]">
<button
id="sort-by-name"
value="name"
class="kiwix-mobile-btn kiwix-mobile-btn-active kiwix-sort-btn kiwix-sort-btn-active rounded-[1.5em]"
>Title</button>
<button
id="sort-by-size"
value="size"
class="kiwix-mobile-btn kiwix-sort-btn ml-[-1.8em] rounded-[1.5em]"
>Size</button>
</div>
<h3 class="text-[1.2em] font-semibold mt-[2em]">Order</h3>
<div class="text-center text-[1.5em]">
<button
id="order-desc"
value="desc"
class="kiwix-mobile-btn kiwix-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"
value="asc"
class="kiwix-mobile-btn kiwix-order-dir-btn rounded-[1.5em] w-[5em]"
><i title="Ascending order" class="fa-solid fa-arrow-up"></i></button>
</div>

<h3 class="text-[1.2em] font-semibold mt-[2em]">Languages</h3>
<div>
{% for code, name in languages.items() %}<button value="{{ code }}" class="lang-filter-btn kiwix-mobile-filter-btn">{{ name }}</option>{% endfor %}
</div>
<h3 class="text-[1.2em] font-semibold mt-[2em]">Categories</h3>
<div>
{% for category in categories %}<button value="{{ category }}" class="category-filter-btn kiwix-mobile-filter-btn">{{ category }}</option>{% endfor %}
</div>

<hr class="mt-[2em] mb-[2em] border-kwtagbggrey border-t-1" />

<div class="text-center text-[1.5em]">
<button
id="reset-filters"
class="kiwix-mobile-btn rounded-[1.5em] w-[5em]"
><i title="Reset filters" class="fa-solid fa-trash-can"></i> Reset</button>
</div>
</div>

<script type="text/javascript" src="/assets/dashboard.js">
</script>
</body>
Expand Down

0 comments on commit bd38b9e

Please sign in to comment.