Added results button to compact filters.

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-container"
-		:class="{ 'compact-hide': !showFilters }"
-		@click="toggleFilters(false)"
-	>
-		<form
+	<div class="filters-frame">
+		<div
 			v-show="showFilters"
-			class="filters"
-			@submit.prevent
-			@click.stop
+			class="filters-container"
+			:class="{ show: showFiltersCompact }"
+			@click="toggleFilters(false)"
 		>
-			<slot />
-		</form>
+			<div class="filters-sidebar">
+				<form
+					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 {
-		padding: 0 .5rem 0 1.25rem;
+	&.open {
+		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>