Added height and weight filters to actors overview.

This commit is contained in:
DebaucheryLibrarian 2021-03-03 16:47:57 +01:00
parent cdb47066cc
commit 74e33303ed
4 changed files with 126 additions and 20 deletions

View File

@ -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,14 +220,19 @@ 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;
if (load) {
this.updateFilters();
}
}
async function fetchActors(scroll) {
const curatedGender = this.gender.replace('trans', 'transsexual');
@ -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;
}
}

View File

@ -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 {

View File

@ -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

View File

@ -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