assets/components/actors/actors.vue

@@ -65,31 +65,28 @@
 						<span class="filter-trigger"><Icon icon="boobs" />Boobs</span>
 
 						<template v-slot:tooltip>
-							<div class="filter-section boobsize">
+							<div class="filter-section">
 								<label class="filter-label off">Size</label>
 
-								<span class="filter-split">
+								<span class="range-container">
-									<Checkbox
+									<span
-										:checked="boobSizeRequired"
+										class="range-label"
-										class="checkbox"
+										@click="boobSize = 0"
-										@change="(checked) => updateValue('boobSizeRequired', checked)"
+									><Icon icon="boobs-small" /></span>
-									/>
 
-									<Range
+									<input
-										:min="0"
+										v-model="boobSize"
-										:max="boobSizes.length - 1"
+										class="range"
-										:value="boobSize"
+										type="range"
-										:disabled="!boobSizeRequired"
+										min="0"
-										@change="(sizeRange) => updateValue('boobSize', sizeRange)"
+										max="6"
+										@change="updateFilters"
 									>
-										<template v-slot:start>
-											<span class="range-label"><Icon icon="boobs-small" /></span>
-										</template>
 
-										<template v-slot:end>
+									<span
-											<span class="range-label on"><Icon icon="boobs-big" /></span>
+										class="range-label on"
-										</template>
+										@click="boobSize = 10"
-									</Range>
+									><Icon icon="boobs-big" /></span>
 								</span>
 							</div>
 
@@ -98,24 +95,25 @@
 
 								<span
 									:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
-									class="toggle-container noclick"
+									class="range-container"
 								>
 									<span
-										class="toggle-label off"
+										class="range-label off"
 										@click="updateValue('naturalBoobs', 0)"
 									>no</span>
 
 									<input
 										v-model="naturalBoobs"
-										class="toggle"
+										class="range-toggle"
 										type="range"
 										min="0"
 										max="2"
+										value="1"
 										@change="updateFilters"
 									>
 
 									<span
-										class="toggle-label on"
+										class="range-label on"
 										@click="updateValue('naturalBoobs', 2)"
 									>yes</span>
 								</span>
@@ -148,12 +146,10 @@
 <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 boobSizes = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+const cupSizes = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
 
 function updateFilters() {
 	this.$router.push({
@@ -161,7 +157,7 @@ function updateFilters() {
 		params: this.$route.params,
 		query: {
 			naturalBoobs: toggleValues[this.naturalBoobs],
-			bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
+			cup: [cupSizes[this.boobSize]],
 		},
 	});
 }
@@ -179,7 +175,7 @@ async function fetchActors(scroll) {
 		pageNumber: Number(this.$route.params.pageNumber) || 1,
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
-		boobSize: this.boobSizeRequired && this.boobSizes.slice(this.boobSize[0], this.boobSize[1]),
+		cup: [...cupSizes.slice(this.boobSize)],
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
 	});
 
@@ -216,13 +212,11 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
-		Checkbox,
 		Gender,
-		Range,
 		Pagination,
 	},
 	data() {
-		const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.nb);
+		const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.naturalBoobs);
 
 		return {
 			actors: [],
@@ -230,9 +224,7 @@ export default {
 			totalCount: 0,
 			limit: 50,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
-			boobSizes,
+			boobSize: cupSizes.indexOf(this.$route.query.cup || 'A'),
-			boobSize: this.$route.query.bs?.split(',') || [0, boobSizes.length - 1],
-			boobSizeRequired: this.$route.query.bs || false,
 			naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
 		};
 	},
@@ -315,6 +307,7 @@ export default {
     border-right: solid 1px var(--shadow-hint);
     margin: 0 1rem 0 0;
 }
+
 .letter,
 .gender {
     display: inline-block;
@@ -396,7 +389,7 @@ export default {
 	justify-content: center;
 	padding: 0 .5rem;
 	margin: .5rem 0 0 0;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -405,64 +398,54 @@ 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 {
-		.toggle-label.on {
+		.range-label.on {
 			color: var(--enabled);
 		}
 
-		.toggle {
+		.range-toggle {
-			background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--enabled-background) calc(.625rem + 1px));
+			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--enabled-background) calc(.75rem + 1px));
 
 			&::-webkit-slider-thumb {
 				background: var(--enabled);
 			}
-
-			&::-moz-range-thumb {
-				background: var(--enabled);
-			}
 		}
 	}
 
 	&.off {
-		.toggle-label.off {
+		.range-label.off {
 			color: var(--disabled);
 		}
 
-		.toggle {
+		.range-toggle {
-			background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--disabled-background) calc(.625rem + 1px));
+			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--disabled-background) calc(.75rem + 1px));
 
 			&::-webkit-slider-thumb {
 				background: var(--disabled);
 			}
+		}
+	}
 
-			&::-moz-range-thumb {
+	.icon {
-				background: var(--disabled);
+		fill: var(--shadow);
-			}
+		width: 1.5rem;
+		height: 1.5rem;
+
+		&:hover {
+			fill: var(--shadow-strong);
 		}
 	}
 }
 
-.toggle-label {
+.range-label {
 	width: 1.5rem;
 	padding: 0 .5rem;
-	color: var(--darken);
+	color: var(--shadow);
 	font-weight: bold;
 	font-size: .9rem;
 
@@ -483,30 +466,30 @@ export default {
 	}
 }
 
-.toggle {
+.range,
+.range-toggle {
 	flex-grow: 1;
-	height: 1.25rem;
+	height: 1.5rem;
 	appearance: none;
 	padding: 2px;
 	border-radius: 1rem;
-	background: radial-gradient(circle, var(--darken-hint) .625rem, var(--darken-hint) calc(.625rem + 1px));
+	background: var(--shadow-hint);
 	cursor: pointer;
 
 	&::-webkit-slider-thumb {
 		appearance: none;
-		background: var(--darken-hint);
+		background: var(--primary);
-		width: 1.25rem;
+		width: 1.5rem;
-		height: 1.25rem;
+		height: 1.5rem;
-		border-radius: .625rem;
+		border-radius: .75rem;
 	}
+}
 
-	&::-moz-range-thumb {
+.range-toggle {
-		appearance: none;
+	background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--shadow-hint) calc(.75rem + 1px));
-		background: var(--darken-hint);
+
-		width: 1.25rem;
+	&::-webkit-slider-thumb {
-		height: 1.25rem;
+		background: var(--shadow-hint);
-		border: none;
-		border-radius: .625rem;
 	}
 }
 

assets/components/form/checkbox.vue

@@ -1,9 +1,6 @@
 <template>
 	<label class="check-container noselect">
-		<span
+		<span class="check-label">{{ label }}</span>
-			v-if="label"
-			class="check-label"
-		>{{ label }}</span>
 
 		<input
 			v-show="false"

assets/components/form/range.vue

@@ -1,189 +0,0 @@
-<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,7 +8,6 @@ $breakpoint4: 1500px;
 	/* --primary: #ff886c; */
     --primary: #ff6c88;
     --primary-strong: #ff4166;
-    --primary-faded: #ffdfee;
 
     --text-dark: #222;
     --text-light: #fff;
@@ -43,7 +42,6 @@ $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,19 +267,20 @@ function initActorActions(store, router) {
 		letter,
 		gender,
 		naturalBoobs,
-		boobSize,
+		cup,
 	}) {
 		const genderFilter = (gender === null && 'gender: { isNull: true }')
 			|| (gender === 'all' && ' ')
 			|| `gender: { equalTo: "${gender}" }`;
 
-		const cupFilter = boobSize ? `cup: { in: [${boobSize.map(size => `"${size}"`)}] }` : '';
+		console.log(cup);
 
 		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(
                 $limit: Int,
                 $offset: Int = 0,
                 $letter: String! = "",
+				$cup: [String!]
 				$naturalBoobs: Boolean,
             ) {
 				connection: actorsConnection(
@@ -293,11 +294,13 @@ function initActorActions(store, router) {
                         name: {
                             startsWith: $letter
                         }
-						${genderFilter}
 						naturalBoobs: {
 							equalTo: $naturalBoobs
 						}
-						${cupFilter}
+						cup: {
+							in: $cup
+						}
+						${genderFilter}
                     }
                 ) {
 					totalCount
@@ -351,6 +354,7 @@ function initActorActions(store, router) {
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 			limit,
 			letter,
+			cup,
 			naturalBoobs,
 		});
 

package-lock.json

@@ -1,11 +1,11 @@
 {
     "name": "traxxx",
-    "version": "1.180.0",
+    "version": "1.179.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "version": "1.180.0",
+            "version": "1.179.1",
             "license": "ISC",
             "dependencies": {
                 "@graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.180.0",
+    "version": "1.179.1",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {