@@ -121,9 +124,9 @@ const { pageProps } = inject('pageContext');
const { actor: pageActor } = pageProps;
const groupedActors = computed(() => ({
- selected: props.filters.actors.map((actorId) => props.actors.find((actor) => actor.id === actorId)).filter(Boolean),
+ selected: props.filters.actors.map((filterActor) => props.actors.find((actor) => actor.id === filterActor.id)).filter(Boolean),
available: props.actors
- .filter((actor) => !props.filters.actors.includes(actor.id)
+ .filter((actor) => !props.filters.actors.some((filterActor) => filterActor.id === actor.id)
&& actor.id !== pageActor?.id
&& searchRegexp.value.test(actor.name)
&& (!selectedGender.value || actor.gender === selectedGender.value))
@@ -139,12 +142,12 @@ const groupedActors = computed(() => ({
const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
function toggleActor(actor) {
- if (props.filters.actors.includes(actor.id)) {
- emit('update', 'actors', props.filters.actors.filter((actorId) => actorId !== actor.id));
+ if (props.filters.actors.some((filterActor) => filterActor.id === actor.id)) {
+ emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id));
return;
}
- emit('update', 'actors', props.filters.actors.concat(actor.id));
+ emit('update', 'actors', props.filters.actors.concat(actor));
}
function selectGender() {
@@ -160,12 +163,6 @@ function selectGender() {
diff --git a/components/filters/filters.vue b/components/filters/filters.vue
index 9e0b4b4..ae7bd0c 100644
--- a/components/filters/filters.vue
+++ b/components/filters/filters.vue
@@ -186,11 +186,17 @@ function toggleFilters(state) {
justify-content: space-between;
align-items: center;
flex-grow: 1;
- padding: .25rem .75rem .25rem 1rem;
+ padding: .25rem 0 .25rem .25rem;
color: var(--text);
text-decoration: none;
}
+.filter-text {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.filter-include {
display: flex;
align-items: center;
@@ -222,13 +228,13 @@ function toggleFilters(state) {
align-items: center;
align-self: stretch;
justify-content: center;
- padding: 0 .5rem;
+ padding: 0 .25rem;
cursor: pointer;
font-weight: bold;
color: var(--shadow);
&.order {
- padding: 0 1rem 0 .25rem;
+ padding: 0 .5rem 0 .25rem;
}
.icon {
diff --git a/components/filters/range.vue b/components/filters/range.vue
index 1699a9e..1d5e996 100755
--- a/components/filters/range.vue
+++ b/components/filters/range.vue
@@ -75,6 +75,3 @@ defineProps({
const emit = defineEmits(['change', 'input', 'enable']);
-
-
diff --git a/components/filters/tags.vue b/components/filters/tags.vue
index 7525862..907a51f 100644
--- a/components/filters/tags.vue
+++ b/components/filters/tags.vue
@@ -67,13 +67,18 @@
/>
- {{ tag.name }}
-
-
+
{{ tag.count }}
+ class="filter-text"
+ :title="tag.name"
+ >{{ tag.name }}
+
+
+ {{ tag.count }}
+
@@ -170,7 +175,7 @@ function toggleTag(tag) {