Added results button to compact filters.

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 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;
-	}
-}
+const cupRange = ref(pageProps.cupRange);
 
 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,
 			},