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

Improved actor filter layout and behavior.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-03-03 19:13:09 +01:00
parent 74e33303ed
commit 21ec821b8c
9 changed files with 169 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,21 +66,30 @@
<template v-slot:tooltip>
<div class="filter-section boobsize">
<label class="filter-label off">Size ({{ boobSize[0] }} - {{ boobSize[1] }})</label>
<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">
<Checkbox
:checked="boobSizeRequired"
class="checkbox"
@change="(checked) => updateValue('boobSizeRequired', checked)"
/>
<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)"
>
@@ -96,7 +105,7 @@
</div>
<div class="filter-section">
<label class="filter-label">Enhanced</label>
<span class="filter-label">Enhanced</span>
<span
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
@@ -105,7 +114,7 @@
<span
class="toggle-label off"
@click="updateValue('naturalBoobs', 0)"
>no</span>
><Icon icon="leaf" /></span>
<input
v-model="naturalBoobs"
@@ -119,7 +128,7 @@
<span
class="toggle-label on"
@click="updateValue('naturalBoobs', 2)"
>yes</span>
><Icon icon="magic-wand2" /></span>
</span>
</div>
</template>
@@ -132,49 +141,67 @@
<template v-slot:tooltip>
<div class="filter-section">
<label class="filter-label off">Height ({{ height[0] }} - {{ height[1] }} cm)</label>
<label class="filter-label noselect">
<span class="label">
<Checkbox
:checked="heightRequired"
class="checkbox"
@change="(checked) => updateValue('heightRequired', checked)"
/>Height
</span>
<span
v-if="heightRequired"
class="label-values"
>({{ height[0] }} - {{ height[1] }} cm)</span>
</label>
<span class="filter-split">
<Checkbox
:checked="heightRequired"
class="checkbox"
@change="(checked) => updateValue('heightRequired', checked)"
/>
<Range
:min="50"
:max="250"
: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="shorts" /></template>
<template v-slot:end><Icon icon="pants" /></template>
<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 off">Weight ({{ weight[0] }} - {{ weight[1] }} kg)</label>
<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">
<Checkbox
:checked="weightRequired"
class="checkbox"
@change="(checked) => updateValue('weightRequired', checked)"
/>
<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="user6" /></template>
<template v-slot:end><Icon icon="user3" /></template>
<template v-slot:start><Icon icon="meter-slow" /></template>
<template v-slot:end><Icon icon="meter-fast" /></template>
</Range>
</span>
</div>
@@ -459,30 +486,38 @@ export default {
.filter-section {
width: 15rem;
max-width: 100%;
border-bottom: solid 1px var(--darken-hint);
}
.filter-label {
display: flex;
justify-content: center;
padding: 0 .5rem;
margin: .5rem 0 0 0;
justify-content: space-between;
padding: .75rem .5rem .5rem .5rem;
color: var(--darken);
font-weight: bold;
font-size: .9rem;
.label {
display: inline-flex;
align-items: center;
}
.checkbox {
margin: 0 .75rem 0 0;
}
.icon {
margin: 0 .5rem 0 0;
}
}
.label-values {
font-weight: normal;
}
.filter-split {
display: flex;
align-items: center;
.checkbox {
display: inline-block;
padding: 0 .5rem;
}
}
.toggle-container,
@@ -495,6 +530,10 @@ export default {
&.on {
.toggle-label.on {
color: var(--enabled);
.icon {
fill: var(--enabled);
}
}
.toggle {
@@ -513,6 +552,10 @@ export default {
&.off {
.toggle-label.off {
color: var(--disabled);
.icon {
fill: var(--disabled);
}
}
.toggle {
@@ -530,7 +573,10 @@ export default {
}
.toggle-label {
width: 1.5rem;
display: inline-flex;
justify-content: center;
min-width: 1.5rem;
flex-shrink: 0;
padding: 0 .5rem;
color: var(--darken);
font-weight: bold;
@@ -540,20 +586,33 @@ export default {
text-align: right;
}
.icon {
fill: var(--darken);
}
&:hover {
cursor: pointer;
&.on {
color: var(--enabled);
.icon {
fill: var(--enabled);
}
}
&.off {
color: var(--disabled);
.icon {
fill: var(--disabled);
}
}
}
}
.toggle {
width: 0;
flex-grow: 1;
height: 1.25rem;
appearance: none;