Added double thumb slider for boob size.

assets/components/actors/actors.vue

@@ -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="filter-split">
-									<span
+									<Checkbox
-										class="range-label"
+										:checked="boobSizeRequired"
-										@click="boobSize = 0"
+										class="checkbox"
-									><Icon icon="boobs-small" /></span>
+										@change="(checked) => updateValue('boobSizeRequired', checked)"
+									/>
 
-									<input
+									<Range
-										v-model="boobSize"
+										:min="0"
-										class="range"
+										:max="boobSizes.length - 1"
-										type="range"
+										:value="boobSize"
-										min="0"
+										:disabled="!boobSizeRequired"
-										max="6"
+										@change="(sizeRange) => updateValue('boobSize', sizeRange)"
-										@change="updateFilters"
 									>
+										<template v-slot:start>
+											<span class="range-label"><Icon icon="boobs-small" /></span>
+										</template>
 
-									<span
+										<template v-slot:end>
-										class="range-label on"
+											<span class="range-label on"><Icon icon="boobs-big" /></span>
-										@click="boobSize = 10"
+										</template>
-									><Icon icon="boobs-big" /></span>
+									</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 {
+		.toggle {
-			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--enabled-background) calc(.75rem + 1px));
+			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 {
+		.toggle {
-			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--disabled-background) calc(.75rem + 1px));
+			background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--disabled-background) calc(.625rem + 1px));
 
 			&::-webkit-slider-thumb {
 				background: var(--disabled);
 			}
-		}
-	}
 
-	.icon {
+			&::-moz-range-thumb {
-		fill: var(--shadow);
+				background: var(--disabled);
-		width: 1.5rem;
+			}
-		height: 1.5rem;
-
-		&:hover {
-			fill: var(--shadow-strong);
 		}
 	}
 }
 
-.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,
+.toggle {
-.range-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);
+		background: var(--darken-hint);
-		width: 1.5rem;
+		width: 1.25rem;
-		height: 1.5rem;
+		height: 1.25rem;
-		border-radius: .75rem;
+		border-radius: .625rem;
 	}
-}
 
-.range-toggle {
+	&::-moz-range-thumb {
-	background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--shadow-hint) calc(.75rem + 1px));
+		appearance: none;
-
+		background: var(--darken-hint);
-	&::-webkit-slider-thumb {
+		width: 1.25rem;
-		background: var(--shadow-hint);
+		height: 1.25rem;
+		border: none;
+		border-radius: .625rem;
 	}
 }
 

assets/components/form/checkbox.vue

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

assets/components/form/range.vue

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

assets/css/_theme.scss

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

assets/js/actors/actions.js

@@ -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: {
+						${cupFilter}
-							in: $cup
-						}
-						${genderFilter}
                     }
                 ) {
 					totalCount
@@ -354,7 +351,6 @@ function initActorActions(store, router) {
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 			limit,
 			letter,
-			cup,
 			naturalBoobs,
 		});