Moved filter sections to their own components.
This commit is contained in:
@@ -80,6 +80,7 @@ defineProps({
|
||||
}
|
||||
|
||||
.name {
|
||||
flex-shrink: 0;
|
||||
padding: .25rem .5rem;
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
89
components/filters/birthdate.vue
Normal file
89
components/filters/birthdate.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="filter">
|
||||
<div class="filter-section">
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="filters.age"
|
||||
:disabled="!filters.ageRequired"
|
||||
@enable="(checked) => emit('update', 'ageRequired', checked, filters.ageRequired !== checked)"
|
||||
@input="(range) => emit('update', 'age', range, false)"
|
||||
@change="(range) => emit('update', 'age', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="leaf" /></template>
|
||||
<template #end><Icon icon="tree3" /></template>
|
||||
</RangeFilter>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="filters.dobRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => emit('update', 'dobRequired', checked, true)"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-model="dobType"
|
||||
class="input select"
|
||||
@change="(event) => { emit('update', 'dobRequired', true, false); emit('update', 'dobType', dobType, true); }"
|
||||
>
|
||||
<option value="birthday">Birthday</option>
|
||||
<option value="dob">Date of birth</option>
|
||||
</select>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="input-container"
|
||||
@click="() => emit('update', 'dobRequired', true, true)"
|
||||
>
|
||||
<input
|
||||
:value="filters.dob"
|
||||
:disabled="!filters.dobRequired"
|
||||
:max="maxDob"
|
||||
type="date"
|
||||
class="input"
|
||||
@change="(event) => emit('update', 'dob', event.target.value, true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { format, subYears } from 'date-fns';
|
||||
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
|
||||
const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
|
||||
|
||||
const props = defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const dobType = ref(props.filters.dobType); // <select> doesn't work well with :value for some reason
|
||||
const emit = defineEmits(['update']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-grow: 1;
|
||||
color: var(--shadow-strong-10);
|
||||
|
||||
option {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
components/filters/boobs.vue
Normal file
60
components/filters/boobs.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="filter">
|
||||
<RangeFilter
|
||||
label="bra size"
|
||||
:min="0"
|
||||
:max="braSizes.length - 1"
|
||||
:value="filters.braSize"
|
||||
:values="braSizes"
|
||||
:disabled="!filters.braSizeRequired"
|
||||
@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
|
||||
@input="(range) => emit('update', 'braSize', range, false)"
|
||||
@change="(range) => emit('update', 'braSize', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="boobs-small" /></template>
|
||||
<template #end><Icon icon="boobs-big" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<span class="filter-label">Enhanced Boobs</span>
|
||||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
|
||||
class="toggle-container noclick"
|
||||
>
|
||||
<span
|
||||
class="toggle-label off"
|
||||
@click="emit('update', 'naturalBoobs', true, true)"
|
||||
><Icon icon="leaf" /></span>
|
||||
|
||||
<input
|
||||
:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
|
||||
class="toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
@change="emit('update', 'naturalBoobs', naturalBoobsValues[$event.target.value], true)"
|
||||
>
|
||||
|
||||
<span
|
||||
class="toggle-label on"
|
||||
@click="emit('update', 'naturalBoobs', false, true)"
|
||||
><Icon icon="magic-wand2" /></span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
|
||||
defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
const braSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
const naturalBoobsValues = [true, undefined, false];
|
||||
</script>
|
||||
@@ -6,7 +6,7 @@
|
||||
:title="country.name"
|
||||
:class="{ selected: selectedCountry === country.alpha2 }"
|
||||
class="country"
|
||||
@click="updateValue('country', country.alpha2, true)"
|
||||
@click="emit('country', country.alpha2)"
|
||||
>
|
||||
<img
|
||||
:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
|
||||
@@ -18,7 +18,7 @@
|
||||
<Icon
|
||||
v-if="selectedCountry === country.alpha2"
|
||||
icon="cross2"
|
||||
@click.native.stop="updateValue('country', null, true)"
|
||||
@click.native.stop="emit('country', null)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -34,11 +34,9 @@ defineProps({
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
updateValue: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['country']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
81
components/filters/country.vue
Normal file
81
components/filters/country.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="filteredCountries.length > 0"
|
||||
class="countries-container"
|
||||
>
|
||||
<input
|
||||
v-if="!filters.country"
|
||||
v-model="countryQuery"
|
||||
type="search"
|
||||
placeholder="Filter country"
|
||||
class="input input-inline countries-search"
|
||||
>
|
||||
|
||||
<div class="countries-list">
|
||||
<Countries
|
||||
v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
|
||||
:countries="topCountries"
|
||||
:selected-country="filters.country"
|
||||
@country="(alpha2) => emit('update', 'country', alpha2, true)"
|
||||
/>
|
||||
|
||||
<Countries
|
||||
:countries="filteredCountries"
|
||||
:selected-country="filters.country"
|
||||
@country="(alpha2) => emit('update', 'country', alpha2, true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
|
||||
import Countries from './countries.vue';
|
||||
|
||||
const props = defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
countries: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update']);
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps } = pageContext;
|
||||
|
||||
const allCountries = computed(() => props.countries || pageProps.countries);
|
||||
const countryQuery = ref('');
|
||||
|
||||
const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
|
||||
const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => allCountries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
|
||||
const filteredCountries = computed(() => allCountries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.countries-container {
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
padding: .25rem 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.countries-search {
|
||||
width: 100%;
|
||||
margin-bottom: .25rem;
|
||||
border-bottom: solid 1px var(--shadow-weak-40);
|
||||
}
|
||||
|
||||
.countries-list {
|
||||
max-height: 13rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:deep(.country.selected) .country-name {
|
||||
padding: .5rem;
|
||||
}
|
||||
</style>
|
||||
99
components/filters/filters.vue
Normal file
99
components/filters/filters.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div
|
||||
class="filters-container"
|
||||
:class="{ 'compact-hide': !showFilters }"
|
||||
@click="toggleFilters(false)"
|
||||
>
|
||||
<form
|
||||
v-show="showFilters"
|
||||
class="filters"
|
||||
@submit.prevent
|
||||
@click.stop
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const showFilters = ref(true);
|
||||
|
||||
function toggleFilters(state) {
|
||||
showFilters.value = state ?? !showFilters.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filters-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filters {
|
||||
width: 17rem;
|
||||
flex-shrink: 0;
|
||||
padding: .5rem 0;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-toggle {
|
||||
min-width: 1.5rem;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 .25rem;
|
||||
border-radius: 0 .25rem .25rem 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;
|
||||
|
||||
.icon {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filters-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: var(--background-dim);
|
||||
}
|
||||
|
||||
.filters {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.compact-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
components/filters/gender.vue
Normal file
113
components/filters/gender.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<ul class="filter genders nolist">
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === undefined }"
|
||||
type="button"
|
||||
class="gender-button all"
|
||||
@click="emit('update', 'gender', undefined, true)"
|
||||
>all</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'female' }"
|
||||
type="button"
|
||||
class="gender-button female"
|
||||
@click="emit('update', 'gender', 'female', true)"
|
||||
><Gender gender="female" /></button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'male' }"
|
||||
type="button"
|
||||
class="gender-button male"
|
||||
@click="emit('update', 'gender', 'male', true)"
|
||||
><Gender gender="male" /></button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'transsexual' }"
|
||||
type="button"
|
||||
class="gender-button transsexual"
|
||||
@click="emit('update', 'gender', 'transsexual', true)"
|
||||
><Gender gender="transsexual" /></button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'other' }"
|
||||
type="button"
|
||||
class="gender-button other"
|
||||
@click="emit('update', 'gender', 'other', true)"
|
||||
><Icon icon="question5" /></button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Gender from '#/components/actors/gender.vue';
|
||||
|
||||
defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.genders {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.gender-button {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
color: var(--shadow);
|
||||
background: var(--background);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: .9rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
|
||||
.male,
|
||||
.female,
|
||||
.transsexual {
|
||||
padding: .2rem 0 0 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
|
||||
&.other .icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
components/filters/physique.vue
Normal file
46
components/filters/physique.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="filter">
|
||||
<RangeFilter
|
||||
label="height"
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="filters.height"
|
||||
:disabled="!filters.heightRequired"
|
||||
unit="cm"
|
||||
@enable="(checked) => emit('update', 'heightRequired', checked, filters.heightRequired !== checked)"
|
||||
@input="(range) => emit('update', 'height', range, false)"
|
||||
@change="(range) => emit('update', 'height', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="height-short" /></template>
|
||||
<template #end><Icon icon="height" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<RangeFilter
|
||||
label="weight"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="filters.weight"
|
||||
:disabled="!filters.weightRequired"
|
||||
unit="kg"
|
||||
@enable="(checked) => emit('update', 'weightRequired', checked, filters.weightRequired !== checked)"
|
||||
@input="(range) => emit('update', 'weight', range, false)"
|
||||
@change="(range) => emit('update', 'weight', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="meter-slow" /></template>
|
||||
<template #end><Icon icon="meter-fast" /></template>
|
||||
</RangeFilter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
|
||||
defineProps({
|
||||
filters: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update']);
|
||||
</script>
|
||||
@@ -58,6 +58,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1000; /* make sure shadow shows up above content */
|
||||
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||
}
|
||||
|
||||
|
||||
@@ -138,9 +138,7 @@ const nextPages = computed(() => Array.from({ length: 4 }, (value, index) => {
|
||||
function go(page, event) {
|
||||
if (!props.redirect) {
|
||||
event.preventDefault();
|
||||
|
||||
history.pushState({}, '', event.target.href); // eslint-disable-line no-restricted-globals
|
||||
currentPage.value = page;
|
||||
}
|
||||
|
||||
emit('navigation', {
|
||||
|
||||
Reference in New Issue
Block a user