Moved filter sections to their own components.
This commit is contained in:
parent
bf376e161c
commit
ce9f8b334b
|
|
@ -22,6 +22,9 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
border-radius: .25rem;
|
||||
|
|
@ -29,10 +32,18 @@
|
|||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -54,6 +65,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-inline {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--grey-dark-20);
|
||||
padding: 0 0 .5rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
fill: var(--grey-dark-20);
|
||||
padding-left: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
color: var(--primary);
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-cancel {
|
||||
background: none;
|
||||
color: var(--shadow-strong-10);
|
||||
|
|
@ -80,6 +119,7 @@
|
|||
}
|
||||
|
||||
.label-values {
|
||||
flex-shrink: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
--background-level-10: #fff;
|
||||
--background-level-20: #eee;
|
||||
--background-level-30: #eee;
|
||||
--background-dim: var(--shadow-weak-10);
|
||||
|
||||
--shadow-weak-40: rgba(0, 0, 0, .05);
|
||||
--shadow-weak-30: rgba(0, 0, 0, .1);
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ defineProps({
|
|||
}
|
||||
|
||||
.name {
|
||||
flex-shrink: 0;
|
||||
padding: .25rem .5rem;
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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', {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<form
|
||||
v-show="showFilters"
|
||||
class="filters"
|
||||
@submit.prevent
|
||||
>
|
||||
<Filters>
|
||||
<div class="filter">
|
||||
<input
|
||||
v-model="q"
|
||||
|
|
@ -15,203 +11,31 @@
|
|||
>
|
||||
</div>
|
||||
|
||||
<ul class="filter genders nolist">
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === undefined }"
|
||||
class="gender-button all"
|
||||
@click="updateFilter('gender', undefined, true)"
|
||||
>all</button>
|
||||
</li>
|
||||
<GenderFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'female' }"
|
||||
class="gender-button female"
|
||||
@click="updateFilter('gender', 'female', true)"
|
||||
><Gender gender="female" /></button>
|
||||
</li>
|
||||
<BirthdateFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'male' }"
|
||||
class="gender-button male"
|
||||
@click="updateFilter('gender', 'male', true)"
|
||||
><Gender gender="male" /></button>
|
||||
</li>
|
||||
<BoobsFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'transsexual' }"
|
||||
class="gender-button transsexual"
|
||||
@click="updateFilter('gender', 'transsexual', true)"
|
||||
><Gender gender="transsexual" /></button>
|
||||
</li>
|
||||
<PhysiqueFilter
|
||||
:filters="filters"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<li>
|
||||
<button
|
||||
:class="{ selected: filters.gender === 'other' }"
|
||||
class="gender-button other"
|
||||
@click="updateFilter('gender', 'other', true)"
|
||||
><Icon icon="question5" /></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="filter">
|
||||
<div class="filter-section">
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="filters.age"
|
||||
:disabled="!filters.ageRequired"
|
||||
@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
|
||||
@input="(range) => updateFilter('age', range, false)"
|
||||
@change="(range) => updateFilter('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) => updateFilter('dobRequired', checked, true)"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-model="filters.dobType"
|
||||
class="input select"
|
||||
@change="() => updateFilter('dobRequired', true, true)"
|
||||
>
|
||||
<option value="birthday">Birthday</option>
|
||||
<option value="dob">Date of birth</option>
|
||||
</select>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="input-container"
|
||||
@click="() => updateFilter('dobRequired', true, true)"
|
||||
>
|
||||
<input
|
||||
:value="filters.dob"
|
||||
:disabled="!filters.dobRequired"
|
||||
:max="maxDob"
|
||||
type="date"
|
||||
class="input"
|
||||
@change="(event) => updateFilter('dob', event.target.value, true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
<RangeFilter
|
||||
label="bra size"
|
||||
:min="0"
|
||||
:max="braSizes.length - 1"
|
||||
:value="filters.braSize"
|
||||
:values="braSizes"
|
||||
:disabled="!filters.braSizeRequired"
|
||||
@enable="(checked) => updateFilter('braSizeRequired', checked, true)"
|
||||
@input="(range) => updateFilter('braSize', range, false)"
|
||||
@change="(range) => updateFilter('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="updateFilter('naturalBoobs', true, true)"
|
||||
><Icon icon="leaf" /></span>
|
||||
|
||||
<input
|
||||
:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
|
||||
class="toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
@change="updateFilter('naturalBoobs', naturalBoobsValues[$event.target.value], true)"
|
||||
>
|
||||
|
||||
<span
|
||||
class="toggle-label on"
|
||||
@click="updateFilter('naturalBoobs', false, true)"
|
||||
><Icon icon="magic-wand2" /></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
<RangeFilter
|
||||
label="height"
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="filters.height"
|
||||
:disabled="!filters.heightRequired"
|
||||
unit="cm"
|
||||
@enable="(checked) => updateFilter('heightRequired', checked, filters.heightRequired !== checked)"
|
||||
@input="(range) => updateFilter('height', range, false)"
|
||||
@change="(range) => updateFilter('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) => updateFilter('weightRequired', checked, filters.weightRequired !== checked)"
|
||||
@input="(range) => updateFilter('weight', range, false)"
|
||||
@change="(range) => updateFilter('weight', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="meter-slow" /></template>
|
||||
<template #end><Icon icon="meter-fast" /></template>
|
||||
</RangeFilter>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
:update-value="updateFilter"
|
||||
/>
|
||||
|
||||
<Countries
|
||||
:countries="filteredCountries"
|
||||
:selected-country="filters.country"
|
||||
:update-value="updateFilter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CountryFilter
|
||||
:filters="filters"
|
||||
:countries="countries"
|
||||
@update="updateFilter"
|
||||
/>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
|
|
@ -220,89 +44,107 @@
|
|||
@change="(checked) => updateFilter('avatarRequired', checked, true)"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</Filters>
|
||||
|
||||
<div class="actors-anchor">
|
||||
<div
|
||||
class="sidebar-toggle"
|
||||
@click="toggleFilters"
|
||||
>
|
||||
<Icon
|
||||
<div class="actors-container">
|
||||
<div class="actors-header">
|
||||
<!--
|
||||
<div
|
||||
v-show="showFilters"
|
||||
icon="arrow-left3"
|
||||
/>
|
||||
class="filters-toggle hide"
|
||||
@click.stop="toggleFilters(hide)"
|
||||
>
|
||||
<Icon
|
||||
icon="arrow-left3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
<div
|
||||
v-show="!showFilters"
|
||||
icon="arrow-right3"
|
||||
/>
|
||||
</div>
|
||||
class="filters-toggle show"
|
||||
@click.stop="toggleFilters(true)"
|
||||
>
|
||||
Filters
|
||||
<Icon
|
||||
icon="arrow-right3"
|
||||
/>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div
|
||||
ref="container"
|
||||
class="actors-container"
|
||||
>
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
<div class="meta">
|
||||
<span class="count">{{ total }} results</span>
|
||||
|
||||
<select
|
||||
v-model="order"
|
||||
class="input"
|
||||
@change="search"
|
||||
>
|
||||
<ActorTile
|
||||
:actor="actor"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:total="total"
|
||||
:redirect="false"
|
||||
@navigation="paginate"
|
||||
/>
|
||||
<option value="name.asc">Name</option>
|
||||
<option value="likes.desc">Likes</option>
|
||||
<option value="scenes.desc">Scenes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
>
|
||||
<ActorTile
|
||||
:actor="actor"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Pagination
|
||||
:page="currentPage"
|
||||
:total="total"
|
||||
:redirect="false"
|
||||
@navigation="paginate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { ref, inject } from 'vue';
|
||||
import { format, subYears } from 'date-fns';
|
||||
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import Pagination from '#/components/pagination/pagination.vue';
|
||||
import Gender from '#/components/actors/gender.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
import Countries from '#/components/filters/countries.vue';
|
||||
import Filters from '#/components/filters/filters.vue';
|
||||
import GenderFilter from '#/components/filters/gender.vue';
|
||||
import BirthdateFilter from '#/components/filters/birthdate.vue';
|
||||
import BoobsFilter from '#/components/filters/boobs.vue';
|
||||
import PhysiqueFilter from '#/components/filters/physique.vue';
|
||||
import CountryFilter from '#/components/filters/country.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const { pageProps, urlParsed, routeParams } = pageContext;
|
||||
|
||||
const q = ref(urlParsed.search.q);
|
||||
const actors = ref([]);
|
||||
|
||||
const container = ref(null);
|
||||
const showFilters = ref(true);
|
||||
|
||||
const countries = ref(pageProps.countries);
|
||||
const countryQuery = ref('');
|
||||
|
||||
const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
|
||||
const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => countries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
|
||||
const filteredCountries = computed(() => countries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
||||
const showFilters = ref(false);
|
||||
|
||||
const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
|
||||
if (pageContext.isHydration) { // hide sidebar on mobile, we can only run this client-side
|
||||
if (window.matchMedia('(max-width: 1200px)')?.matches) {
|
||||
showFilters.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
actors.value = pageProps.actors;
|
||||
|
||||
const braSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
const naturalBoobsValues = [true, undefined, false];
|
||||
|
||||
const currentPage = ref(Number(routeParams.page));
|
||||
const total = ref(Number(pageProps.total));
|
||||
const order = ref(urlParsed.search.order || 'likes.desc');
|
||||
|
||||
const filters = ref({
|
||||
gender: urlParsed.search.gender,
|
||||
|
|
@ -329,6 +171,7 @@ async function search(resetPage = true) {
|
|||
|
||||
const query = {
|
||||
q: q.value || undefined,
|
||||
order: order.value,
|
||||
gender: filters.value.gender || undefined,
|
||||
age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
|
||||
dob: filters.value.dobRequired ? filters.value.dob : undefined,
|
||||
|
|
@ -341,15 +184,17 @@ async function search(resetPage = true) {
|
|||
avatar: filters.value.avatarRequired || undefined,
|
||||
};
|
||||
|
||||
const res = await get('/actors', { ...query, page: currentPage.value }); // client uses param rather than query pagination
|
||||
const res = await get('/actors', {
|
||||
...query,
|
||||
page: currentPage.value, // client uses param rather than query pagination
|
||||
});
|
||||
|
||||
actors.value = res.actors;
|
||||
total.value = res.total;
|
||||
|
||||
countries.value = res.countries;
|
||||
|
||||
container.value.scrollTop = 0;
|
||||
|
||||
events.emit('scrollUp');
|
||||
navigate(`/actors/${currentPage.value}`, query, { redirect: false });
|
||||
}
|
||||
|
||||
|
|
@ -359,6 +204,8 @@ function paginate({ page }) {
|
|||
}
|
||||
|
||||
function updateFilter(prop, value, reload = true) {
|
||||
console.log('update!', prop, value);
|
||||
|
||||
filters.value[prop] = value;
|
||||
|
||||
if (reload) {
|
||||
|
|
@ -366,9 +213,11 @@ function updateFilter(prop, value, reload = true) {
|
|||
}
|
||||
}
|
||||
|
||||
function toggleFilters() {
|
||||
showFilters.value = !showFilters.value;
|
||||
/*
|
||||
function toggleFilters(state) {
|
||||
showFilters.value = state ?? !showFilters.value;
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -401,68 +250,31 @@ function toggleFilters() {
|
|||
|
||||
<style scoped>
|
||||
.page {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filters {
|
||||
width: 17rem;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
border-right: solid 1px var(--shadow-weak-30);
|
||||
overflow-y: auto;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
padding: .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
}
|
||||
}
|
||||
|
||||
.actors-anchor {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: 1.5rem;
|
||||
height: 2rem;
|
||||
.actors-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
padding: .5rem 0 .75rem 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.actors-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
|
|
@ -472,116 +284,15 @@ function toggleFilters() {
|
|||
gap: .25rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
flex-grow: 1;
|
||||
color: var(--shadow-strong-10);
|
||||
|
||||
option {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.filter {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon,
|
||||
.flag {
|
||||
fill: var(--shadow);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: -.1rem .75rem 0 0;
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--shadow-strong);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
color: var(--primary);
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export async function onBeforeRender(pageContext) {
|
|||
} = await fetchActors(curateActorsQuery(pageContext.urlQuery), {
|
||||
page: Number(pageContext.routeParams.page) || 1,
|
||||
limit: Number(pageContext.urlParsed.search.limit) || 120,
|
||||
order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -5,20 +5,31 @@
|
|||
>
|
||||
<Header />
|
||||
|
||||
<div class="content">
|
||||
<slot />
|
||||
<div
|
||||
ref="content"
|
||||
class="content"
|
||||
>
|
||||
<slot @scroll="scroll" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import Header from '../components/header/header.vue';
|
||||
|
||||
const content = ref(null);
|
||||
|
||||
function blur() {
|
||||
events.emit('blur');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
events.on('scrollUp', () => { content.value.scrollTop = 0; });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -23,13 +23,14 @@ export function curateActor(actor, context = {}) {
|
|||
alpha2: actor.residence_country_alpha2,
|
||||
name: actor.residence_country_name,
|
||||
},
|
||||
avatar: actor.avatar_id ? {
|
||||
id: actor.avatar_id,
|
||||
path: actor.avatar_path,
|
||||
thumbnail: actor.avatar_thumbnail,
|
||||
lazy: actor.avatar_lazy,
|
||||
isS3: actor.avatar_s3,
|
||||
} : null,
|
||||
avatar: actor.avatar && {
|
||||
id: actor.avatar.id,
|
||||
path: actor.avatar.path,
|
||||
thumbnail: actor.avatar.thumbnail,
|
||||
lazy: actor.avatar.lazy,
|
||||
isS3: actor.avatar.is_s3,
|
||||
},
|
||||
likes: actor.stashed,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -46,20 +47,9 @@ export function sortActorsByGender(actors) {
|
|||
|
||||
export async function fetchActorsById(actorIds) {
|
||||
const [actors] = await Promise.all([
|
||||
knex('actors')
|
||||
.select(
|
||||
'actors.*',
|
||||
'avatars.id as avatar_id',
|
||||
'avatars.path as avatar_path',
|
||||
'avatars.thumbnail as avatar_thumbnail',
|
||||
'avatars.lazy as avatar_lazy',
|
||||
'avatars.width as avatar_width',
|
||||
'avatars.height as avatar_height',
|
||||
'avatars.is_s3 as avatar_s3',
|
||||
)
|
||||
.whereIn('actors.id', actorIds)
|
||||
.leftJoin('media as avatars', 'avatars.id', 'actors.avatar_media_id')
|
||||
.groupBy('actors.id', 'avatars.id'),
|
||||
knex('actors_meta')
|
||||
.select('actors_meta.*')
|
||||
.whereIn('actors_meta.id', actorIds),
|
||||
]);
|
||||
|
||||
const curatedActors = actorIds.map((actorId) => {
|
||||
|
|
@ -85,6 +75,7 @@ function curateOptions(options) {
|
|||
page: options?.page || 1,
|
||||
limit: options?.limit || 30,
|
||||
requireAvatar: options?.requireAvatar || false,
|
||||
order: [options.order?.[0] || 'name', options.order?.[1] || 'asc'],
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -194,12 +185,33 @@ function buildQuery(filters) {
|
|||
return { query, expressions };
|
||||
}
|
||||
|
||||
const sortMap = {
|
||||
likes: 'stashed',
|
||||
scenes: 'scenes',
|
||||
};
|
||||
|
||||
function getSort(order) {
|
||||
if (order[0] === 'name') {
|
||||
return [{
|
||||
slug: order[1],
|
||||
}];
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
[sortMap[order[0]]]: order[1],
|
||||
},
|
||||
{
|
||||
slug: 'asc', // sort by name where primary order is equal
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export async function fetchActors(filters, rawOptions) {
|
||||
const options = curateOptions(rawOptions);
|
||||
const { query, expressions } = buildQuery(filters);
|
||||
|
||||
console.log(options);
|
||||
console.log('offset', (options.page - 1) * options.limit);
|
||||
|
||||
const result = await searchApi.search({
|
||||
index: 'actors',
|
||||
|
|
@ -207,7 +219,7 @@ export async function fetchActors(filters, rawOptions) {
|
|||
expressions,
|
||||
limit: options.limit,
|
||||
offset: (options.page - 1) * options.limit,
|
||||
sort: [{ slug: 'asc' }],
|
||||
sort: getSort(options.order),
|
||||
aggs: {
|
||||
countries: {
|
||||
terms: {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export async function fetchActorsApi(req, res) {
|
|||
} = await fetchActors(curateActorsQuery(req.query), {
|
||||
page: Number(req.query.page) || 1,
|
||||
limit: Number(req.query.limit) || 120,
|
||||
order: req.query.order?.split('.') || ['likes', 'desc'],
|
||||
});
|
||||
|
||||
res.send({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import vue from '@vitejs/plugin-vue';
|
||||
import vike from 'vike/plugin';
|
||||
import vike from 'vike/plugin'; // eslint-disable-line import/extensions
|
||||
|
||||
import postCssGlobalData from '@csstools/postcss-global-data';
|
||||
import postCssNesting from 'postcss-nesting';
|
||||
|
|
|
|||
Loading…
Reference in New Issue