diff --git a/assets/img/icons/arrow-up4.svg b/assets/img/icons/arrow-up4.svg new file mode 100644 index 0000000..99cca94 --- /dev/null +++ b/assets/img/icons/arrow-up4.svg @@ -0,0 +1,5 @@ + + +arrow-up4 + + diff --git a/assets/img/icons/enter5.svg b/assets/img/icons/enter5.svg new file mode 100644 index 0000000..fe8209b --- /dev/null +++ b/assets/img/icons/enter5.svg @@ -0,0 +1,5 @@ + + +enter5 + + diff --git a/assets/img/icons/opt.svg b/assets/img/icons/opt.svg new file mode 100644 index 0000000..1f348ec --- /dev/null +++ b/assets/img/icons/opt.svg @@ -0,0 +1,6 @@ + + +opt + + + diff --git a/components/filters/actors.vue b/components/filters/actors.vue index 8f71537..5d765f4 100644 --- a/components/filters/actors.vue +++ b/components/filters/actors.vue @@ -54,8 +54,8 @@ v-for="(actor, index) in group" :key="`filter-actor-${actor.id}`" class="filter-item" - :class="{ selected: filters.actors.includes(actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }" - @click="emit('update', 'actors', [actor.id])" + :class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }" + @click="emit('update', 'actors', [actor])" >
- {{ actor.name }} + {{ actor.name }}
@@ -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) {