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

Fixed filter selection disappearing if available list is empty.

This commit is contained in:
DebaucheryLibrarian 2024-03-19 02:35:37 +01:00
parent acf4e27f2c
commit d9411544d3
5 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/filters/actors.vue
View File

@ -9,7 +9,7 @@
<input <input
v-model="search" v-model="search"
type="search" type="search"
:placeholder="`Filter ${actors.length} actors`" :placeholder="`Filter ${availableActors.length} actors`"
class="input input-inline filters-search" class="input input-inline filters-search"
> >
@ -51,7 +51,7 @@
</div> </div>
<div <div
v-if="availableActors.length === 0" v-if="availableActors.length === 0 && selectedActors.length === 0"
class="filter-empty" class="filter-empty"
>No actors</div> >No actors</div>

2
components/filters/channels.vue
View File

@ -26,7 +26,7 @@
</div> </div>
<div <div
v-if="entities.length === 0" v-if="entities.length === 0 && !filters.entity"
class="filter-empty" class="filter-empty"
>No channels</div> >No channels</div>

21
components/filters/filters.vue
View File

@ -9,6 +9,7 @@
<div class="filters-sidebar"> <div class="filters-sidebar">
<form <form
class="filters" class="filters"
:class="{ loading }"
@submit.prevent @submit.prevent
@click.stop @click.stop
> >
@ -54,6 +55,10 @@ defineProps({
type: Number, type: Number,
default: null, default: null,
}, },
loading: {
type: Boolean,
default: false,
},
}); });
// desktop defaults to open, compact defaults to closed // desktop defaults to open, compact defaults to closed
@ -315,6 +320,7 @@ function toggleFilters(state) {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--background);
} }
.filters { .filters {
@ -332,15 +338,15 @@ function toggleFilters(state) {
} }
.filters-toggle { .filters-toggle {
min-width: 1.5rem; min-width: 2rem;
height: 2rem; height: 2.5rem;
display: none; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 .25rem; padding: 0 .25rem;
position: absolute; position: absolute;
top: .5rem; top: .35rem;
right: -2rem; right: -2.5rem;
border-radius: 0 .5rem .5rem 0; border-radius: 0 .5rem .5rem 0;
background: var(--background); background: var(--background);
color: var(--shadow); color: var(--shadow);
@ -381,6 +387,11 @@ function toggleFilters(state) {
border-radius: 0; border-radius: 0;
} }
.loading {
opacity: .3;
pointer-events: none;
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.filters-container { .filters-container {
display: none; display: none;
@ -389,7 +400,7 @@ function toggleFilters(state) {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 500;
background: var(--background-dim); background: var(--background-dim);
&.show { &.show {

4
components/filters/tags.vue
View File

@ -4,7 +4,7 @@
<input <input
v-model="search" v-model="search"
type="search" type="search"
:placeholder="`Filter ${tags.length} tags`" :placeholder="`Filter ${groupedTags.available.length} tags`"
class="input input-inline filters-search" class="input input-inline filters-search"
> >
@ -40,7 +40,7 @@
</div> </div>
<div <div
v-if="groupedTags.available.length === 0" v-if="groupedTags.available.length === 0 && groupedTags.selected.length === 0"
class="filter-empty" class="filter-empty"
>No tags</div> >No tags</div>

4
components/scenes/scenes.vue
View File

@ -5,7 +5,7 @@
<transition name="sidebar"> <transition name="sidebar">
<Filters <Filters
v-if="showFilters" v-if="showFilters"
:class="{ loading }" :loading="loading"
> >
<div class="filter"> <div class="filter">
<input <input
@ -324,7 +324,7 @@ function updateFilter(prop, value, reload = true) {
} }
} }
.loading:not(.ellipsis) { .scenes-container.loading:not(.ellipsis) {
opacity: .3; opacity: .3;
pointer-events: none; pointer-events: none;
} }