boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Highlighting filter trigger when filter is applied. Using binary number as query boolean.

This commit is contained in:
DebaucheryLibrarian 2021-03-03 20:27:45 +01:00
parent 6742bf7d48
commit d94e0ac8fc
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,10 @@
<ul class="nolist"> <ul class="nolist">
<li> <li>
<Tooltip class="filter boobs"> <Tooltip class="filter boobs">
<span class="filter-trigger"><Icon icon="boobs" />Boobs</span> <span
class="filter-trigger"
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
><Icon icon="boobs" />Boobs</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<div class="filter-section boobsize"> <div class="filter-section boobsize">
@ -117,7 +120,7 @@
><Icon icon="leaf" /></span> ><Icon icon="leaf" /></span>
<input <input
v-model="naturalBoobs" v-model.number="naturalBoobs"
class="toggle" class="toggle"
type="range" type="range"
min="0" min="0"
@ -137,7 +140,10 @@
<li> <li>
<Tooltip class="filter boobs"> <Tooltip class="filter boobs">
<span class="filter-trigger"><Icon icon="rulers" />Physique</span> <span
class="filter-trigger"
:class="{ enabled: heightRequired || weightRequired }"
><Icon icon="rulers" />Physique</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<div class="filter-section"> <div class="filter-section">
@ -237,7 +243,7 @@ import Checkbox from '../form/checkbox.vue';
import Range from '../form/range.vue'; import Range from '../form/range.vue';
import Pagination from '../pagination/pagination.vue'; import Pagination from '../pagination/pagination.vue';
const toggleValues = [true, undefined, false]; const toggleValues = [true, null, false];
const boobSizes = 'ABCDEFGHZ'.split(''); const boobSizes = 'ABCDEFGHZ'.split('');
function updateFilters() { function updateFilters() {
@ -245,7 +251,7 @@ function updateFilters() {
name: 'actors', name: 'actors',
params: this.$route.params, params: this.$route.params,
query: { query: {
naturalBoobs: toggleValues[this.naturalBoobs], nb: this.naturalBoobs !== 1 ? this.naturalBoobs : undefined,
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined, bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
h: this.heightRequired ? this.height.join(',') : undefined, h: this.heightRequired ? this.height.join(',') : undefined,
w: this.weightRequired ? this.weight.join(',') : undefined, w: this.weightRequired ? this.weight.join(',') : undefined,
@ -314,8 +320,6 @@ export default {
Pagination, Pagination,
}, },
data() { data() {
const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.nb);
return { return {
actors: [], actors: [],
pageTitle: null, pageTitle: null,
@ -325,7 +329,7 @@ export default {
boobSizes, boobSizes,
boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'], boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
boobSizeRequired: !!this.$route.query.bs, boobSizeRequired: !!this.$route.query.bs,
naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1, naturalBoobs: Number(this.$route.query.nb) || 1,
height: this.$route.query.h?.split(',').map(Number) || [50, 220], height: this.$route.query.h?.split(',').map(Number) || [50, 220],
heightRequired: !!this.$route.query.h, heightRequired: !!this.$route.query.h,
weight: this.$route.query.w?.split(',').map(Number) || [30, 200], weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
@ -481,6 +485,14 @@ export default {
fill: var(--shadow-strong); fill: var(--shadow-strong);
} }
} }
&.enabled {
color: var(--primary);
.icon {
fill: var(--primary);
}
}
} }
.filter-section { .filter-section {

4
assets/components/form/range.vue
View File

@ -15,7 +15,7 @@
@click="setNearest" @click="setNearest"
> >
<input <input
v-model="valueA" v-model.number="valueA"
:min="min" :min="min"
:max="max" :max="max"
:data-value="valueA" :data-value="valueA"
@ -28,7 +28,7 @@
> >
<input <input
v-model="valueB" v-model.number="valueB"
:min="min" :min="min"
:max="max" :max="max"
:data-value="valueB" :data-value="valueB"