DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Replaced alphabet index with search bar on actors page.

This commit is contained in:
DebaucheryLibrarian 2021-08-22 01:26:09 +02:00
parent b24973eb19
commit 0c19a026ef
7 changed files with 328 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

456
assets/components/actors/actors.vue
View File

@ -1,213 +1,203 @@
<template> <template>
<div class="actors"> <div
ref="content"
class="actors"
>
<nav <nav
ref="filter" ref="filters"
class="filter" class="filters"
> >
<ul class="genders nolist"> <div class="filters-row">
<li class="gender"> <ul class="genders nolist">
<router-link <li class="gender">
:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }" <router-link
:class="{ selected: gender === 'all' }" :to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
class="gender-link all" :class="{ selected: gender === 'all' }"
>all</router-link> class="gender-link all"
</li> >all</router-link>
<li class="gender"> </li>
<router-link <li class="gender">
:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }" <router-link
:class="{ selected: gender === 'female' }" :to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }"
class="gender-link female" :class="{ selected: gender === 'female' }"
><Gender gender="female" /></router-link> class="gender-link female"
</li> ><Gender gender="female" /></router-link>
<li class="gender"> </li>
<router-link <li class="gender">
:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }" <router-link
:class="{ selected: gender === 'male' }" :to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }"
class="gender-link male" :class="{ selected: gender === 'male' }"
replace class="gender-link male"
><Gender gender="male" /></router-link> replace
</li> ><Gender gender="male" /></router-link>
<li class="gender"> </li>
<router-link <li class="gender">
:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }" <router-link
:class="{ selected: gender === 'trans' }" :to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
class="gender-link transsexual" :class="{ selected: gender === 'trans' }"
replace class="gender-link transsexual"
><Gender gender="transsexual" /></router-link> replace
</li> ><Gender gender="transsexual" /></router-link>
<li class="gender"> </li>
<router-link <li class="gender">
:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }" <router-link
:class="{ selected: gender === 'other' }" :to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
class="gender-link other" :class="{ selected: gender === 'other' }"
replace class="gender-link other"
><Icon icon="question5" /></router-link> replace
</li> ><Icon icon="question5" /></router-link>
</ul> </li>
</ul>
<ul class="letters nolist"> <ul class="nolist">
<li <li>
v-for="letterX in letters" <Tooltip class="filter boobs">
:key="letterX" <span
class="letter" class="filter-trigger"
> :class="{ enabled: ageRequired }"
<router-link ><Icon icon="vcard" />Age</span>
:to="{ name: 'actors', params: { gender, letter: letterX, pageNumber: 1 } }"
:class="{ selected: letterX === letter }"
class="letter-link"
replace
>{{ letterX || 'All' }}</router-link>
</li>
</ul>
</nav>
<nav class="filter"> <template v-slot:tooltip>
<ul class="nolist"> <RangeFilter
<li> label="age"
<Tooltip class="filter boobs"> :min="18"
<span :max="100"
class="filter-trigger" :value="age"
:class="{ enabled: ageRequired }" :disabled="!ageRequired"
><Icon icon="vcard" />Age</span> @enable="(checked) => updateValue('ageRequired', checked, true)"
@input="(range) => updateValue('age', range, false)"
<template v-slot:tooltip> @change="(range) => updateValue('age', range, true)"
<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)"
> >
<input <template v-slot:start><Icon icon="leaf" /></template>
v-model="dob" <template v-slot:end><Icon icon="tree3" /></template>
:disabled="!dobRequired" </RangeFilter>
type="date"
class="input" <div class="filter-section">
@change="updateFilters" <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>
</div> </template>
</template> </Tooltip>
</Tooltip> </li>
</li>
<li> <li>
<Tooltip class="filter"> <Tooltip class="filter">
<span <span
class="filter-trigger boobs" class="filter-trigger boobs"
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }" :class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
><Icon icon="boobs" />Boobs</span> ><Icon icon="boobs" />Boobs</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<RangeFilter <RangeFilter
label="size" label="size"
:min="0" :min="0"
:max="boobSizes.length - 1" :max="boobSizes.length - 1"
:value="boobSize" :value="boobSize"
:values="boobSizes" :values="boobSizes"
:disabled="!boobSizeRequired" :disabled="!boobSizeRequired"
@enable="(checked) => updateValue('boobSizeRequired', checked, true)" @enable="(checked) => updateValue('boobSizeRequired', checked, true)"
@input="(range) => updateValue('boobSize', range, false)" @input="(range) => updateValue('boobSize', range, false)"
@change="(range) => updateValue('boobSize', range, true)" @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"
> >
<span <template v-slot:start><Icon icon="boobs-small" /></template>
class="toggle-label off" <template v-slot:end><Icon icon="boobs-big" /></template>
@click="updateValue('naturalBoobs', 0)" </RangeFilter>
><Icon icon="leaf" /></span>
<input <div class="filter-section">
v-model.number="naturalBoobs" <span class="filter-label">Enhanced</span>
class="toggle"
type="range" <span
min="0" :class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
max="2" class="toggle-container noclick"
@change="updateFilters"
> >
<span
class="toggle-label off"
@click="updateValue('naturalBoobs', 0)"
><Icon icon="leaf" /></span>
<span <input
class="toggle-label on" v-model.number="naturalBoobs"
@click="updateValue('naturalBoobs', 2)" class="toggle"
><Icon icon="magic-wand2" /></span> type="range"
</span> min="0"
</div> max="2"
</template> @change="updateFilters"
</Tooltip> >
</li>
<li> <span
<Tooltip class="filter boobs"> class="toggle-label on"
<span @click="updateValue('naturalBoobs', 2)"
class="filter-trigger" ><Icon icon="magic-wand2" /></span>
:class="{ enabled: heightRequired || weightRequired }" </span>
><Icon icon="rulers" />Physique</span> </div>
</template>
</Tooltip>
</li>
<template v-slot:tooltip> <li>
<RangeFilter <Tooltip class="filter boobs">
label="height" <span
:min="50" class="filter-trigger"
:max="220" :class="{ enabled: heightRequired || weightRequired }"
:value="height" ><Icon icon="rulers" />Physique</span>
: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 <template v-slot:tooltip>
label="weight" <RangeFilter
:min="30" label="height"
:max="200" :min="50"
:value="weight" :max="220"
:disabled="!weightRequired" :value="height"
unit="kg" :disabled="!heightRequired"
@enable="(checked) => updateValue('weightRequired', checked, true)" unit="cm"
@input="(range) => updateValue('weight', range, false)" @enable="(checked) => updateValue('heightRequired', checked, true)"
@change="(range) => updateValue('weight', range, true)" @input="(range) => updateValue('height', range, false)"
> @change="(range) => updateValue('height', range, true)"
<template v-slot:start><Icon icon="meter-slow" /></template> >
<template v-slot:end><Icon icon="meter-fast" /></template> <template v-slot:start><Icon icon="height-short" /></template>
</RangeFilter> <template v-slot:end><Icon icon="height" /></template>
</template> </RangeFilter>
</Tooltip>
</li> <RangeFilter
</ul> 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> </nav>
<div class="tiles"> <div class="tiles">
@ -236,10 +226,11 @@ import Actor from './tile.vue';
import Gender from './gender.vue'; import Gender from './gender.vue';
import Checkbox from '../form/checkbox.vue'; import Checkbox from '../form/checkbox.vue';
import RangeFilter from './filter-range.vue'; import RangeFilter from './filter-range.vue';
import SearchBar from '../search/bar.vue';
import Pagination from '../pagination/pagination.vue'; import Pagination from '../pagination/pagination.vue';
const toggleValues = [true, null, false]; const toggleValues = [true, null, false];
const boobSizes = 'ABCDEFGHZ'.split(''); const boobSizes = 'ABCDEFGHIJKZ'.split('');
function updateFilters() { function updateFilters() {
this.$router.push({ this.$router.push({
@ -269,6 +260,11 @@ function updateValue(prop, value, load = true) {
} }
async function fetchActors(scroll) { async function fetchActors(scroll) {
if (this.$route.query.query) {
await this.searchActors();
return;
}
const curatedGender = this.gender.replace('trans', 'transsexual'); const curatedGender = this.gender.replace('trans', 'transsexual');
const { actors, totalCount } = await this.$store.dispatch('fetchActors', { const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
@ -288,7 +284,23 @@ async function fetchActors(scroll) {
this.totalCount = totalCount; this.totalCount = totalCount;
if (scroll) { 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, Checkbox,
Gender, Gender,
RangeFilter, RangeFilter,
SearchBar,
Pagination, Pagination,
}, },
data() { data() {
@ -328,7 +341,6 @@ export default {
pageTitle: null, pageTitle: null,
totalCount: 0, totalCount: 0,
limit: 50, limit: 50,
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
age: this.$route.query.age?.split(',') || [18, 100], age: this.$route.query.age?.split(',') || [18, 100],
ageRequired: !!this.$route.query.age, ageRequired: !!this.$route.query.age,
dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'), dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
@ -353,6 +365,7 @@ export default {
mounted, mounted,
methods: { methods: {
fetchActors, fetchActors,
searchActors,
updateFilters, updateFilters,
updateValue, updateValue,
}, },
@ -403,24 +416,34 @@ export default {
flex-grow: 1; 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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 1rem; }
margin: 0 0 1rem 0;
&:first-child { .filters {
margin: 1rem 0; margin: 1rem 0 .5rem 0;
} }
.filters-row,
.filter {
padding: 0 1rem;
} }
.genders { .genders {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
padding: 0 .5rem 0 0; padding: 0 .5rem 0 0;
border-right: solid 1px var(--shadow-hint);
margin: 0 1rem 0 0;
} }
.letter, .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) { @media(max-width: $breakpoint) {
.genders { .filters-row {
flex-direction: column; flex-direction: column;
} }
.genders {
padding: 0;
margin: 0 0 1.5rem 0;
}
} }
@media(max-width: $breakpoint-micro) { @media(max-width: $breakpoint-micro) {
@ -672,4 +712,10 @@ export default {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
} }
} }
@media(max-width: $breakpoint-mini) {
.filter .icon {
display: none;
}
}
</style> </style>

113
assets/components/networks/networks.vue
View File

@ -1,44 +1,23 @@
<template> <template>
<div class="networks"> <div class="networks">
<form <div class="content-inner">
class="search" <SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
@submit.prevent="searchEntities"
> <span
<input v-if="done && entities.length === 0"
v-model="query" class="empty"
:placeholder="`Search ${channelCount} channels in ${entities.length} networks`" >No results for "{{ $route.query.query }}"</span>
class="query"
@input="searchEntities" <div
v-else
class="entity-tiles"
> >
<Entity
<button v-for="entity in entities"
type="submit" :key="`entity-tile-${entity.slug}`"
class="search-button" :entity="entity"
><Icon icon="search" /></button> />
</form> </div>
<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"
/>
</div> </div>
<Footer /> <Footer />
@ -47,21 +26,39 @@
<script> <script>
import Entity from '../entities/tile.vue'; import Entity from '../entities/tile.vue';
import SearchBar from '../search/bar.vue';
async function searchEntities() { async function fetchEntities() {
this.searchResults = await this.$store.dispatch('searchEntities', { if (this.$route.query.query) {
query: this.query, await this.searchEntities();
limit: 50, return;
}); }
}
this.done = false;
async function mounted() {
this.entities = await this.$store.dispatch('fetchEntities', { this.entities = await this.$store.dispatch('fetchEntities', {
type: 'network', type: 'network',
entitySlugs: [], 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() { function channelCount() {
@ -71,20 +68,24 @@ function channelCount() {
export default { export default {
components: { components: {
Entity, Entity,
SearchBar,
}, },
data() { data() {
return { return {
query: '', done: false,
pageTitle: null, pageTitle: null,
entities: [], entities: [],
searchResults: [],
}; };
}, },
computed: { computed: {
channelCount, channelCount,
}, },
watch: {
$route: fetchEntities,
},
mounted, mounted,
methods: { methods: {
fetchEntities,
searchEntities, searchEntities,
}, },
}; };
@ -94,7 +95,13 @@ export default {
@import 'theme'; @import 'theme';
.networks { .networks {
padding: 0 1rem; display: flex;
flex-direction: column;
flex-grow: 1;
}
.content-inner {
padding: 0 1rem;
} }
.search { .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) { @media(max-width: $breakpoint2) {
.entity-tiles { .entity-tiles {
grid-gap: .5rem; grid-gap: .5rem;

9
assets/components/releases/movies.vue
View File

@ -1,10 +1,7 @@
<template> <template>
<div class="movies"> <div class="movies">
<div class="content-inner"> <div class="content-inner">
<Search <SearchBar :placeholder="`Search ${totalCount} movies`" />
:search="searchMovies"
:placeholder="`Search ${totalCount} movies`"
/>
<div class="tiles"> <div class="tiles">
<MovieTile <MovieTile
@ -28,7 +25,7 @@
<script> <script>
import MovieTile from './movie-tile.vue'; import MovieTile from './movie-tile.vue';
import Search from '../search/bar.vue'; import SearchBar from '../search/bar.vue';
import Pagination from '../pagination/pagination.vue'; import Pagination from '../pagination/pagination.vue';
async function fetchMovies() { async function fetchMovies() {
@ -66,7 +63,7 @@ async function mounted() {
export default { export default {
components: { components: {
MovieTile, MovieTile,
Search, SearchBar,
Pagination, Pagination,
}, },
data() { data() {

3
assets/components/search/bar.vue
View File

@ -44,10 +44,11 @@ export default {
.search { .search {
display: flex; display: flex;
width: 100%; width: 100%;
max-width: 40rem;
} }
.query { .query {
max-width: 40rem;
min-width: 10rem;
color: var(--text); color: var(--text);
background: var(--background); background: var(--background);
flex-grow: 1; flex-grow: 1;

1
assets/css/_breakpoints.scss
View File

@ -1,5 +1,6 @@
$breakpoint-pico: 270px; $breakpoint-pico: 270px;
$breakpoint-nano: 320px; $breakpoint-nano: 320px;
$breakpoint-mini: 400px;
$breakpoint-micro: 540px; $breakpoint-micro: 540px;
$breakpoint-small: 620px; $breakpoint-small: 620px;
$breakpoint: 720px; $breakpoint: 720px;

7
assets/js/releases/actions.js
View File

@ -1,5 +1,10 @@
import { graphql } from '../api'; import { graphql } from '../api';
import { releasesFragment, releaseFragment, releaseFields, movieFields } from '../fragments'; import {
releasesFragment,
releaseFragment,
releaseFields,
movieFields,
} from '../fragments';
import { curateRelease } from '../curate'; import { curateRelease } from '../curate';
import getDateRange from '../get-date-range'; import getDateRange from '../get-date-range';

3
assets/js/router.js
View File

@ -176,7 +176,6 @@ const routes = [
params: { params: {
...from.params, ...from.params,
gender: 'all', gender: 'all',
letter: 'all',
tags: 'all', tags: 'all',
range: 'latest', range: 'latest',
pageNumber: 1, pageNumber: 1,
@ -184,7 +183,7 @@ const routes = [
}), }),
}, },
{ {
path: '/actors/:gender?/:letter?/:pageNumber', path: '/actors/:gender?/:pageNumber',
component: Actors, component: Actors,
name: 'actors', name: 'actors',
}, },