Added double thumb slider for boob size.
This commit is contained in:
DebaucheryLibrarian
parent
4e6f19d620
commit
e3b1934653
|
|
@ -65,28 +65,31 @@
|
|||
<span class="filter-trigger"><Icon icon="boobs" />Boobs</span>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section">
|
||||
<div class="filter-section boobsize">
|
||||
<label class="filter-label off">Size</label>
|
||||
|
||||
<span class="range-container">
|
||||
<span
|
||||
class="range-label"
|
||||
@click="boobSize = 0"
|
||||
><Icon icon="boobs-small" /></span>
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="boobSizeRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('boobSizeRequired', checked)"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-model="boobSize"
|
||||
class="range"
|
||||
type="range"
|
||||
min="0"
|
||||
max="6"
|
||||
@change="updateFilters"
|
||||
<Range
|
||||
:min="0"
|
||||
:max="boobSizes.length - 1"
|
||||
:value="boobSize"
|
||||
:disabled="!boobSizeRequired"
|
||||
@change="(sizeRange) => updateValue('boobSize', sizeRange)"
|
||||
>
|
||||
<template v-slot:start>
|
||||
<span class="range-label"><Icon icon="boobs-small" /></span>
|
||||
</template>
|
||||
|
||||
<span
|
||||
class="range-label on"
|
||||
@click="boobSize = 10"
|
||||
><Icon icon="boobs-big" /></span>
|
||||
<template v-slot:end>
|
||||
<span class="range-label on"><Icon icon="boobs-big" /></span>
|
||||
</template>
|
||||
</Range>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -95,25 +98,24 @@
|
|||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
|
||||
class="range-container"
|
||||
class="toggle-container noclick"
|
||||
>
|
||||
<span
|
||||
class="range-label off"
|
||||
class="toggle-label off"
|
||||
@click="updateValue('naturalBoobs', 0)"
|
||||
>no</span>
|
||||
|
||||
<input
|
||||
v-model="naturalBoobs"
|
||||
class="range-toggle"
|
||||
class="toggle"
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
value="1"
|
||||
@change="updateFilters"
|
||||
>
|
||||
|
||||
<span
|
||||
class="range-label on"
|
||||
class="toggle-label on"
|
||||
@click="updateValue('naturalBoobs', 2)"
|
||||
>yes</span>
|
||||
</span>
|
||||
|
|
@ -146,10 +148,12 @@
|
|||
<script>
|
||||
import Actor from './tile.vue';
|
||||
import Gender from './gender.vue';
|
||||
import Checkbox from '../form/checkbox.vue';
|
||||
import Range from '../form/range.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
||||
const toggleValues = [true, undefined, false];
|
||||
const cupSizes = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
|
||||
const boobSizes = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
|
||||
|
||||
function updateFilters() {
|
||||
this.$router.push({
|
||||
|
|
@ -157,7 +161,7 @@ function updateFilters() {
|
|||
params: this.$route.params,
|
||||
query: {
|
||||
naturalBoobs: toggleValues[this.naturalBoobs],
|
||||
cup: [cupSizes[this.boobSize]],
|
||||
bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -175,7 +179,7 @@ async function fetchActors(scroll) {
|
|||
pageNumber: Number(this.$route.params.pageNumber) || 1,
|
||||
letter: this.letter.replace('all', ''),
|
||||
gender: curatedGender === 'other' ? null : curatedGender,
|
||||
cup: [...cupSizes.slice(this.boobSize)],
|
||||
boobSize: this.boobSizeRequired && this.boobSizes.slice(this.boobSize[0], this.boobSize[1]),
|
||||
naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
|
||||
});
|
||||
|
||||
|
|
@ -212,11 +216,13 @@ async function mounted() {
|
|||
export default {
|
||||
components: {
|
||||
Actor,
|
||||
Checkbox,
|
||||
Gender,
|
||||
Range,
|
||||
Pagination,
|
||||
},
|
||||
data() {
|
||||
const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.naturalBoobs);
|
||||
const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.nb);
|
||||
|
||||
return {
|
||||
actors: [],
|
||||
|
|
@ -224,7 +230,9 @@ export default {
|
|||
totalCount: 0,
|
||||
limit: 50,
|
||||
letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
|
||||
boobSize: cupSizes.indexOf(this.$route.query.cup || 'A'),
|
||||
boobSizes,
|
||||
boobSize: this.$route.query.bs?.split(',') || [0, boobSizes.length - 1],
|
||||
boobSizeRequired: this.$route.query.bs || false,
|
||||
naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
|
||||
};
|
||||
},
|
||||
|
|
@ -307,7 +315,6 @@ export default {
|
|||
border-right: solid 1px var(--shadow-hint);
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.letter,
|
||||
.gender {
|
||||
display: inline-block;
|
||||
|
|
@ -389,7 +396,7 @@ export default {
|
|||
justify-content: center;
|
||||
padding: 0 .5rem;
|
||||
margin: .5rem 0 0 0;
|
||||
color: var(--shadow);
|
||||
color: var(--darken);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
|
|
@ -398,54 +405,64 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.filter-split {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-container,
|
||||
.range-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
|
||||
&.on {
|
||||
.range-label.on {
|
||||
.toggle-label.on {
|
||||
color: var(--enabled);
|
||||
}
|
||||
|
||||
.range-toggle {
|
||||
background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--enabled-background) calc(.75rem + 1px));
|
||||
.toggle {
|
||||
background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--enabled-background) calc(.625rem + 1px));
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: var(--enabled);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background: var(--enabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.off {
|
||||
.range-label.off {
|
||||
.toggle-label.off {
|
||||
color: var(--disabled);
|
||||
}
|
||||
|
||||
.range-toggle {
|
||||
background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--disabled-background) calc(.75rem + 1px));
|
||||
.toggle {
|
||||
background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--disabled-background) calc(.625rem + 1px));
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: var(--disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
fill: var(--shadow-strong);
|
||||
&::-moz-range-thumb {
|
||||
background: var(--disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.range-label {
|
||||
.toggle-label {
|
||||
width: 1.5rem;
|
||||
padding: 0 .5rem;
|
||||
color: var(--shadow);
|
||||
color: var(--darken);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
|
|
@ -466,30 +483,30 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.range,
|
||||
.range-toggle {
|
||||
.toggle {
|
||||
flex-grow: 1;
|
||||
height: 1.5rem;
|
||||
height: 1.25rem;
|
||||
appearance: none;
|
||||
padding: 2px;
|
||||
border-radius: 1rem;
|
||||
background: var(--shadow-hint);
|
||||
background: radial-gradient(circle, var(--darken-hint) .625rem, var(--darken-hint) calc(.625rem + 1px));
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
background: var(--primary);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: .75rem;
|
||||
background: var(--darken-hint);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.range-toggle {
|
||||
background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--shadow-hint) calc(.75rem + 1px));
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: var(--shadow-hint);
|
||||
&::-moz-range-thumb {
|
||||
appearance: none;
|
||||
background: var(--darken-hint);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: none;
|
||||
border-radius: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<label class="check-container noselect">
|
||||
<span class="check-label">{{ label }}</span>
|
||||
<span
|
||||
v-if="label"
|
||||
class="check-label"
|
||||
>{{ label }}</span>
|
||||
|
||||
<input
|
||||
v-show="false"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<div class="range-container">
|
||||
<div
|
||||
class="label label-start"
|
||||
:class="{ disabled }"
|
||||
@click="setValue('valueA', min)"
|
||||
>
|
||||
<slot name="start" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="range"
|
||||
:class="{ disabled }"
|
||||
:style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }"
|
||||
>
|
||||
<input
|
||||
v-model="valueA"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:data-value="valueA"
|
||||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@change="emit"
|
||||
>
|
||||
|
||||
<input
|
||||
v-model="valueB"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:data-value="valueB"
|
||||
:disabled="disabled"
|
||||
type="range"
|
||||
class="slider"
|
||||
@change="emit"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="label label-end"
|
||||
:class="{ disabled }"
|
||||
@click="setValue('valueB', max)"
|
||||
>
|
||||
<slot name="end" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function minValue() {
|
||||
return Math.min(this.valueA, this.valueB);
|
||||
}
|
||||
|
||||
function maxValue() {
|
||||
return Math.max(this.valueA, this.valueB);
|
||||
}
|
||||
|
||||
function minPercentage() {
|
||||
return (this.minValue / this.max) * 100;
|
||||
}
|
||||
|
||||
function maxPercentage() {
|
||||
return (this.maxValue / this.max) * 100;
|
||||
}
|
||||
|
||||
function emit() {
|
||||
this.$emit('change', [this.minValue, this.maxValue]);
|
||||
}
|
||||
|
||||
function setValue(prop, value) {
|
||||
if (!this.disabled) {
|
||||
this[prop] = value;
|
||||
this.emit();
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [3, 7],
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
data() {
|
||||
return {
|
||||
valueA: this.value[0],
|
||||
valueB: this.value[1],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
minValue,
|
||||
maxValue,
|
||||
minPercentage,
|
||||
maxPercentage,
|
||||
},
|
||||
methods: {
|
||||
emit,
|
||||
setValue,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin thumb {
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--slider-thumb);
|
||||
pointer-events: visible;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
}
|
||||
|
||||
.range-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.range {
|
||||
--slider-track: var(--shadow-hint);
|
||||
--slider-range: var(--primary-faded);
|
||||
--slider-thumb: var(--primary);
|
||||
|
||||
position: relative;
|
||||
height: 1.25rem;
|
||||
flex-grow: 1;
|
||||
border-radius: .625rem;
|
||||
|
||||
&.disabled {
|
||||
--slider-range: var(--shadow-weak);
|
||||
--slider-thumb: var(--disabled-handle);
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
background: none;
|
||||
outline: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
@include thumb;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
@include thumb;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 .5rem;
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
::v-deep(.icon) {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.icon) {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,6 +8,7 @@ $breakpoint4: 1500px;
|
|||
/* --primary: #ff886c; */
|
||||
--primary: #ff6c88;
|
||||
--primary-strong: #ff4166;
|
||||
--primary-faded: #ffdfee;
|
||||
|
||||
--text-dark: #222;
|
||||
--text-light: #fff;
|
||||
|
|
@ -42,6 +43,7 @@ $breakpoint4: 1500px;
|
|||
--enabled-background: rgba(0, 255, 0, .1);
|
||||
--disabled: #c20;
|
||||
--disabled-background: rgba(255, 0, 0, .1);
|
||||
--disabled-handle: #aaa;
|
||||
}
|
||||
|
||||
.light {
|
||||
|
|
|
|||
|
|
@ -267,20 +267,19 @@ function initActorActions(store, router) {
|
|||
letter,
|
||||
gender,
|
||||
naturalBoobs,
|
||||
cup,
|
||||
boobSize,
|
||||
}) {
|
||||
const genderFilter = (gender === null && 'gender: { isNull: true }')
|
||||
|| (gender === 'all' && ' ')
|
||||
|| `gender: { equalTo: "${gender}" }`;
|
||||
|
||||
console.log(cup);
|
||||
const cupFilter = boobSize ? `cup: { in: [${boobSize.map(size => `"${size}"`)}] }` : '';
|
||||
|
||||
const { connection: { actors, totalCount } } = await graphql(`
|
||||
query Actors(
|
||||
$limit: Int,
|
||||
$offset: Int = 0,
|
||||
$letter: String! = "",
|
||||
$cup: [String!]
|
||||
$naturalBoobs: Boolean,
|
||||
) {
|
||||
connection: actorsConnection(
|
||||
|
|
@ -294,13 +293,11 @@ function initActorActions(store, router) {
|
|||
name: {
|
||||
startsWith: $letter
|
||||
}
|
||||
${genderFilter}
|
||||
naturalBoobs: {
|
||||
equalTo: $naturalBoobs
|
||||
}
|
||||
cup: {
|
||||
in: $cup
|
||||
}
|
||||
${genderFilter}
|
||||
${cupFilter}
|
||||
}
|
||||
) {
|
||||
totalCount
|
||||
|
|
@ -354,7 +351,6 @@ function initActorActions(store, router) {
|
|||
offset: Math.max(0, (pageNumber - 1)) * limit,
|
||||
limit,
|
||||
letter,
|
||||
cup,
|
||||
naturalBoobs,
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue