Skip to content

Add Search feature to Browse and Download Pages #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
44yu5h wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Search feature to Browse and Download Pages #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions assets/dashboard-tailwind-src.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,6 @@ select {
border-color: transparent;
--tw-bg-opacity: 1;
background-color: oklch(1 0 0);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}

[dir="rtl"] .select {
Expand All @@ -61,6 +57,12 @@ select {
calc(0% + 16px) calc(1px + 50%);
}

.dropdown {
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}

.max-w-xs {
max-width: 20rem;
Expand Down
14 changes: 14 additions & 0 deletions assets/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const Filtering = class {
order_dir = 'desc';
only_lang = '';
only_category = '';
only_search = '';
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename to only_pattern which is more clear


constructor(order_by, order_dir, only_lang, only_category) {
this.order_by = order_by || this.order_by;
Expand All @@ -86,6 +87,7 @@ const Filtering = class {
this.order_dir = 'desc';
this.only_lang = '';
this.only_category = '';
this.only_search = '';
}

toString() {
Expand Down Expand Up @@ -146,6 +148,13 @@ const Filtering = class {
visible = false;
if (visible && this.only_category && this.only_category != category)
visible = false;
if (visible && this.only_search.trim() !== '') {
const nameAttr = elems[i].getAttribute('data-name').toLowerCase();
const descAttr = elems[i].getAttribute('data-desc') ? elems[i].getAttribute('data-desc').toLowerCase() : '';
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you retrieve the description from the DOM below instead? This would force duplicating the descriptions

if (!nameAttr.includes(this.only_search.toLowerCase()) && !descAttr.includes(this.only_search.toLowerCase())) {
visible = false;
}
}

if (visible)
removeClass(elems[i], 'hidden');
Expand Down Expand Up @@ -334,6 +343,11 @@ function run() {

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

live('#search-bar', 'input', function(el, ev) {
filter.only_search = el.value;
filter.render(true);
});

filter.render(true);
}

Expand Down
16 changes: 14 additions & 2 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@
>Languages</label>
<select
id="languages-list"
class="select select-bordered select-sm max-w-[10rem]"
class="select select-bordered select-sm dropdown max-w-[10rem]"
>
<option value="">All</option>
{% for code, name in languages.items() %}<option value="{{ code }}">{{ name }}</option>{% endfor %}
Expand All @@ -262,12 +262,24 @@
>Categories</label>
<select
id="categories-list"
class="select select-bordered select-sm max-w-xs dm-sans"
class="select select-bordered select-sm dropdown max-w-xs dm-sans"
>
<option value="">All</option>
{% for category in categories %}<option value="{{ category }}">{{ category }}</option>{% endfor %}
</select>
</div>
<div class="text-start ml-[2em] xl:ml-[4em]">
<label
for="search-bar"
class="hidden lg:inline-block kiwix-{{page }}-filter-label text-[0.9em] me-[1em] dm-sans"
>Search</label>
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Find as label seems more appropriate (albeit not perfect). Search word sort of implies it will look at content while this is just a free-text filter on title/desc.
@siemsie any suggestion on the label ?

<input
id="search-bar"
type="text"
placeholder="Search..."
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
placeholder="Search..."
placeholder="Filter on titles and descriptions…"

class="select select-bordered select-sm max-w-xs dm-sans h-[2.25rem]"
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot have dm-sans here as this is free text and users can input any char while dmsans is latin only.

/>
</div>
{% endif %}
</nav>
</div>
Expand Down
4 changes: 3 additions & 1 deletion templates/download.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@
data-category="{{ package.category }}"
data-langs="{% if package.langs %}{% for lang in package.langs %}{{ lang.alpha_3 }} {% endfor %}{% endif %}"
data-name="{{ package.title }}"
data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}">
data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}"
data-desc="{{ package.description|default('')|escape }}"
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above

>

<div
data-tip="{{ package.title }}"
Expand Down
1 change: 1 addition & 0 deletions templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
data-langs="{% if package.langs %}{% for lang in package.langs %}{{ lang.alpha_3 }} {% endfor %}{% endif %}"
data-name="{{ package.title }}"
data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}"
data-desc="{{ package.description|default('')|escape }}"
Copy link
Member

@rgaudin rgaudin Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above

>
<div class="
flex
Expand Down