mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Merge pull request #653 from hassaancode/improvement
This commit is contained in:
commit
80492b32fe
3 changed files with 51 additions and 3 deletions
|
@ -64,6 +64,7 @@
|
|||
"VAAPI",
|
||||
"wmfcdm",
|
||||
"XPCOM",
|
||||
"xmark",
|
||||
"zsync"
|
||||
],
|
||||
"flagWords": [],
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
|
||||
import Xmark from '~/icons/XmarkIcon.astro'
|
||||
import { type ZenTheme } from '~/mods'
|
||||
import { getPath, type Locale } from '~/utils/i18n'
|
||||
|
||||
|
@ -31,13 +32,24 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
|||
|
||||
<div id="mods-list-container" class="flex flex-1 flex-col">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="flex w-full flex-col items-center justify-center gap-6">
|
||||
<div
|
||||
class="flex w-full flex-row items-center justify-center rounded-full border-2 border-dark pr-6"
|
||||
>
|
||||
<input
|
||||
class="w-full rounded-full border-2 border-dark bg-transparent px-6 py-2 text-lg outline-none"
|
||||
class="w-full rounded-full bg-transparent py-2 pl-6 pr-4 text-lg outline-none"
|
||||
id="search"
|
||||
placeholder={translations.search}
|
||||
type="text"
|
||||
/>
|
||||
<button
|
||||
id="clear-search"
|
||||
title="Clear search"
|
||||
class="hidden rounded-full p-1 transition-colors duration-150 hover:bg-subtle"
|
||||
aria-label="Clear search"
|
||||
tabindex="0"
|
||||
>
|
||||
<Xmark />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-1 flex w-full items-center justify-between gap-4 sm:mb-2">
|
||||
|
@ -68,7 +80,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hidden items-center gap-2 px-4 py-2 sm:flex">
|
||||
<div class="hidden items-center gap-2 px-4 py-1 sm:flex">
|
||||
<label class="text-md font-semibold" for="limit">
|
||||
{translations.sort.perPage}
|
||||
</label>
|
||||
|
@ -191,6 +203,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
|||
const modsGrid = document.getElementById('mods-grid')
|
||||
const noResults = document.getElementById('no-results')
|
||||
const pagination = document.getElementById('pagination')
|
||||
const clearSearchButton = document.getElementById('clear-search')
|
||||
|
||||
// Sort icon elements
|
||||
const createdSortDefault = document.getElementById('created-sort-default')
|
||||
|
@ -218,6 +231,8 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
|||
updatedAsc: updatedSortAsc instanceof HTMLSpanElement ? updatedSortAsc : null,
|
||||
updatedDesc: updatedSortDesc instanceof HTMLSpanElement ? updatedSortDesc : null,
|
||||
},
|
||||
clearSearchButton:
|
||||
clearSearchButton instanceof HTMLButtonElement ? clearSearchButton : null,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -282,6 +297,21 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
|||
}
|
||||
}, 300) // 300ms debounce
|
||||
})
|
||||
if (this.elements.clearSearchButton) {
|
||||
this.elements.searchInput.addEventListener('input', () => {
|
||||
if (this.elements.searchInput.value.trim() === '') {
|
||||
this.elements.clearSearchButton.classList.add('hidden')
|
||||
} else {
|
||||
this.elements.clearSearchButton.classList.remove('hidden')
|
||||
}
|
||||
})
|
||||
// Clear search
|
||||
this.elements.clearSearchButton.addEventListener('click', () => {
|
||||
this.elements.searchInput.value = ''
|
||||
this.setState({ search: '', page: 1 })
|
||||
this.elements.clearSearchButton.classList.add('hidden')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Sort buttons
|
||||
|
|
17
src/icons/XmarkIcon.astro
Normal file
17
src/icons/XmarkIcon.astro
Normal file
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
const { class: className, ...props } = Astro.props
|
||||
---
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class:list={['lucide lucide-xmark-icon lucide-xmark', className]}
|
||||
{...props}><path d="M18 6L6 18M6 6l12 12"></path></svg
|
||||
>
|
Loading…
Add table
Add a link
Reference in a new issue