From 0c19a026ef3148446ca7686e56cefdfd2b214e14 Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Sun, 22 Aug 2021 01:26:09 +0200 Subject: [PATCH] Replaced alphabet index with search bar on actors page. --- assets/components/actors/actors.vue | 456 +++++++++++++----------- assets/components/networks/networks.vue | 113 +++--- assets/components/releases/movies.vue | 9 +- assets/components/search/bar.vue | 3 +- assets/css/_breakpoints.scss | 1 + assets/js/releases/actions.js | 7 +- assets/js/router.js | 3 +- 7 files changed, 328 insertions(+), 264 deletions(-) diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue index abd5f483..f7351088 100644 --- a/assets/components/actors/actors.vue +++ b/assets/components/actors/actors.vue @@ -1,213 +1,203 @@ - - + + + -
  • - - Boobs +
  • + + Boobs - - -
    • + -
  • - - Physique + + + + + +
    • - - - - + + + + + + +
    @@ -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; + } +} diff --git a/assets/components/networks/networks.vue b/assets/components/networks/networks.vue index c3e68bc5..6d2c3d2f 100644 --- a/assets/components/networks/networks.vue +++ b/assets/components/networks/networks.vue @@ -1,44 +1,23 @@