Added height and weight filters to actors overview.
This commit is contained in:
DebaucheryLibrarian
parent
cdb47066cc
commit
74e33303ed
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section boobsize">
|
||||
<label class="filter-label off">Size</label>
|
||||
<label class="filter-label off">Size ({{ boobSize[0] }} - {{ boobSize[1] }})</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
|
|
@ -81,7 +81,8 @@
|
|||
:value="boobSize"
|
||||
:values="boobSizes"
|
||||
:disabled="!boobSizeRequired"
|
||||
@change="(sizeRange) => updateValue('boobSize', sizeRange)"
|
||||
@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>
|
||||
|
|
@ -124,6 +125,62 @@
|
|||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Tooltip class="filter boobs">
|
||||
<span class="filter-trigger"><Icon icon="rulers" />Physique</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section">
|
||||
<label class="filter-label off">Height ({{ height[0] }} - {{ height[1] }} cm)</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="heightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('heightRequired', checked)"
|
||||
/>
|
||||
|
||||
<Range
|
||||
:min="50"
|
||||
:max="250"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
@input="(heightRange) => updateValue('height', heightRange, false)"
|
||||
@change="(heightRange) => updateValue('height', heightRange, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="shorts" /></template>
|
||||
<template v-slot:end><Icon icon="pants" /></template>
|
||||
</Range>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label off">Weight ({{ weight[0] }} - {{ weight[1] }} kg)</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="weightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('weightRequired', checked)"
|
||||
/>
|
||||
|
||||
<Range
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="weight"
|
||||
:disabled="!weightRequired"
|
||||
@input="(weightRange) => updateValue('weight', weightRange, false)"
|
||||
@change="(weightRange) => updateValue('weight', weightRange, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="user6" /></template>
|
||||
<template v-slot:end><Icon icon="user3" /></template>
|
||||
</Range>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
@ -163,13 +220,18 @@ function updateFilters() {
|
|||
query: {
|
||||
naturalBoobs: toggleValues[this.naturalBoobs],
|
||||
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
|
||||
h: this.heightRequired ? this.height.join(',') : undefined,
|
||||
w: this.weightRequired ? this.weight.join(',') : undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function updateValue(prop, value) {
|
||||
function updateValue(prop, value, load = true) {
|
||||
this[prop] = value;
|
||||
this.updateFilters();
|
||||
|
||||
if (load) {
|
||||
this.updateFilters();
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchActors(scroll) {
|
||||
|
|
@ -182,6 +244,8 @@ async function fetchActors(scroll) {
|
|||
gender: curatedGender === 'other' ? null : curatedGender,
|
||||
boobSize: this.boobSizeRequired && this.boobSize,
|
||||
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
|
||||
height: this.heightRequired && this.height,
|
||||
weight: this.weightRequired && this.weight,
|
||||
});
|
||||
|
||||
this.actors = actors;
|
||||
|
|
@ -235,6 +299,10 @@ export default {
|
|||
boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
|
||||
boobSizeRequired: !!this.$route.query.bs,
|
||||
naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
|
||||
height: this.$route.query.h?.split(',').map(Number) || [50, 250],
|
||||
heightRequired: !!this.$route.query.h,
|
||||
weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
|
||||
weightRequired: !!this.$route.query.w,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -388,6 +456,11 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
width: 15rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -408,7 +481,7 @@ export default {
|
|||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 .5rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@change="emit"
|
||||
@input="emit('input')"
|
||||
@change="emit('change')"
|
||||
@click.stop
|
||||
>
|
||||
|
||||
|
|
@ -34,7 +35,8 @@
|
|||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@change="emit"
|
||||
@input="emit('input')"
|
||||
@change="emit('change')"
|
||||
@click.stop
|
||||
>
|
||||
</div>
|
||||
|
|
@ -59,20 +61,20 @@ function maxValue() {
|
|||
}
|
||||
|
||||
function minPercentage() {
|
||||
return (this.minValue / this.max) * 100;
|
||||
return ((this.minValue - this.min) / (this.max - this.min)) * 100;
|
||||
}
|
||||
|
||||
function maxPercentage() {
|
||||
return (this.maxValue / this.max) * 100;
|
||||
return ((this.maxValue - this.min) / (this.max - this.min)) * 100;
|
||||
}
|
||||
|
||||
function emit() {
|
||||
function emit(type = 'change') {
|
||||
if (this.values) {
|
||||
this.$emit('change', [this.values[this.minValue], this.values[this.maxValue]]);
|
||||
this.$emit(type, [this.values[this.minValue], this.values[this.maxValue]]);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('change', [this.minValue, this.maxValue]);
|
||||
this.$emit(type, [this.minValue, this.maxValue]);
|
||||
}
|
||||
|
||||
function setNearest(event) {
|
||||
|
|
@ -115,7 +117,7 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
emits: ['change', 'input'],
|
||||
data() {
|
||||
if (this.values) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,33 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>user6</title>
|
||||
<path d="M11.5 5.5c0 2.485-1.567 4.5-3.5 4.5s-3.5-2.015-3.5-4.5c0-2.485 1.567-4.5 3.5-4.5s3.5 2.015 3.5 4.5z"></path>
|
||||
<path d="M7 8.922h2v2.078h-2v-2.078z"></path>
|
||||
<path d="M1 12c0-1.105 3.134-2 7-2s7 0.895 7 2z"></path>
|
||||
<path d="M1 12h14v2h-14v-2z"></path>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
id="svg12">
|
||||
<metadata
|
||||
id="metadata18">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>user6</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs16" />
|
||||
<title
|
||||
id="title2">user6</title>
|
||||
<path
|
||||
id="path4"
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke:none;opacity:1"
|
||||
d="M 8 1 C 6.067 1 4.5 3.015 4.5 5.5 C 4.5 7.535206 5.5576181 9.2350589 7 9.7910156 L 7 10.029297 C 3.6121657 10.168998 1 10.992951 1 12 L 1 14 L 15 14 L 15 12 C 15 10.992951 12.387834 10.168998 9 10.029297 L 9 9.7910156 C 10.442382 9.2350589 11.5 7.535206 11.5 5.5 C 11.5 3.015 9.933 1 8 1 z " />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 2.4 KiB |
|
|
@ -268,12 +268,16 @@ function initActorActions(store, router) {
|
|||
gender,
|
||||
naturalBoobs,
|
||||
boobSize,
|
||||
height,
|
||||
weight,
|
||||
}) {
|
||||
const genderFilter = (gender === null && 'gender: { isNull: true }')
|
||||
|| (gender === 'all' && ' ')
|
||||
|| `gender: { equalTo: "${gender}" }`;
|
||||
|
||||
const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
|
||||
const heightFilter = height ? `height: { greaterThanOrEqualTo: ${height[0]}, lessThanOrEqualTo: ${height[1]} }` : '';
|
||||
const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
|
||||
|
||||
const { connection: { actors, totalCount } } = await graphql(`
|
||||
query Actors(
|
||||
|
|
@ -298,6 +302,8 @@ function initActorActions(store, router) {
|
|||
equalTo: $naturalBoobs
|
||||
}
|
||||
${cupFilter}
|
||||
${heightFilter}
|
||||
${weightFilter}
|
||||
}
|
||||
) {
|
||||
totalCount
|
||||
|
|
|
|||
Loading…
Reference in New Issue