DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added search icon to filter search inputs.

This commit is contained in:
DebaucheryLibrarian 2025-08-27 05:13:07 +02:00
parent 63ee4cae31
commit bd9a794e34
5 changed files with 68 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/filters/actors.vue
View File

@ -6,12 +6,16 @@
>Some actors may not be listed, apply a filter or search to narrow down results.</div> >Some actors may not be listed, apply a filter or search to narrow down results.</div>
<div class="filters-sort"> <div class="filters-sort">
<input <label class="filter-search">
v-model="search" <input
type="search" v-model="search"
:placeholder="`Filter ${availableActors.length} actors`" type="search"
class="input input-inline filters-search" :placeholder="`Filter ${availableActors.length} actors`"
> class="input input-inline filters-search"
>
<Icon icon="search" />
</label>
<div <div
class="filter-sort noselect" class="filter-sort noselect"

16
components/filters/channels.vue
View File

@ -1,12 +1,16 @@
<template> <template>
<div class="filter channels-container"> <div class="filter channels-container">
<div class="filters-sort"> <div class="filters-sort">
<input <label class="filter-search">
v-model="search" <input
type="search" v-model="search"
:placeholder="`Filter ${channels.length} channels`" type="search"
class="input input-inline filters-search" :placeholder="`Filter ${channels.length} channels`"
> class="input input-inline filters-search"
>
<Icon icon="search" />
</label>
<div <div
v-show="order === 'name'" v-show="order === 'name'"

28
components/filters/country.vue
View File

@ -2,13 +2,19 @@
<div <div
class="countries-container" class="countries-container"
> >
<input <label
v-if="!filters.country" v-if="!filters.country"
v-model="countryQuery" class="filter-search"
type="search"
placeholder="Filter countries"
class="input input-inline countries-search"
> >
<input
v-model="countryQuery"
type="search"
placeholder="Filter countries"
class="input input-inline countries-search filters-search"
>
<Icon icon="search" />
</label>
<div <div
v-if="filteredCountries.length > 0" v-if="filteredCountries.length > 0"
@ -28,7 +34,10 @@
/> />
</div> </div>
<div class="empty"> <div
v-else
class="empty"
>
No matching countries No matching countries
</div> </div>
</div> </div>
@ -66,13 +75,12 @@ const filteredCountries = computed(() => allCountries.value.filter((country) =>
<style scoped> <style scoped>
.countries-container { .countries-container {
border-bottom: solid 1px var(--shadow-weak-30); border-bottom: solid 1px var(--shadow-weak-30);
padding: .25rem 0; padding-bottom: .25rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.countries-search { .filter-search {
width: 100%;
margin-bottom: .25rem;
border-bottom: solid 1px var(--shadow-weak-40); border-bottom: solid 1px var(--shadow-weak-40);
} }

21
components/filters/filters.vue
View File

@ -272,7 +272,6 @@ function toggleFilters(state) {
&.order { &.order {
padding: 0 .5rem 0 .25rem; padding: 0 .5rem 0 .25rem;
} }
.icon { .icon {
fill: var(--glass); fill: var(--glass);
} }
@ -286,6 +285,26 @@ function toggleFilters(state) {
} }
} }
.filter-search {
display: flex;
flex-direction: row-reverse;
cursor: pointer;
.icon {
padding: .5rem .25rem .5rem .75rem;
fill: var(--glass-weak-20);
&:hover {
cursor: pointer;
fill: var(--primary);
}
}
.input:focus + .icon {
fill: var(--primary);
}
}
.filter-details { .filter-details {
display: flex; display: flex;
align-items: stretch; align-items: stretch;

16
components/filters/tags.vue
View File

@ -1,12 +1,16 @@
<template> <template>
<div class="filter tags-container"> <div class="filter tags-container">
<div class="filters-sort"> <div class="filters-sort">
<input <label class="filter-search">
v-model="search" <input
type="search" v-model="search"
:placeholder="`Filter ${groupedTags.available.length} tags`" type="search"
class="input input-inline filters-search" :placeholder="`Filter ${groupedTags.available.length} tags`"
> class="input input-inline filters-search"
>
<Icon icon="search" />
</label>
<div <div
v-show="order === 'priority'" v-show="order === 'priority'"