Added results button to compact filters.
This commit is contained in:
parent
b835d8eddf
commit
ffcb77ab45
|
|
@ -10,6 +10,7 @@
|
|||
v-if="actor.avatar"
|
||||
:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
|
||||
loading="lazy"
|
||||
class="avatar"
|
||||
>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<RangeFilter
|
||||
label="bra size"
|
||||
:min="0"
|
||||
:max="braSizes.length - 1"
|
||||
:max="cups.length - 1"
|
||||
:value="filters.braSize"
|
||||
:values="braSizes"
|
||||
:values="cups"
|
||||
:disabled="!filters.braSizeRequired"
|
||||
@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
|
||||
@input="(range) => emit('update', 'braSize', range, false)"
|
||||
|
|
@ -44,17 +44,31 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
// cup range should probably not be used, because it becomes impossible to filter for larger values than the current results
|
||||
cupRange: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
function cupRangeToCups(cupA, cupB) {
|
||||
const smallestCode = cupA.charCodeAt(0);
|
||||
const biggestCode = cupB.charCodeAt(0);
|
||||
|
||||
return Array.from({ length: biggestCode - smallestCode + 1 }, (value, index) => String.fromCharCode(smallestCode + index));
|
||||
}
|
||||
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
const braSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
const naturalBoobsValues = [true, undefined, false];
|
||||
const cups = computed(() => (props.cupRange ? cupRangeToCups(props.cupRange[0], props.cupRange[1]) : 'ABCDEFGHIJKZ'.split(''))); // add Z to allow for 'bigger than K' without wasting fidelity
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,93 @@
|
|||
<template>
|
||||
<div
|
||||
class="filters-container"
|
||||
:class="{ 'compact-hide': !showFilters }"
|
||||
@click="toggleFilters(false)"
|
||||
>
|
||||
<form
|
||||
<div class="filters-frame">
|
||||
<div
|
||||
v-show="showFilters"
|
||||
class="filters"
|
||||
@submit.prevent
|
||||
@click.stop
|
||||
class="filters-container"
|
||||
:class="{ show: showFiltersCompact }"
|
||||
@click="toggleFilters(false)"
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
<div class="filters-sidebar">
|
||||
<form
|
||||
class="filters"
|
||||
@submit.prevent
|
||||
@click.stop
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
|
||||
<button
|
||||
v-if="typeof results === 'number'"
|
||||
class="button results"
|
||||
>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="filters-toggle close"
|
||||
:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
|
||||
@click.stop="toggleFilters(false)"
|
||||
>
|
||||
<Icon
|
||||
icon="arrow-left3"
|
||||
class="arrow"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="cross"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="filters-toggle open"
|
||||
:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
|
||||
@click.stop="toggleFilters(true)"
|
||||
><Icon icon="filter" /></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
results: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// desktop defaults to open, compact defaults to closed
|
||||
// we can't measure viewframe in SSR, so use separate toggles
|
||||
const showFilters = ref(true);
|
||||
const showFiltersCompact = ref(false);
|
||||
|
||||
function toggleFilters(state) {
|
||||
showFilters.value = state ?? !showFilters.value;
|
||||
showFiltersCompact.value = state ?? !showFiltersCompact.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filters-container {
|
||||
.filters-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.filters-sidebar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filters {
|
||||
width: 17rem;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 0;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
|
@ -45,22 +100,30 @@ function toggleFilters(state) {
|
|||
.filters-toggle {
|
||||
min-width: 1.5rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 .25rem;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: -2rem;
|
||||
border-radius: 0 .5rem .5rem 0;
|
||||
background: var(--background);
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
box-shadow: inset 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&.show {
|
||||
padding: 0 .5rem 0 1.25rem;
|
||||
&.open {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
&.show-full {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.close .cross {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -76,8 +139,17 @@ function toggleFilters(state) {
|
|||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filters-container {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
|
@ -85,15 +157,46 @@ function toggleFilters(state) {
|
|||
left: 0;
|
||||
z-index: 1000;
|
||||
background: var(--background-dim);
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.filters-toggle {
|
||||
&.show-full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show-compact {
|
||||
display: flex;
|
||||
|
||||
&.close {
|
||||
background: var(--grey-light-40);
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.close .cross {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.close .arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<Filters>
|
||||
<Filters :results="total">
|
||||
<div class="filter">
|
||||
<input
|
||||
v-model="q"
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
<BoobsFilter
|
||||
:filters="filters"
|
||||
:cup-range="cupRange"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
|
|
@ -48,29 +49,6 @@
|
|||
|
||||
<div class="actors-container">
|
||||
<div class="actors-header">
|
||||
<!--
|
||||
<div
|
||||
v-show="showFilters"
|
||||
class="filters-toggle hide"
|
||||
@click.stop="toggleFilters(hide)"
|
||||
>
|
||||
<Icon
|
||||
icon="arrow-left3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="!showFilters"
|
||||
class="filters-toggle show"
|
||||
@click.stop="toggleFilters(true)"
|
||||
>
|
||||
Filters
|
||||
<Icon
|
||||
icon="arrow-right3"
|
||||
/>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="meta">
|
||||
<span class="count">{{ total }} results</span>
|
||||
|
||||
|
|
@ -131,14 +109,7 @@ const { pageProps, urlParsed, routeParams } = pageContext;
|
|||
const q = ref(urlParsed.search.q);
|
||||
const actors = ref([]);
|
||||
const countries = ref(pageProps.countries);
|
||||
|
||||
const showFilters = ref(false);
|
||||
|
||||
if (pageContext.isHydration) { // hide sidebar on mobile, we can only run this client-side
|
||||
if (window.matchMedia('(max-width: 1200px)')?.matches) {
|
||||
showFilters.value = false;
|
||||
}
|
||||
}
|
||||
const cupRange = ref(pageProps.cupRange);
|
||||
|
||||
actors.value = pageProps.actors;
|
||||
|
||||
|
|
@ -204,20 +175,12 @@ function paginate({ page }) {
|
|||
}
|
||||
|
||||
function updateFilter(prop, value, reload = true) {
|
||||
console.log('update!', prop, value);
|
||||
|
||||
filters.value[prop] = value;
|
||||
|
||||
if (reload) {
|
||||
search();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
function toggleFilters(state) {
|
||||
showFilters.value = state ?? !showFilters.value;
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -258,7 +221,7 @@ function toggleFilters(state) {
|
|||
.actors-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0 .75rem 0;
|
||||
padding: .5rem 0 .25rem 2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
|
|
@ -266,7 +229,6 @@ function toggleFilters(state) {
|
|||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.actors-container {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export async function onBeforeRender(pageContext) {
|
|||
const {
|
||||
actors,
|
||||
countries,
|
||||
cupRange,
|
||||
limit,
|
||||
total,
|
||||
} = await fetchActors(curateActorsQuery(pageContext.urlQuery), {
|
||||
|
|
@ -19,6 +20,7 @@ export async function onBeforeRender(pageContext) {
|
|||
pageProps: {
|
||||
actors,
|
||||
countries,
|
||||
cupRange,
|
||||
limit,
|
||||
total,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue