forked from DebaucheryLibrarian/traxxx
Replaced alphabet index with search bar on actors page.
This commit is contained in:
DebaucheryLibrarian
parent
b24973eb19
commit
0c19a026ef
|
|
@ -1,9 +1,13 @@
|
|||
<template>
|
||||
<div class="actors">
|
||||
<nav
|
||||
ref="filter"
|
||||
class="filter"
|
||||
<div
|
||||
ref="content"
|
||||
class="actors"
|
||||
>
|
||||
<nav
|
||||
ref="filters"
|
||||
class="filters"
|
||||
>
|
||||
<div class="filters-row">
|
||||
<ul class="genders nolist">
|
||||
<li class="gender">
|
||||
<router-link
|
||||
|
|
@ -45,23 +49,6 @@
|
|||
</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>
|
||||
|
||||
<nav class="filter">
|
||||
<ul class="nolist">
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
|
|
@ -208,6 +195,9 @@
|
|||
</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,34 +1,12 @@
|
|||
<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`" />
|
||||
|
||||
<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>
|
||||
<span
|
||||
v-if="done && entities.length === 0"
|
||||
class="empty"
|
||||
>No results for "{{ $route.query.query }}"</span>
|
||||
|
||||
<div
|
||||
v-else
|
||||
|
|
@ -40,6 +18,7 @@
|
|||
:entity="entity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
@ -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,6 +95,12 @@ export default {
|
|||
@import 'theme';
|
||||
|
||||
.networks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -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