forked from DebaucheryLibrarian/traxxx
Replaced alphabet index with search bar on actors page.
This commit is contained in:
DebaucheryLibrarian
parent
b24973eb19
commit
0c19a026ef
|
|
@ -1,213 +1,203 @@
|
|||
<template>
|
||||
<div class="actors">
|
||||
<div
|
||||
ref="content"
|
||||
class="actors"
|
||||
>
|
||||
<nav
|
||||
ref="filter"
|
||||
class="filter"
|
||||
ref="filters"
|
||||
class="filters"
|
||||
>
|
||||
<ul class="genders nolist">
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
|
||||
: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 } }"
|
||||
: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 } }"
|
||||
:class="{ selected: gender === 'male' }"
|
||||
class="gender-link male"
|
||||
replace
|
||||
><Gender gender="male" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
|
||||
:class="{ selected: gender === 'trans' }"
|
||||
class="gender-link transsexual"
|
||||
replace
|
||||
><Gender gender="transsexual" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
|
||||
:class="{ selected: gender === 'other' }"
|
||||
class="gender-link other"
|
||||
replace
|
||||
><Icon icon="question5" /></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="filters-row">
|
||||
<ul class="genders nolist">
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
|
||||
: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 } }"
|
||||
: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 } }"
|
||||
:class="{ selected: gender === 'male' }"
|
||||
class="gender-link male"
|
||||
replace
|
||||
><Gender gender="male" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
|
||||
:class="{ selected: gender === 'trans' }"
|
||||
class="gender-link transsexual"
|
||||
replace
|
||||
><Gender gender="transsexual" /></router-link>
|
||||
</li>
|
||||
<li class="gender">
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
|
||||
:class="{ selected: gender === 'other' }"
|
||||
class="gender-link other"
|
||||
replace
|
||||
><Icon icon="question5" /></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="letters nolist">
|
||||
<li
|
||||
v-for="letterX in letters"
|
||||
:key="letterX"
|
||||
class="letter"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'actors', params: { gender, letter: letterX, pageNumber: 1 } }"
|
||||
:class="{ selected: letterX === letter }"
|
||||
class="letter-link"
|
||||
replace
|
||||
>{{ letterX || 'All' }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul class="nolist">
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span
|
||||
class="filter-trigger"
|
||||
:class="{ enabled: ageRequired }"
|
||||
><Icon icon="vcard" />Age</span>
|
||||
|
||||
<nav class="filter">
|
||||
<ul class="nolist">
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span
|
||||
class="filter-trigger"
|
||||
:class="{ enabled: ageRequired }"
|
||||
><Icon icon="vcard" />Age</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="age"
|
||||
:disabled="!ageRequired"
|
||||
@enable="(checked) => updateValue('ageRequired', checked, true)"
|
||||
@input="(range) => updateValue('age', range, false)"
|
||||
@change="(range) => updateValue('age', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="leaf" /></template>
|
||||
<template v-slot:end><Icon icon="tree3" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="dobRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('dobRequired', checked, true)"
|
||||
/>Date of birth
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="input-container"
|
||||
@click="() => updateValue('dobRequired', true, true)"
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="age"
|
||||
:disabled="!ageRequired"
|
||||
@enable="(checked) => updateValue('ageRequired', checked, true)"
|
||||
@input="(range) => updateValue('age', range, false)"
|
||||
@change="(range) => updateValue('age', range, true)"
|
||||
>
|
||||
<input
|
||||
v-model="dob"
|
||||
:disabled="!dobRequired"
|
||||
type="date"
|
||||
class="input"
|
||||
@change="updateFilters"
|
||||
<template v-slot:start><Icon icon="leaf" /></template>
|
||||
<template v-slot:end><Icon icon="tree3" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="dobRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('dobRequired', checked, true)"
|
||||
/>Date of birth
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="input-container"
|
||||
@click="() => updateValue('dobRequired', true, true)"
|
||||
>
|
||||
<input
|
||||
v-model="dob"
|
||||
:disabled="!dobRequired"
|
||||
type="date"
|
||||
class="input"
|
||||
@change="updateFilters"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Tooltip class="filter">
|
||||
<span
|
||||
class="filter-trigger boobs"
|
||||
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
|
||||
><Icon icon="boobs" />Boobs</span>
|
||||
<li>
|
||||
<Tooltip class="filter">
|
||||
<span
|
||||
class="filter-trigger boobs"
|
||||
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
|
||||
><Icon icon="boobs" />Boobs</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="size"
|
||||
:min="0"
|
||||
:max="boobSizes.length - 1"
|
||||
:value="boobSize"
|
||||
:values="boobSizes"
|
||||
:disabled="!boobSizeRequired"
|
||||
@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
|
||||
@input="(range) => updateValue('boobSize', range, false)"
|
||||
@change="(range) => updateValue('boobSize', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="boobs-small" /></template>
|
||||
<template v-slot:end><Icon icon="boobs-big" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<div class="filter-section">
|
||||
<span class="filter-label">Enhanced</span>
|
||||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
|
||||
class="toggle-container noclick"
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="size"
|
||||
:min="0"
|
||||
:max="boobSizes.length - 1"
|
||||
:value="boobSize"
|
||||
:values="boobSizes"
|
||||
:disabled="!boobSizeRequired"
|
||||
@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
|
||||
@input="(range) => updateValue('boobSize', range, false)"
|
||||
@change="(range) => updateValue('boobSize', range, true)"
|
||||
>
|
||||
<span
|
||||
class="toggle-label off"
|
||||
@click="updateValue('naturalBoobs', 0)"
|
||||
><Icon icon="leaf" /></span>
|
||||
<template v-slot:start><Icon icon="boobs-small" /></template>
|
||||
<template v-slot:end><Icon icon="boobs-big" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<input
|
||||
v-model.number="naturalBoobs"
|
||||
class="toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
@change="updateFilters"
|
||||
<div class="filter-section">
|
||||
<span class="filter-label">Enhanced</span>
|
||||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
|
||||
class="toggle-container noclick"
|
||||
>
|
||||
<span
|
||||
class="toggle-label off"
|
||||
@click="updateValue('naturalBoobs', 0)"
|
||||
><Icon icon="leaf" /></span>
|
||||
|
||||
<span
|
||||
class="toggle-label on"
|
||||
@click="updateValue('naturalBoobs', 2)"
|
||||
><Icon icon="magic-wand2" /></span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
<input
|
||||
v-model.number="naturalBoobs"
|
||||
class="toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
@change="updateFilters"
|
||||
>
|
||||
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span
|
||||
class="filter-trigger"
|
||||
:class="{ enabled: heightRequired || weightRequired }"
|
||||
><Icon icon="rulers" />Physique</span>
|
||||
<span
|
||||
class="toggle-label on"
|
||||
@click="updateValue('naturalBoobs', 2)"
|
||||
><Icon icon="magic-wand2" /></span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="height"
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
unit="cm"
|
||||
@enable="(checked) => updateValue('heightRequired', checked, true)"
|
||||
@input="(range) => updateValue('height', range, false)"
|
||||
@change="(range) => updateValue('height', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="height-short" /></template>
|
||||
<template v-slot:end><Icon icon="height" /></template>
|
||||
</RangeFilter>
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span
|
||||
class="filter-trigger"
|
||||
:class="{ enabled: heightRequired || weightRequired }"
|
||||
><Icon icon="rulers" />Physique</span>
|
||||
|
||||
<RangeFilter
|
||||
label="weight"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="weight"
|
||||
:disabled="!weightRequired"
|
||||
unit="kg"
|
||||
@enable="(checked) => updateValue('weightRequired', checked, true)"
|
||||
@input="(range) => updateValue('weight', range, false)"
|
||||
@change="(range) => updateValue('weight', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="meter-slow" /></template>
|
||||
<template v-slot:end><Icon icon="meter-fast" /></template>
|
||||
</RangeFilter>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
label="height"
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
unit="cm"
|
||||
@enable="(checked) => updateValue('heightRequired', checked, true)"
|
||||
@input="(range) => updateValue('height', range, false)"
|
||||
@change="(range) => updateValue('height', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="height-short" /></template>
|
||||
<template v-slot:end><Icon icon="height" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<RangeFilter
|
||||
label="weight"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="weight"
|
||||
:disabled="!weightRequired"
|
||||
unit="kg"
|
||||
@enable="(checked) => updateValue('weightRequired', checked, true)"
|
||||
@input="(range) => updateValue('weight', range, false)"
|
||||
@change="(range) => updateValue('weight', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="meter-slow" /></template>
|
||||
<template v-slot:end><Icon icon="meter-fast" /></template>
|
||||
</RangeFilter>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<SearchBar :placeholder="`Search ${totalCount} actors`" />
|
||||
</nav>
|
||||
|
||||
<div class="tiles">
|
||||
|
|
@ -236,10 +226,11 @@ import Actor from './tile.vue';
|
|||
import Gender from './gender.vue';
|
||||
import Checkbox from '../form/checkbox.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 = 'ABCDEFGHZ'.split('');
|
||||
const boobSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
|
||||
function updateFilters() {
|
||||
this.$router.push({
|
||||
|
|
@ -269,6 +260,11 @@ function updateValue(prop, value, load = true) {
|
|||
}
|
||||
|
||||
async function fetchActors(scroll) {
|
||||
if (this.$route.query.query) {
|
||||
await this.searchActors();
|
||||
return;
|
||||
}
|
||||
|
||||
const curatedGender = this.gender.replace('trans', 'transsexual');
|
||||
|
||||
const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
|
||||
|
|
@ -288,7 +284,23 @@ async function fetchActors(scroll) {
|
|||
this.totalCount = totalCount;
|
||||
|
||||
if (scroll) {
|
||||
this.$refs.filter?.scrollIntoView();
|
||||
this.$refs.content.scrollTop = 0;
|
||||
// this.$refs.filter?.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
async function searchActors(scroll) {
|
||||
const actors = await this.$store.dispatch('searchActors', {
|
||||
query: this.$route.query.query,
|
||||
limit: this.limit,
|
||||
});
|
||||
|
||||
this.actors = actors;
|
||||
this.totalCount = actors.length;
|
||||
|
||||
if (scroll) {
|
||||
this.$refs.content.scrollTop = 0;
|
||||
// this.$refs.filter?.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -320,6 +332,7 @@ export default {
|
|||
Checkbox,
|
||||
Gender,
|
||||
RangeFilter,
|
||||
SearchBar,
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
|
|
@ -328,7 +341,6 @@ export default {
|
|||
pageTitle: null,
|
||||
totalCount: 0,
|
||||
limit: 50,
|
||||
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
|
||||
age: this.$route.query.age?.split(',') || [18, 100],
|
||||
ageRequired: !!this.$route.query.age,
|
||||
dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
|
||||
|
|
@ -353,6 +365,7 @@ export default {
|
|||
mounted,
|
||||
methods: {
|
||||
fetchActors,
|
||||
searchActors,
|
||||
updateFilters,
|
||||
updateValue,
|
||||
},
|
||||
|
|
@ -403,24 +416,34 @@ export default {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.filter {
|
||||
.search {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.filters,
|
||||
.filters-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.filters {
|
||||
margin: 1rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
.filters-row,
|
||||
.filter {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.genders {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 0 .5rem 0 0;
|
||||
border-right: solid 1px var(--shadow-hint);
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.letter,
|
||||
|
|
@ -661,10 +684,27 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
.filters {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
::v-deep(.search) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.genders {
|
||||
.filters-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.genders {
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
|
|
@ -672,4 +712,10 @@ export default {
|
|||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-mini) {
|
||||
.filter .icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,23 @@
|
|||
<template>
|
||||
<div class="networks">
|
||||
<form
|
||||
class="search"
|
||||
@submit.prevent="searchEntities"
|
||||
>
|
||||
<input
|
||||
v-model="query"
|
||||
:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
|
||||
class="query"
|
||||
@input="searchEntities"
|
||||
<div class="content-inner">
|
||||
<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
|
||||
|
||||
<span
|
||||
v-if="done && entities.length === 0"
|
||||
class="empty"
|
||||
>No results for "{{ $route.query.query }}"</span>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="entity-tiles"
|
||||
>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="search-button"
|
||||
><Icon icon="search" /></button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="query.length > 0"
|
||||
class="entity-tiles"
|
||||
>
|
||||
<Entity
|
||||
v-for="entity in searchResults"
|
||||
:key="`${entity.type}-tile-${entity.slug}`"
|
||||
:entity="entity"
|
||||
/>
|
||||
|
||||
<span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="entity-tiles"
|
||||
>
|
||||
<Entity
|
||||
v-for="entity in entities"
|
||||
:key="`entity-tile-${entity.slug}`"
|
||||
:entity="entity"
|
||||
/>
|
||||
<Entity
|
||||
v-for="entity in entities"
|
||||
:key="`entity-tile-${entity.slug}`"
|
||||
:entity="entity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
|
@ -47,21 +26,39 @@
|
|||
|
||||
<script>
|
||||
import Entity from '../entities/tile.vue';
|
||||
import SearchBar from '../search/bar.vue';
|
||||
|
||||
async function searchEntities() {
|
||||
this.searchResults = await this.$store.dispatch('searchEntities', {
|
||||
query: this.query,
|
||||
limit: 50,
|
||||
});
|
||||
}
|
||||
async function fetchEntities() {
|
||||
if (this.$route.query.query) {
|
||||
await this.searchEntities();
|
||||
return;
|
||||
}
|
||||
|
||||
this.done = false;
|
||||
|
||||
async function mounted() {
|
||||
this.entities = await this.$store.dispatch('fetchEntities', {
|
||||
type: 'network',
|
||||
entitySlugs: [],
|
||||
});
|
||||
|
||||
this.pageTitle = 'Networks';
|
||||
this.done = true;
|
||||
}
|
||||
|
||||
async function searchEntities() {
|
||||
this.done = false;
|
||||
|
||||
this.entities = await this.$store.dispatch('searchEntities', {
|
||||
query: this.$route.query.query,
|
||||
limit: 20,
|
||||
});
|
||||
|
||||
this.done = true;
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
this.pageTitle = 'Channels';
|
||||
|
||||
await this.fetchEntities();
|
||||
}
|
||||
|
||||
function channelCount() {
|
||||
|
|
@ -71,20 +68,24 @@ function channelCount() {
|
|||
export default {
|
||||
components: {
|
||||
Entity,
|
||||
SearchBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
done: false,
|
||||
pageTitle: null,
|
||||
entities: [],
|
||||
searchResults: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
channelCount,
|
||||
},
|
||||
watch: {
|
||||
$route: fetchEntities,
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
fetchEntities,
|
||||
searchEntities,
|
||||
},
|
||||
};
|
||||
|
|
@ -94,7 +95,13 @@ export default {
|
|||
@import 'theme';
|
||||
|
||||
.networks {
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
|
|
@ -112,6 +119,14 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
color: var(--shadow);
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint2) {
|
||||
.entity-tiles {
|
||||
grid-gap: .5rem;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<div class="movies">
|
||||
<div class="content-inner">
|
||||
<Search
|
||||
:search="searchMovies"
|
||||
:placeholder="`Search ${totalCount} movies`"
|
||||
/>
|
||||
<SearchBar :placeholder="`Search ${totalCount} movies`" />
|
||||
|
||||
<div class="tiles">
|
||||
<MovieTile
|
||||
|
|
@ -28,7 +25,7 @@
|
|||
|
||||
<script>
|
||||
import MovieTile from './movie-tile.vue';
|
||||
import Search from '../search/bar.vue';
|
||||
import SearchBar from '../search/bar.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
||||
async function fetchMovies() {
|
||||
|
|
@ -66,7 +63,7 @@ async function mounted() {
|
|||
export default {
|
||||
components: {
|
||||
MovieTile,
|
||||
Search,
|
||||
SearchBar,
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -44,10 +44,11 @@ export default {
|
|||
.search {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.query {
|
||||
max-width: 40rem;
|
||||
min-width: 10rem;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
$breakpoint-pico: 270px;
|
||||
$breakpoint-nano: 320px;
|
||||
$breakpoint-mini: 400px;
|
||||
$breakpoint-micro: 540px;
|
||||
$breakpoint-small: 620px;
|
||||
$breakpoint: 720px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import { graphql } from '../api';
|
||||
import { releasesFragment, releaseFragment, releaseFields, movieFields } from '../fragments';
|
||||
import {
|
||||
releasesFragment,
|
||||
releaseFragment,
|
||||
releaseFields,
|
||||
movieFields,
|
||||
} from '../fragments';
|
||||
import { curateRelease } from '../curate';
|
||||
import getDateRange from '../get-date-range';
|
||||
|
||||
|
|
|
|||
|
|
@ -176,7 +176,6 @@ const routes = [
|
|||
params: {
|
||||
...from.params,
|
||||
gender: 'all',
|
||||
letter: 'all',
|
||||
tags: 'all',
|
||||
range: 'latest',
|
||||
pageNumber: 1,
|
||||
|
|
@ -184,7 +183,7 @@ const routes = [
|
|||
}),
|
||||
},
|
||||
{
|
||||
path: '/actors/:gender?/:letter?/:pageNumber',
|
||||
path: '/actors/:gender?/:pageNumber',
|
||||
component: Actors,
|
||||
name: 'actors',
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue