1.180.4

Improved actor filter layout and behavior.
Added height and weight filters to actors overview.
2021-03-03 19:13:16 +01:00 · 2021-03-03 19:13:09 +01:00 · 2021-03-03 16:47:57 +01:00
13 changed files with 277 additions and 52 deletions
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@ -66,22 +66,32 @@

 						<template v-slot:tooltip>
 							<div class="filter-section boobsize">
-								<label class="filter-label off">Size</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"
-										@change="(sizeRange) => updateValue('boobSize', sizeRange)"
+										:allow-enable="true"
+										@enable="boobSizeRequired = true"
+										@input="(sizeRange) => updateValue('boobSize', sizeRange, false)"
+										@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
 									>
 										<template v-slot:start>
 											<span class="range-label"><Icon icon="boobs-small" /></span>
@ -95,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 }"
@ -104,7 +114,7 @@
 									<span
 										class="toggle-label off"
 										@click="updateValue('naturalBoobs', 0)"
-									>no</span>
+									><Icon icon="leaf" /></span>

 									<input
 										v-model="naturalBoobs"
@ -118,7 +128,81 @@
 									<span
 										class="toggle-label on"
 										@click="updateValue('naturalBoobs', 2)"
-									>yes</span>
+									><Icon icon="magic-wand2" /></span>
+								</span>
+							</div>
+						</template>
+					</Tooltip>
+				</li>
+
+				<li>
+					<Tooltip class="filter boobs">
+						<span class="filter-trigger"><Icon icon="rulers" />Physique</span>
+
+						<template v-slot:tooltip>
+							<div class="filter-section">
+								<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">
+									<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="height-short" /></template>
+										<template v-slot:end><Icon icon="height" /></template>
+									</Range>
+								</span>
+							</div>
+
+							<div class="filter-section">
+								<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">
+									<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="meter-slow" /></template>
+										<template v-slot:end><Icon icon="meter-fast" /></template>
+									</Range>
 								</span>
 							</div>
 						</template>
@ -163,13 +247,18 @@ function updateFilters() {
 		query: {
 			naturalBoobs: toggleValues[this.naturalBoobs],
 			bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
+			h: this.heightRequired ? this.height.join(',') : undefined,
+			w: this.weightRequired ? this.weight.join(',') : undefined,
 		},
 	});
 }

-function updateValue(prop, value) {
+function updateValue(prop, value, load = true) {
 	this[prop] = value;
-	this.updateFilters();
+
+	if (load) {
+		this.updateFilters();
+	}
 }

 async function fetchActors(scroll) {
@ -182,6 +271,8 @@ async function fetchActors(scroll) {
 		gender: curatedGender === 'other' ? null : curatedGender,
 		boobSize: this.boobSizeRequired && this.boobSize,
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
+		height: this.heightRequired && this.height,
+		weight: this.weightRequired && this.weight,
 	});

 	this.actors = actors;
@ -235,6 +326,10 @@ export default {
 			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: !!this.$route.query.bs,
 			naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
+			height: this.$route.query.h?.split(',').map(Number) || [50, 250],
+			heightRequired: !!this.$route.query.h,
+			weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
+			weightRequired: !!this.$route.query.w,
 		};
 	},
 	computed: {
@ -388,28 +483,41 @@ 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 0 0 .5rem;
-	}
 }

 .toggle-container,
@ -422,6 +530,10 @@ export default {
 	&.on {
 		.toggle-label.on {
 			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
 		}

 		.toggle {
@ -440,6 +552,10 @@ export default {
 	&.off {
 		.toggle-label.off {
 			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
 		}

 		.toggle {
@ -457,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;
@ -467,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;
--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@ -22,7 +22,8 @@
 				:disabled="disabled"
 				type="range"
 				class="slider"
-				@change="emit"
+				@input="emit('input')"
+				@change="emit('change')"
 				@click.stop
 			>

@ -34,7 +35,8 @@
 				:disabled="disabled"
 				type="range"
 				class="slider"
-				@change="emit"
+				@input="emit('input')"
+				@change="emit('change')"
 				@click.stop
 			>
 		</div>
@ -50,6 +52,8 @@
 </template>

 <script>
+import { nextTick } from 'vue';
+
 function minValue() {
 	return Math.min(this.valueA, this.valueB);
 }
@ -59,37 +63,49 @@ function maxValue() {
 }

 function minPercentage() {
-	return (this.minValue / this.max) * 100;
+	return ((this.minValue - this.min) / (this.max - this.min)) * 100;
 }

 function maxPercentage() {
-	return (this.maxValue / this.max) * 100;
+	return ((this.maxValue - this.min) / (this.max - this.min)) * 100;
 }

-function emit() {
+function emit(type = 'change') {
 	if (this.values) {
-		this.$emit('change', [this.values[this.minValue], this.values[this.maxValue]]);
+		this.$emit(type, [this.values[this.minValue], this.values[this.maxValue]]);
 		return;
 	}

-	this.$emit('change', [this.minValue, this.maxValue]);
+	this.$emit(type, [this.minValue, this.maxValue]);
 }

 function setNearest(event) {
-	if (!this.disabled) {
-		const closestValue = Math.round((event.offsetX / event.target.getBoundingClientRect().width) * this.max);
-		const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
-
-		this[closestSlider] = closestValue;
-		this.emit();
+	if (this.allowEnable) {
+		this.emit('enable');
 	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			const closestValue = Math.ceil((event.offsetX / event.target.getBoundingClientRect().width) * (this.max - this.min)) + this.min;
+			const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
+
+			this[closestSlider] = closestValue;
+			this.emit();
+		}
+	});
 }

 function setValue(prop, value) {
-	if (!this.disabled) {
-		this[prop] = value;
-		this.emit();
+	if (this.allowEnable) {
+		this.emit('enable');
 	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			this[prop] = value;
+			this.emit();
+		}
+	});
 }

 export default {
@ -114,8 +130,12 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		allowEnable: {
+			type: Boolean,
+			default: false,
+		},
 	},
-	emits: ['change'],
+	emits: ['change', 'input', 'enable'],
 	data() {
 		if (this.values) {
 			return {
@ -211,8 +231,8 @@ export default {
 }

 ::v-deep(.icon) {
-	width: 1.5rem;
-	height: 1.5rem;
+	width: 1.25rem;
+	height: 1.25rem;
 	flex-shrink: 0;
 	fill: var(--shadow);
 }
--- a/assets/components/tooltip/tooltip.vue
+++ b/assets/components/tooltip/tooltip.vue
@ -71,7 +71,7 @@ async function calculate() {

 	const { tooltipX, arrowOffset } = this.getX(triggerBoundary, tooltipBoundary);

-	this.tooltipY = triggerBoundary.top + triggerBoundary.height;
+	this.tooltipY = triggerBoundary.top + triggerBoundary.height + 5;
 	this.tooltipX = tooltipX;
 	this.arrowOffset = arrowOffset;
 }
--- a/assets/img/icons/enlarge.svg
+++ b/assets/img/icons/enlarge.svg
@ -0,0 +1,8 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enlarge</title>
+<path d="M2 5h-2v-4c0-0.552 0.448-1 1-1h4v2h-3v3z"></path>
+<path d="M16 5h-2v-3h-3v-2h4c0.552 0 1 0.448 1 1v4z"></path>
+<path d="M15 16h-4v-2h3v-3h2v4c0 0.552-0.448 1-1 1z"></path>
+<path d="M5 16h-4c-0.552 0-1-0.448-1-1v-4h2v3h3v2z"></path>
+</svg>
--- a/assets/img/icons/enlarge4.svg
+++ b/assets/img/icons/enlarge4.svg
@ -0,0 +1,8 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enlarge4</title>
+<path d="M16 5.5v-5.5h-5.5z"></path>
+<path d="M5.5 0h-5.5v5.5z"></path>
+<path d="M16 16v-5.5l-5.5 5.5z"></path>
+<path d="M0 16h5.5l-5.5-5.5z"></path>
+</svg>
--- a/assets/img/icons/pants.svg
+++ b/assets/img/icons/pants.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pants</title>
+<path d="M12.968 0h-10.936l-1.067 16h4.966l1.568-10.617 1.568 10.617h4.966l-1.067-16zM4 2h-1v-1h1v1zM7 2h-2v-1h2v1zM10 2h-2v-1h2v1zM12 2h-1v-1h1v1z"></path>
+</svg>
--- a/assets/img/icons/shrink.svg
+++ b/assets/img/icons/shrink.svg
@ -0,0 +1,8 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>shrink</title>
+<path d="M3 0h2v4c0 0.552-0.448 1-1 1h-4v-2h3v-3z"></path>
+<path d="M11 0h2v3h3v2h-4c-0.552 0-1-0.448-1-1v-4z"></path>
+<path d="M12 11h4v2h-3v3h-2v-4c0-0.552 0.448-1 1-1z"></path>
+<path d="M0 11h4c0.552 0 1 0.448 1 1v4h-2v-3h-3v-2z"></path>
+</svg>
--- a/assets/img/icons/shrink4.svg
+++ b/assets/img/icons/shrink4.svg
@ -0,0 +1,8 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>shrink4</title>
+<path d="M10 0.5v5.5h5.5z"></path>
+<path d="M0.5 6h5.5v-5.5z"></path>
+<path d="M10 10v5.5l5.5-5.5z"></path>
+<path d="M6 10h-5.5l5.5 5.5z"></path>
+</svg>
--- a/assets/img/icons/syringe.svg
+++ b/assets/img/icons/syringe.svg
@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>syringe</title>
+<path d="M15.5 6l0.5-2-4-4-2 0.5 0.985 0.985-1.631 1.631-2.235-2.235-1.237 1.237 1.506 1.506c-0.033 0.025-0.064 0.053-0.094 0.083l-5.586 5.586c-0.389 0.389-0.389 1.025 0 1.414l0.293 0.293v1l0.646 0.646-2.646 2.646 0.707 0.707 2.646-2.646 0.646 0.646h1l0.293 0.293c0.194 0.194 0.451 0.292 0.707 0.292s0.513-0.097 0.707-0.292l5.586-5.586c0.030-0.030 0.057-0.062 0.083-0.094l1.506 1.506 1.237-1.237-2.235-2.235 1.631-1.631 0.985 0.985zM3.854 8.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM7.367 12.396l-0.471 0.471-3.541-3.984 0.029-0.029 3.984 3.541zM4.354 7.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM4.854 7.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM5.354 6.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM5.854 6.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6.354 5.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6.854 5.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM7.354 4.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6 13.71c-0.024 0-0.059-0.006-0.088-0.035l-3.586-3.586c-0.029-0.029-0.035-0.064-0.035-0.088s0.006-0.059 0.035-0.088l0.057-0.057 3.984 3.541-0.279 0.279c-0.029 0.029-0.064 0.035-0.088 0.035zM6.396 13.367l-3.541-3.984 0.029-0.029 3.984 3.541-0.471 0.471zM11.674 8.088l-0.279 0.279-3.541-3.984 0.057-0.057c0.029-0.029 0.064-0.035 0.088-0.035s0.059 0.006 0.088 0.035l3.586 3.586c0.047 0.047 0.047 0.13 0 0.177zM12.354 6.116l-2.47-2.47 1.631-1.631 2.47 2.47-1.631 1.631z"></path>
+</svg>
--- a/assets/img/icons/user6.svg
+++ b/assets/img/icons/user6.svg
@ -1,8 +1,33 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-<title>user6</title>
-<path d="M11.5 5.5c0 2.485-1.567 4.5-3.5 4.5s-3.5-2.015-3.5-4.5c0-2.485 1.567-4.5 3.5-4.5s3.5 2.015 3.5 4.5z"></path>
-<path d="M7 8.922h2v2.078h-2v-2.078z"></path>
-<path d="M1 12c0-1.105 3.134-2 7-2s7 0.895 7 2z"></path>
-<path d="M1 12h14v2h-14v-2z"></path>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg12">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>user6</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <title
+     id="title2">user6</title>
+  <path
+     id="path4"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill-opacity:1;fill-rule:nonzero;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1;stroke:none;opacity:1"
+     d="M 8 1 C 6.067 1 4.5 3.015 4.5 5.5 C 4.5 7.535206 5.5576181 9.2350589 7 9.7910156 L 7 10.029297 C 3.6121657 10.168998 1 10.992951 1 12 L 1 14 L 15 14 L 15 12 C 15 10.992951 12.387834 10.168998 9 10.029297 L 9 9.7910156 C 10.442382 9.2350589 11.5 7.535206 11.5 5.5 C 11.5 3.015 9.933 1 8 1 z " />
 </svg>
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@ -268,12 +268,16 @@ function initActorActions(store, router) {
 		gender,
 		naturalBoobs,
 		boobSize,
+		height,
+		weight,
 	}) {
 		const genderFilter = (gender === null && 'gender: { isNull: true }')
 			|| (gender === 'all' && ' ')
 			|| `gender: { equalTo: "${gender}" }`;

 		const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
+		const heightFilter = height ? `height: { greaterThanOrEqualTo: ${height[0]}, lessThanOrEqualTo: ${height[1]} }` : '';
+		const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';

 		const { connection: { actors, totalCount } } = await graphql(`
            query Actors(
@ -298,6 +302,8 @@ function initActorActions(store, router) {
 							equalTo: $naturalBoobs
 						}
 						${cupFilter}
+						${heightFilter}
+						${weightFilter}
                    }
                ) {
 					totalCount
--- a/package-lock.json
+++ b/package-lock.json
@ -1,11 +1,11 @@
 {
    "name": "traxxx",
-    "version": "1.180.3",
+    "version": "1.180.4",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
        "": {
-            "version": "1.180.3",
+            "version": "1.180.4",
            "license": "ISC",
            "dependencies": {
                "@graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "traxxx",
-    "version": "1.180.3",
+    "version": "1.180.4",
    "description": "All the latest porn releases in one place",
    "main": "src/app.js",
    "scripts": {
Author	SHA1	Message	Date
DebaucheryLibrarian	8ac8e21d78	1.180.4	2021-03-03 19:13:16 +01:00
DebaucheryLibrarian	21ec821b8c	Improved actor filter layout and behavior.	2021-03-03 19:13:09 +01:00
DebaucheryLibrarian	74e33303ed	Added height and weight filters to actors overview.	2021-03-03 16:47:57 +01:00