Added results button to compact filters.

components/actors/tile.vue

@@ -10,6 +10,7 @@
 				v-if="actor.avatar"
 				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
 				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
+				loading="lazy"
 				class="avatar"
 			>
 		</Link>

components/filters/boobs.vue

@@ -3,9 +3,9 @@
 		<RangeFilter
 			label="bra size"
 			:min="0"
-			:max="braSizes.length - 1"
+			:max="cups.length - 1"
 			:value="filters.braSize"
-			:values="braSizes"
+			:values="cups"
 			:disabled="!filters.braSizeRequired"
 			@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
 			@input="(range) => emit('update', 'braSize', range, false)"
@@ -44,17 +44,31 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
 import RangeFilter from '#/components/filters/range.vue';
 
-defineProps({
+const props = defineProps({
 	filters: {
 		type: Object,
 		default: null,
 	},
+	// cup range should probably not be used, because it becomes impossible to filter for larger values than the current results
+	cupRange: {
+		type: Array,
+		default: null,
+	},
 });
 
+function cupRangeToCups(cupA, cupB) {
+	const smallestCode = cupA.charCodeAt(0);
+	const biggestCode = cupB.charCodeAt(0);
+
+	return Array.from({ length: biggestCode - smallestCode + 1 }, (value, index) => String.fromCharCode(smallestCode + index));
+}
+
 const emit = defineEmits(['update']);
 
-const braSizes = 'ABCDEFGHIJKZ'.split('');
 const naturalBoobsValues = [true, undefined, false];
+const cups = computed(() => (props.cupRange ? cupRangeToCups(props.cupRange[0], props.cupRange[1]) : 'ABCDEFGHIJKZ'.split(''))); // add Z to allow for 'bigger than K' without wasting fidelity
 </script>

components/filters/filters.vue

@@ -1,38 +1,93 @@
 <template>
+	<div class="filters-frame">
 		<div
+			v-show="showFilters"
 			class="filters-container"
-		:class="{ 'compact-hide': !showFilters }"
+			:class="{ show: showFiltersCompact }"
 			@click="toggleFilters(false)"
 		>
+			<div class="filters-sidebar">
 				<form
-			v-show="showFilters"
 					class="filters"
 					@submit.prevent
 					@click.stop
 				>
 					<slot />
 				</form>
+
+				<button
+					v-if="typeof results === 'number'"
+					class="button results"
+				>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
+			</div>
+
+			<div
+				class="filters-toggle close"
+				:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
+				@click.stop="toggleFilters(false)"
+			>
+				<Icon
+					icon="arrow-left3"
+					class="arrow"
+				/>
+
+				<Icon
+					icon="cross2"
+					class="cross"
+				/>
+			</div>
+		</div>
+
+		<div
+			class="filters-toggle open"
+			:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
+			@click.stop="toggleFilters(true)"
+		><Icon icon="filter" /></div>
 	</div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
+defineProps({
+	results: {
+		type: Number,
+		default: null,
+	},
+});
+
+// desktop defaults to open, compact defaults to closed
+// we can't measure viewframe in SSR, so use separate toggles
 const showFilters = ref(true);
+const showFiltersCompact = ref(false);
 
 function toggleFilters(state) {
 	showFilters.value = state ?? !showFilters.value;
+	showFiltersCompact.value = state ?? !showFiltersCompact.value;
 }
 </script>
 
 <style scoped>
-.filters-container {
+.filters-frame {
 	position: relative;
 }
 
+.filters-container {
+	display: flex;
+	height: 100%;
+}
+
+.filters-sidebar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
 .filters {
 	width: 17rem;
-	flex-shrink: 0;
+	flex-grow: 1;
+	position: relative;
+	box-sizing: border-box;
 	padding: .5rem 0;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak-30);
@@ -45,22 +100,30 @@ function toggleFilters(state) {
 .filters-toggle {
 	min-width: 1.5rem;
 	height: 2rem;
-	display: flex;
+	display: none;
 	justify-content: center;
 	align-items: center;
 	padding: 0 .25rem;
-	border-radius: 0 .25rem .25rem 0;
+	position: absolute;
+	top: .5rem;
+	right: -2rem;
+	border-radius: 0 .5rem .5rem 0;
 	background: var(--background);
 	color: var(--shadow);
 	font-weight: bold;
 	box-shadow: inset 0 0 3px var(--shadow-weak-30);
 
-	&.show {
+	&.open {
-		padding: 0 .5rem 0 1.25rem;
+		left: 0;
-
+		right: auto;
-		.icon {
-			margin-left: .5rem;
 	}
+
+	&.show-full {
+		display: flex;
+	}
+
+	&.close .cross {
+		display: none;
 	}
 
 	.icon {
@@ -76,8 +139,17 @@ function toggleFilters(state) {
 	}
 }
 
+.results {
+	display: none;
+	justify-content: center;
+	background: var(--primary);
+	color: var(--text-light);
+	border-radius: 0;
+}
+
 @media (max-width: 1200px) {
 	.filters-container {
+		display: none;
 		height: 100%;
 		width: 100%;
 		position: fixed;
@@ -85,15 +157,46 @@ function toggleFilters(state) {
 		left: 0;
 		z-index: 1000;
 		background: var(--background-dim);
+
+		&.show {
+			display: flex;
+		}
 	}
 
 	.filters {
-		height: 100%;
 		overflow-y: auto;
 	}
 
+	.filters-toggle {
+		&.show-full {
+			display: none;
+		}
+
+		&.show-compact {
+			display: flex;
+
+			&.close {
+				background: var(--grey-light-40);
+				position: relative;
+				right: 0;
+			}
+		}
+
+		&.close .cross {
+			display: flex;
+		}
+
+		&.close .arrow {
+			display: none;
+		}
+	}
+
 	.compact-hide {
 		display: none;
 	}
+
+	.results {
+		display: flex;
+	}
 }
 </style>

pages/actors/+Page.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page">
-		<Filters>
+		<Filters :results="total">
 			<div class="filter">
 				<input
 					v-model="q"
@@ -23,6 +23,7 @@
 
 			<BoobsFilter
 				:filters="filters"
+				:cup-range="cupRange"
 				@update="updateFilter"
 			/>
 
@@ -48,29 +49,6 @@
 
 		<div class="actors-container">
 			<div class="actors-header">
-				<!--
-				<div
-					v-show="showFilters"
-					class="filters-toggle hide"
-					@click.stop="toggleFilters(hide)"
-				>
-					<Icon
-						icon="arrow-left3"
-					/>
-				</div>
-
-				<div
-					v-show="!showFilters"
-					class="filters-toggle show"
-					@click.stop="toggleFilters(true)"
-				>
-					Filters
-					<Icon
-						icon="arrow-right3"
-					/>
-				</div>
-				-->
-
 				<div class="meta">
 					<span class="count">{{ total }} results</span>
 
@@ -131,14 +109,7 @@ const { pageProps, urlParsed, routeParams } = pageContext;
 const q = ref(urlParsed.search.q);
 const actors = ref([]);
 const countries = ref(pageProps.countries);
-
+const cupRange = ref(pageProps.cupRange);
-const showFilters = ref(false);
-
-if (pageContext.isHydration) { // hide sidebar on mobile, we can only run this client-side
-	if (window.matchMedia('(max-width: 1200px)')?.matches) {
-		showFilters.value = false;
-	}
-}
 
 actors.value = pageProps.actors;
 
@@ -204,20 +175,12 @@ function paginate({ page }) {
 }
 
 function updateFilter(prop, value, reload = true) {
-	console.log('update!', prop, value);
-
 	filters.value[prop] = value;
 
 	if (reload) {
 		search();
 	}
 }
-
-/*
-function toggleFilters(state) {
-	showFilters.value = state ?? !showFilters.value;
-}
-*/
 </script>
 
 <style>
@@ -258,7 +221,7 @@ function toggleFilters(state) {
 .actors-header {
 	display: flex;
 	align-items: center;
-	padding: .5rem 0 .75rem 0;
+	padding: .5rem 0 .25rem 2rem;
 }
 
 .meta {
@@ -266,7 +229,6 @@ function toggleFilters(state) {
 	flex-grow: 1;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 1rem;
 }
 
 .actors-container {

pages/actors/+onBeforeRender.js

@@ -5,6 +5,7 @@ export async function onBeforeRender(pageContext) {
 	const {
 		actors,
 		countries,
+		cupRange,
 		limit,
 		total,
 	} = await fetchActors(curateActorsQuery(pageContext.urlQuery), {
@@ -19,6 +20,7 @@ export async function onBeforeRender(pageContext) {
 			pageProps: {
 				actors,
 				countries,
+				cupRange,
 				limit,
 				total,
 			},