Using range component for all actor range filters.
This commit is contained in:
DebaucheryLibrarian
parent
5c6b5a0668
commit
4a963885bc
|
|
@ -65,7 +65,7 @@
|
|||
<span
|
||||
class="filter-trigger"
|
||||
:class="{ enabled: ageRequired }"
|
||||
><Icon icon="cake" />Age</span>
|
||||
><Icon icon="vcard" />Age</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<RangeFilter
|
||||
|
|
@ -74,7 +74,6 @@
|
|||
:max="100"
|
||||
:value="age"
|
||||
:disabled="!ageRequired"
|
||||
:allow-enable="true"
|
||||
@enable="(checked) => updateValue('ageRequired', checked, true)"
|
||||
@input="(range) => updateValue('age', range, false)"
|
||||
@change="(range) => updateValue('age', range, true)"
|
||||
|
|
@ -87,51 +86,27 @@
|
|||
</li>
|
||||
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<Tooltip class="filter">
|
||||
<span
|
||||
class="filter-trigger"
|
||||
class="filter-trigger boobs"
|
||||
:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
|
||||
><Icon icon="boobs" />Boobs</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section boobsize">
|
||||
<label class="filter-label off noselect">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="boobSizeRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('boobSizeRequired', checked)"
|
||||
/>Size
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="boobSizeRequired"
|
||||
class="label-values"
|
||||
>({{ boobSize[0] }} - {{ boobSize[1] }})</span>
|
||||
</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>
|
||||
<RangeFilter
|
||||
label="size"
|
||||
:min="0"
|
||||
:max="boobSizes.length - 1"
|
||||
:value="boobSize"
|
||||
:values="boobSizes"
|
||||
:disabled="!boobSizeRequired"
|
||||
@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
|
||||
@input="(range) => updateValue('boobSize', range, false)"
|
||||
@change="(range) => updateValue('boobSize', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="boobs-small" /></template>
|
||||
<template v-slot:end><Icon icon="boobs-big" /></template>
|
||||
</RangeFilter>
|
||||
|
||||
<div class="filter-section">
|
||||
<span class="filter-label">Enhanced</span>
|
||||
|
|
@ -172,71 +147,35 @@
|
|||
><Icon icon="rulers" />Physique</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section">
|
||||
<label class="filter-label noselect">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="heightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('heightRequired', checked)"
|
||||
/>Height
|
||||
</span>
|
||||
<RangeFilter
|
||||
label="height"
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
unit="cm"
|
||||
@enable="(checked) => updateValue('heightRequired', checked, true)"
|
||||
@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
|
||||
v-if="heightRequired"
|
||||
class="label-values"
|
||||
>({{ height[0] }} - {{ height[1] }} cm)</span>
|
||||
</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Range
|
||||
:min="50"
|
||||
:max="220"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
:allow-enable="true"
|
||||
@enable="heightRequired = true"
|
||||
@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>
|
||||
<RangeFilter
|
||||
label="weight"
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="weight"
|
||||
:disabled="!weightRequired"
|
||||
unit="kg"
|
||||
@enable="(checked) => updateValue('weightRequired', checked, true)"
|
||||
@input="(range) => updateValue('weight', range, false)"
|
||||
@change="(range) => updateValue('weight', range, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="meter-slow" /></template>
|
||||
<template v-slot:end><Icon icon="meter-fast" /></template>
|
||||
</RangeFilter>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
|
|
@ -265,8 +204,6 @@
|
|||
<script>
|
||||
import Actor from './tile.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 Pagination from '../pagination/pagination.vue';
|
||||
|
||||
|
|
@ -343,9 +280,7 @@ async function mounted() {
|
|||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Checkbox,
|
||||
Gender,
|
||||
Range,
|
||||
RangeFilter,
|
||||
Pagination,
|
||||
},
|
||||
|
|
@ -447,6 +382,7 @@ export default {
|
|||
border-right: solid 1px var(--shadow-hint);
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.letter,
|
||||
.gender {
|
||||
display: inline-block;
|
||||
|
|
@ -504,9 +440,9 @@ export default {
|
|||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0 .5rem 0 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: -.1rem .75rem 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -527,10 +463,13 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
width: 15rem;
|
||||
max-width: 100%;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
.label-values {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.filter-split {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
|
|
@ -544,24 +483,8 @@ export default {
|
|||
.label {
|
||||
display: inline-flex;
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@
|
|||
</span>
|
||||
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="label-values"
|
||||
>({{ value[0] }} - {{ value[1] }} {{ unit }})</span>
|
||||
>({{ value[0] }} - {{ value[1] }}<template v-if="unit"> {{ unit }}</template>)</span>
|
||||
</label>
|
||||
|
||||
<span class="filter-split">
|
||||
|
|
@ -19,8 +20,9 @@
|
|||
:min="min"
|
||||
:max="max"
|
||||
:value="value"
|
||||
:values="values"
|
||||
:disabled="disabled"
|
||||
:allow-enable="true"
|
||||
:allow-enable="allowEnable"
|
||||
@enable="$emit('enable', true)"
|
||||
@input="(range) => $emit('input', range)"
|
||||
@change="(range) => $emit('change', range)"
|
||||
|
|
@ -50,6 +52,10 @@ export default {
|
|||
type: Array,
|
||||
default: () => [0, 10],
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export default {
|
|||
},
|
||||
allowEnable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['change', 'input', 'enable'],
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import config from 'config';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { graphql, get } from '../api';
|
||||
import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
|
||||
import { curateActor, curateRelease } from '../curate';
|
||||
import dayjs from 'dayjs';
|
||||
import getDateRange from '../get-date-range';
|
||||
|
||||
function initActorActions(store, router) {
|
||||
|
|
@ -300,8 +301,6 @@ function initActorActions(store, router) {
|
|||
const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
|
||||
const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
|
||||
|
||||
console.log(ageFilter);
|
||||
|
||||
const { connection: { actors, totalCount } } = await graphql(`
|
||||
query Actors(
|
||||
$limit: Int,
|
||||
|
|
|
|||
Loading…
Reference in New Issue