Added results button to compact filters.

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>