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

Added search to tags.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-08-22 03:14:02 +02:00
parent 959b5d9d0e
commit eb1f8f86fd
8 changed files with 311 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,48 +7,9 @@
ref="filters"
class="filters"
>
<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>
<SearchBar :placeholder="`Search ${totalCount} actors`" />
<div class="filters-row">
<ul class="nolist">
<li>
<Tooltip class="filter boobs">
@@ -195,9 +156,48 @@
</Tooltip>
</li>
</ul>
</div>
<SearchBar :placeholder="`Search ${totalCount} actors`" />
<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>
</nav>
<div class="tiles">
@@ -291,6 +291,7 @@ async function fetchActors(scroll) {
async function searchActors(scroll) {
const actors = await this.$store.dispatch('searchActors', {
minLength: 1,
query: this.$route.query.query,
limit: this.limit,
});
@@ -419,7 +420,6 @@ export default {
.search {
width: 0;
flex-grow: 1;
justify-content: flex-end;
box-sizing: border-box;
padding: 0 1rem;
}
@@ -427,7 +427,7 @@ export default {
.filters,
.filters-row {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
}
@@ -435,6 +435,10 @@ export default {
margin: 1rem 0 .5rem 0;
}
.filters-row {
flex-grow: 1;
}
.filters-row,
.filter {
padding: 0 1rem;
@@ -443,7 +447,7 @@ export default {
.genders {
display: flex;
flex-shrink: 0;
padding: 0 .5rem 0 0;
padding: 0 0 0 .5rem;
}
.letter,
@@ -686,7 +690,7 @@ export default {
@media(max-width: $breakpoint-kilo) {
.filters {
flex-direction: column-reverse;
flex-direction: column;
}
::v-deep(.search) {
@@ -698,7 +702,7 @@ export default {
@media(max-width: $breakpoint) {
.filters-row {
flex-direction: column;
flex-direction: column-reverse;
}
.genders {