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

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

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