Added country filter for actors.
This commit is contained in:
DebaucheryLibrarian
@@ -11,21 +11,21 @@
|
||||
<ul class="genders nolist">
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 }, query: $route.query }"
|
||||
:to="{ name: 'actors', params: { gender: 'all', pageNumber: 1 }, query: $route.query }"
|
||||
:class="{ selected: gender === 'all' }"
|
||||
class="gender-link all"
|
||||
>all</router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 }, query: $route.query }"
|
||||
:to="{ name: 'actors', params: { gender: 'female', pageNumber: 1 }, query: $route.query }"
|
||||
:class="{ selected: gender === 'female' }"
|
||||
class="gender-link female"
|
||||
><Gender gender="female" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 }, query: $route.query }"
|
||||
:to="{ name: 'actors', params: { gender: 'male', pageNumber: 1 }, query: $route.query }"
|
||||
:class="{ selected: gender === 'male' }"
|
||||
class="gender-link male"
|
||||
replace
|
||||
@@ -33,7 +33,7 @@
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 }, query: $route.query }"
|
||||
:to="{ name: 'actors', params: { gender: 'trans', pageNumber: 1 }, query: $route.query }"
|
||||
:class="{ selected: gender === 'trans' }"
|
||||
class="gender-link transsexual"
|
||||
replace
|
||||
@@ -41,7 +41,7 @@
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 }, query: $route.query }"
|
||||
:to="{ name: 'actors', params: { gender: 'other', pageNumber: 1 }, query: $route.query }"
|
||||
:class="{ selected: gender === 'other' }"
|
||||
class="gender-link other"
|
||||
replace
|
||||
@@ -49,7 +49,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nolist">
|
||||
<ul class="filters-attributes nolist">
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span
|
||||
@@ -194,6 +194,43 @@
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Tooltip class="filter">
|
||||
<span
|
||||
:class="{ enabled: country }"
|
||||
class="filter-trigger"
|
||||
><img
|
||||
v-if="$route.query.c"
|
||||
:src="`/img/flags/${$route.query.c.toLowerCase()}.svg`"
|
||||
class="flag"
|
||||
><Icon
|
||||
v-else
|
||||
icon="earth2"
|
||||
/>Country</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<input
|
||||
v-model="countryQuery"
|
||||
placeholder="Search"
|
||||
class="input"
|
||||
>
|
||||
|
||||
<Countries
|
||||
v-if="!countryQuery"
|
||||
:countries="topCountries"
|
||||
:selected-country="country"
|
||||
:update-value="updateValue"
|
||||
/>
|
||||
|
||||
<Countries
|
||||
:countries="filteredCountries"
|
||||
:selected-country="country"
|
||||
:update-value="updateValue"
|
||||
/>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -225,12 +262,14 @@ import dayjs from 'dayjs';
|
||||
import Actor from './tile.vue';
|
||||
import Gender from './gender.vue';
|
||||
import Checkbox from '../form/checkbox.vue';
|
||||
import Countries from './countries.vue';
|
||||
import RangeFilter from './filter-range.vue';
|
||||
import SearchBar from '../search/bar.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
||||
const toggleValues = [true, null, false];
|
||||
const boobSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
const topCountries = ['AU', 'BR', 'DE', 'RU', 'GB', 'US'];
|
||||
|
||||
function updateFilters() {
|
||||
this.$router.push({
|
||||
@@ -238,13 +277,13 @@ function updateFilters() {
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
gender: this.gender,
|
||||
letter: this.letter,
|
||||
},
|
||||
query: {
|
||||
nb: this.naturalBoobs !== 1 ? this.naturalBoobs : undefined,
|
||||
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
|
||||
h: this.heightRequired ? this.height.join(',') : undefined,
|
||||
w: this.weightRequired ? this.weight.join(',') : undefined,
|
||||
c: this.country ? this.country : undefined,
|
||||
age: this.ageRequired ? this.age.join(',') : undefined,
|
||||
dob: this.dobRequired ? this.dob : undefined,
|
||||
query: this.$route.query.query,
|
||||
@@ -263,7 +302,7 @@ function updateValue(prop, value, load = true) {
|
||||
async function fetchActors(scroll) {
|
||||
const curatedGender = this.gender.replace('trans', 'transsexual');
|
||||
|
||||
const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
|
||||
const { actors, countries, totalCount } = await this.$store.dispatch('fetchActors', {
|
||||
limit: this.limit,
|
||||
pageNumber: Number(this.$route.params.pageNumber) || 1,
|
||||
query: this.$route.query.query,
|
||||
@@ -271,22 +310,32 @@ async function fetchActors(scroll) {
|
||||
age: this.ageRequired && this.age,
|
||||
dob: this.dobRequired && this.dob,
|
||||
boobSize: this.boobSizeRequired && this.boobSize,
|
||||
country: this.country,
|
||||
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
|
||||
height: this.heightRequired && this.height,
|
||||
weight: this.weightRequired && this.weight,
|
||||
});
|
||||
|
||||
const countriesByAlpha2 = countries.reduce((acc, country) => ({ ...acc, [country.alpha2]: country }), {});
|
||||
|
||||
this.actors = actors;
|
||||
this.totalCount = totalCount;
|
||||
|
||||
this.countries = countries;
|
||||
this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
|
||||
|
||||
if (scroll) {
|
||||
this.$refs.content.scrollTop = 0;
|
||||
// this.$refs.filter?.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
function letter() {
|
||||
return this.$route.params.letter || 'all';
|
||||
function filteredCountries() {
|
||||
const countryQueryExpression = new RegExp(this.countryQuery, 'i');
|
||||
|
||||
return this.countryQuery?.length > 0
|
||||
? this.countries.filter(country => countryQueryExpression.test(country.name) || countryQueryExpression.test(country.alpha2))
|
||||
: this.countries;
|
||||
}
|
||||
|
||||
function gender() {
|
||||
@@ -295,8 +344,7 @@ function gender() {
|
||||
|
||||
async function route(to, from) {
|
||||
const scroll = to.params.pageNumber !== from.params.pageNumber
|
||||
|| to.params.gender !== from.params.gender
|
||||
|| to.params.letter !== from.params.letter;
|
||||
|| to.params.gender !== from.params.gender;
|
||||
|
||||
await this.fetchActors(scroll);
|
||||
}
|
||||
@@ -311,6 +359,7 @@ export default {
|
||||
components: {
|
||||
Actor,
|
||||
Checkbox,
|
||||
Countries,
|
||||
Gender,
|
||||
RangeFilter,
|
||||
SearchBar,
|
||||
@@ -319,6 +368,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
actors: [],
|
||||
countries: [],
|
||||
topCountries: [],
|
||||
countryQuery: null,
|
||||
pageTitle: null,
|
||||
totalCount: 0,
|
||||
limit: 50,
|
||||
@@ -329,6 +381,7 @@ export default {
|
||||
boobSizes,
|
||||
boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
|
||||
boobSizeRequired: !!this.$route.query.bs,
|
||||
country: this.$route.query.c || null,
|
||||
naturalBoobs: Number(this.$route.query.nb) || 1,
|
||||
height: this.$route.query.h?.split(',').map(Number) || [50, 220],
|
||||
heightRequired: !!this.$route.query.h,
|
||||
@@ -337,8 +390,8 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
letter,
|
||||
gender,
|
||||
filteredCountries,
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
@@ -386,11 +439,13 @@ export default {
|
||||
.actors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||||
grid-template-rows: min-content;
|
||||
grid-gap: .5rem;
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
@@ -426,12 +481,10 @@ export default {
|
||||
padding: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
.letter,
|
||||
.gender {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.letter-link,
|
||||
.gender-link {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
@@ -481,7 +534,8 @@ export default {
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
.icon,
|
||||
.flag {
|
||||
fill: var(--shadow);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
@@ -664,7 +718,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
@media(max-width: $breakpoint-mega) {
|
||||
.filters {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@@ -676,15 +730,33 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
.filters {
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
flex-direction: column;
|
||||
|
||||
.filter {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-attributes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.genders {
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
padding: .5rem 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
@@ -692,10 +764,4 @@ export default {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-mini) {
|
||||
.filter .icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
88
assets/components/actors/countries.vue
Normal file
88
assets/components/actors/countries.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<ul class="countries nolist">
|
||||
<li
|
||||
v-for="country in countries"
|
||||
:key="country.alpha2"
|
||||
:title="country.name"
|
||||
:class="{ selected: selectedCountry === country.alpha2 }"
|
||||
class="country"
|
||||
@click="updateValue('country', country.alpha2, true)"
|
||||
>
|
||||
<img
|
||||
:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
|
||||
class="flag"
|
||||
>
|
||||
|
||||
<span class="country-name">{{ country.alias || country.name }}</span>
|
||||
|
||||
<Icon
|
||||
v-if="selectedCountry === country.alpha2"
|
||||
icon="cross2"
|
||||
@click.native.stop="updateValue('country', null, true)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
countries: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectedCountry: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
updateValue: {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.countries:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
|
||||
.country {
|
||||
width: 15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.flag {
|
||||
width: 1.25rem;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: .25rem .5rem;;
|
||||
fill: var(--shadow);
|
||||
|
||||
&:hover {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--shadow-hint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.country-name {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user