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

Using range component for all actor range filters.

This commit is contained in:
DebaucheryLibrarian 2021-03-03 22:23:46 +01:00
parent 5c6b5a0668
commit 4a963885bc
4 changed files with 68 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@
<span <span
class="filter-trigger" class="filter-trigger"
:class="{ enabled: ageRequired }" :class="{ enabled: ageRequired }"
><Icon icon="cake" />Age</span> ><Icon icon="vcard" />Age</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<RangeFilter <RangeFilter
@ -74,7 +74,6 @@
:max="100" :max="100"
:value="age" :value="age"
:disabled="!ageRequired" :disabled="!ageRequired"
:allow-enable="true"
@enable="(checked) => updateValue('ageRequired', checked, true)" @enable="(checked) => updateValue('ageRequired', checked, true)"
@input="(range) => updateValue('age', range, false)" @input="(range) => updateValue('age', range, false)"
@change="(range) => updateValue('age', range, true)" @change="(range) => updateValue('age', range, true)"
@ -87,51 +86,27 @@
</li> </li>
<li> <li>
<Tooltip class="filter boobs"> <Tooltip class="filter">
<span <span
class="filter-trigger" class="filter-trigger boobs"
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }" :class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
><Icon icon="boobs" />Boobs</span> ><Icon icon="boobs" />Boobs</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<div class="filter-section boobsize"> <RangeFilter
<label class="filter-label off noselect"> label="size"
<span class="label"> :min="0"
<Checkbox :max="boobSizes.length - 1"
:checked="boobSizeRequired" :value="boobSize"
class="checkbox" :values="boobSizes"
@change="(checked) => updateValue('boobSizeRequired', checked)" :disabled="!boobSizeRequired"
/>Size @enable="(checked) => updateValue('boobSizeRequired', checked, true)"
</span> @input="(range) => updateValue('boobSize', range, false)"
@change="(range) => updateValue('boobSize', range, true)"
<span >
v-if="boobSizeRequired" <template v-slot:start><Icon icon="boobs-small" /></template>
class="label-values" <template v-slot:end><Icon icon="boobs-big" /></template>
>({{ boobSize[0] }} - {{ boobSize[1] }})</span> </RangeFilter>
</label>
<span class="filter-split">
<Range
:min="0"
:max="boobSizes.length - 1"
:value="boobSize"
:values="boobSizes"
:disabled="!boobSizeRequired"
:allow-enable="true"
@enable="boobSizeRequired = true"
@input="(sizeRange) => updateValue('boobSize', sizeRange, false)"
@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
>
<template v-slot:start>
<span class="range-label"><Icon icon="boobs-small" /></span>
</template>
<template v-slot:end>
<span class="range-label on"><Icon icon="boobs-big" /></span>
</template>
</Range>
</span>
</div>
<div class="filter-section"> <div class="filter-section">
<span class="filter-label">Enhanced</span> <span class="filter-label">Enhanced</span>
@ -172,71 +147,35 @@
><Icon icon="rulers" />Physique</span> ><Icon icon="rulers" />Physique</span>
<template v-slot:tooltip> <template v-slot:tooltip>
<div class="filter-section"> <RangeFilter
<label class="filter-label noselect"> label="height"
<span class="label"> :min="50"
<Checkbox :max="220"
:checked="heightRequired" :value="height"
class="checkbox" :disabled="!heightRequired"
@change="(checked) => updateValue('heightRequired', checked)" unit="cm"
/>Height @enable="(checked) => updateValue('heightRequired', checked, true)"
</span> @input="(range) => updateValue('height', range, false)"
@change="(range) => updateValue('height', range, true)"
>
<template v-slot:start><Icon icon="height-short" /></template>
<template v-slot:end><Icon icon="height" /></template>
</RangeFilter>
<span <RangeFilter
v-if="heightRequired" label="weight"
class="label-values" :min="30"
>({{ height[0] }} - {{ height[1] }} cm)</span> :max="200"
</label> :value="weight"
:disabled="!weightRequired"
<span class="filter-split"> unit="kg"
<Range @enable="(checked) => updateValue('weightRequired', checked, true)"
:min="50" @input="(range) => updateValue('weight', range, false)"
:max="220" @change="(range) => updateValue('weight', range, true)"
:value="height" >
:disabled="!heightRequired" <template v-slot:start><Icon icon="meter-slow" /></template>
:allow-enable="true" <template v-slot:end><Icon icon="meter-fast" /></template>
@enable="heightRequired = true" </RangeFilter>
@input="(heightRange) => updateValue('height', heightRange, false)"
@change="(heightRange) => updateValue('height', heightRange, true)"
>
<template v-slot:start><Icon icon="height-short" /></template>
<template v-slot:end><Icon icon="height" /></template>
</Range>
</span>
</div>
<div class="filter-section">
<label class="filter-label noselect">
<span class="label">
<Checkbox
:checked="weightRequired"
class="checkbox"
@change="(checked) => updateValue('weightRequired', checked)"
/>Weight
</span>
<span
v-if="weightRequired"
class="label-values"
>({{ weight[0] }} - {{ weight[1] }} kg)</span>
</label>
<span class="filter-split">
<Range
:min="30"
:max="200"
:value="weight"
:disabled="!weightRequired"
:allow-enable="true"
@enable="weightRequired = true"
@input="(weightRange) => updateValue('weight', weightRange, false)"
@change="(weightRange) => updateValue('weight', weightRange, true)"
>
<template v-slot:start><Icon icon="meter-slow" /></template>
<template v-slot:end><Icon icon="meter-fast" /></template>
</Range>
</span>
</div>
</template> </template>
</Tooltip> </Tooltip>
</li> </li>
@ -265,8 +204,6 @@
<script> <script>
import Actor from './tile.vue'; import Actor from './tile.vue';
import Gender from './gender.vue'; import Gender from './gender.vue';
import Checkbox from '../form/checkbox.vue';
import Range from '../form/range.vue';
import RangeFilter from './filter-range.vue'; import RangeFilter from './filter-range.vue';
import Pagination from '../pagination/pagination.vue'; import Pagination from '../pagination/pagination.vue';
@ -343,9 +280,7 @@ async function mounted() {
export default { export default {
components: { components: {
Actor, Actor,
Checkbox,
Gender, Gender,
Range,
RangeFilter, RangeFilter,
Pagination, Pagination,
}, },
@ -447,6 +382,7 @@ export default {
border-right: solid 1px var(--shadow-hint); border-right: solid 1px var(--shadow-hint);
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
} }
.letter, .letter,
.gender { .gender {
display: inline-block; display: inline-block;
@ -504,9 +440,9 @@ export default {
.icon { .icon {
fill: var(--shadow); fill: var(--shadow);
width: 1.5rem; width: 1rem;
height: 1.5rem; height: 1rem;
margin: 0 .5rem 0 0; margin: -.1rem .75rem 0 0;
} }
&:hover { &:hover {
@ -527,10 +463,13 @@ export default {
} }
} }
.filter-section { .label-values {
width: 15rem; font-weight: normal;
max-width: 100%; }
border-bottom: solid 1px var(--darken-hint);
.filter-split {
display: flex;
align-items: center;
} }
.filter-label { .filter-label {
@ -544,24 +483,8 @@ export default {
.label { .label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
text-transform: capitalize;
} }
.checkbox {
margin: 0 .75rem 0 0;
}
.icon {
margin: 0 .5rem 0 0;
}
}
.label-values {
font-weight: normal;
}
.filter-split {
display: flex;
align-items: center;
} }
.toggle-container, .toggle-container,

10
assets/components/actors/filter-range.vue
View File

@ -10,8 +10,9 @@
</span> </span>
<span <span
v-if="!disabled"
class="label-values" class="label-values"
>({{ value[0] }} - {{ value[1] }} {{ unit }})</span> >({{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template>)</span>
</label> </label>
<span class="filter-split"> <span class="filter-split">
@ -19,8 +20,9 @@
:min="min" :min="min"
:max="max" :max="max"
:value="value" :value="value"
:values="values"
:disabled="disabled" :disabled="disabled"
:allow-enable="true" :allow-enable="allowEnable"
@enable="$emit('enable', true)" @enable="$emit('enable', true)"
@input="(range) => $emit('input', range)" @input="(range) => $emit('input', range)"
@change="(range) => $emit('change', range)" @change="(range) => $emit('change', range)"
@ -50,6 +52,10 @@ export default {
type: Array, type: Array,
default: () => [0, 10], default: () => [0, 10],
}, },
values: {
type: Array,
default: null,
},
min: { min: {
type: Number, type: Number,
default: 0, default: 0,

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

@ -132,7 +132,7 @@ export default {
}, },
allowEnable: { allowEnable: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
emits: ['change', 'input', 'enable'], emits: ['change', 'input', 'enable'],

5
assets/js/actors/actions.js
View File

@ -1,8 +1,9 @@
import config from 'config'; import config from 'config';
import dayjs from 'dayjs';
import { graphql, get } from '../api'; import { graphql, get } from '../api';
import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments'; import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
import { curateActor, curateRelease } from '../curate'; import { curateActor, curateRelease } from '../curate';
import dayjs from 'dayjs';
import getDateRange from '../get-date-range'; import getDateRange from '../get-date-range';
function initActorActions(store, router) { function initActorActions(store, router) {
@ -300,8 +301,6 @@ function initActorActions(store, router) {
const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : ''; const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : ''; const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
console.log(ageFilter);
const { connection: { actors, totalCount } } = await graphql(` const { connection: { actors, totalCount } } = await graphql(`
query Actors( query Actors(
$limit: Int, $limit: Int,