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",
|
"VAAPI",
|
||||||
"wmfcdm",
|
"wmfcdm",
|
||||||
"XPCOM",
|
"XPCOM",
|
||||||
|
"xmark",
|
||||||
"zsync"
|
"zsync"
|
||||||
],
|
],
|
||||||
"flagWords": [],
|
"flagWords": [],
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
import { icon, library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
|
import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import Xmark from '~/icons/XmarkIcon.astro'
|
||||||
import { type ZenTheme } from '~/mods'
|
import { type ZenTheme } from '~/mods'
|
||||||
import { getPath, type Locale } from '~/utils/i18n'
|
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 id="mods-list-container" class="flex flex-1 flex-col">
|
||||||
<div class="flex flex-col items-center gap-4">
|
<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
|
<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"
|
id="search"
|
||||||
placeholder={translations.search}
|
placeholder={translations.search}
|
||||||
type="text"
|
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>
|
||||||
|
|
||||||
<div class="mb-1 flex w-full items-center justify-between gap-4 sm:mb-2">
|
<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>
|
</button>
|
||||||
</div>
|
</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">
|
<label class="text-md font-semibold" for="limit">
|
||||||
{translations.sort.perPage}
|
{translations.sort.perPage}
|
||||||
</label>
|
</label>
|
||||||
|
@ -191,6 +203,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
||||||
const modsGrid = document.getElementById('mods-grid')
|
const modsGrid = document.getElementById('mods-grid')
|
||||||
const noResults = document.getElementById('no-results')
|
const noResults = document.getElementById('no-results')
|
||||||
const pagination = document.getElementById('pagination')
|
const pagination = document.getElementById('pagination')
|
||||||
|
const clearSearchButton = document.getElementById('clear-search')
|
||||||
|
|
||||||
// Sort icon elements
|
// Sort icon elements
|
||||||
const createdSortDefault = document.getElementById('created-sort-default')
|
const createdSortDefault = document.getElementById('created-sort-default')
|
||||||
|
@ -218,6 +231,8 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
|
||||||
updatedAsc: updatedSortAsc instanceof HTMLSpanElement ? updatedSortAsc : null,
|
updatedAsc: updatedSortAsc instanceof HTMLSpanElement ? updatedSortAsc : null,
|
||||||
updatedDesc: updatedSortDesc instanceof HTMLSpanElement ? updatedSortDesc : 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
|
}, 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
|
// 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