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

Added double thumb slider for boob size.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-03-03 02:18:36 +01:00
parent 4e6f19d620
commit e3b1934653
5 changed files with 276 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

5
assets/components/form/checkbox.vue
View File

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

189
assets/components/form/range.vue Normal file
View File

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