Improved scenes and movies meta header layout and responsiveness.

components/filters/filters.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
-defineProps({
+const props = defineProps({
 	results: {
 		type: Number,
 		default: null,
@@ -10,25 +10,47 @@ defineProps({
 		type: Boolean,
 		default: false,
 	},
+	// pages with their own filters toggle control the sidebar with these, otherwise it keeps its own state and toggle
+	showFull: {
+		type: Boolean,
+		default: null,
+	},
+	showCompact: {
+		type: Boolean,
+		default: null,
+	},
 });
 
+const emit = defineEmits(['close']);
+
 // desktop defaults to open, compact defaults to closed
 // we can't measure viewframe in SSR, so use separate toggles
-const showFilters = ref(true);
+const ownShowFull = ref(true);
-const showFiltersCompact = ref(false);
+const ownShowCompact = ref(false);
+
+const isControlled = computed(() => props.showFull !== null || props.showCompact !== null);
+const showFull = computed(() => (isControlled.value ? !!props.showFull : ownShowFull.value));
+const showCompact = computed(() => (isControlled.value ? !!props.showCompact : ownShowCompact.value));
 
 function toggleFilters(state) {
-	showFilters.value = state ?? !showFilters.value;
+	if (isControlled.value) {
-	showFiltersCompact.value = state ?? !showFiltersCompact.value;
+		if (state === false) {
+			emit('close');
+		}
+
+		return;
+	}
+
+	ownShowFull.value = state ?? !ownShowFull.value;
+	ownShowCompact.value = state ?? !ownShowCompact.value;
 }
 </script>
 
 <template>
 	<div class="filters-frame">
 		<div
-			v-show="showFilters"
 			class="filters-container"
-			:class="{ show: showFiltersCompact }"
+			:class="{ 'show-full': showFull, 'show-compact': showCompact }"
 			@click="toggleFilters(false)"
 		>
 			<div class="filters-sidebar">
@@ -47,9 +69,10 @@ function toggleFilters(state) {
 				>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
 			</div>
 
+			<!-- in full mode, pages with their own toggle close the sidebar with that, compact mode still needs a way out of the overlay -->
 			<div
 				class="filters-toggle close"
-				:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
+				:class="{ 'show-full': showFull && !isControlled, 'show-compact': showCompact }"
 				@click.stop="toggleFilters(false)"
 			>
 				<Icon
@@ -65,8 +88,9 @@ function toggleFilters(state) {
 		</div>
 
 		<div
+			v-if="!isControlled"
 			class="filters-toggle open"
-			:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
+			:class="{ 'show-full': !showFull, 'show-compact': !showCompact }"
 			@click.stop="toggleFilters(true)"
 		><Icon icon="filter" /></div>
 	</div>
@@ -359,8 +383,12 @@ function toggleFilters(state) {
 }
 
 .filters-container {
-	display: flex;
+	display: none;
 	height: 100%;
+
+	&.show-full {
+		display: flex;
+	}
 }
 
 .filters-sidebar {
@@ -450,7 +478,11 @@ function toggleFilters(state) {
 		z-index: 500;
 		background: var(--background-dim);
 
-		&.show {
+		&.show-full {
+			display: none;
+		}
+
+		&.show-compact {
 			display: flex;
 		}
 	}

components/filters/toggle.vue

@@ -1,50 +1,140 @@
 <script setup>
+defineProps({
+	// desktop and compact have separate open states, because we can't measure the viewport in SSR
+	showFull: {
+		type: Boolean,
+		default: true,
+	},
+	showCompact: {
+		type: Boolean,
+		default: false,
+	},
+	count: {
+		type: Number,
+		default: 0,
+	},
+});
+
 const emit = defineEmits(['toggle']);
 </script>
 
 <template>
-	<div
+	<button
-		class="filters-toggle open"
+		type="button"
-		@click.stop="emit('toggle')"
+		class="filter-toggle nobutton"
-	><Icon icon="filter" /></div>
+		:class="{
+			'open-full': showFull,
+			'open-compact': showCompact,
+			'active': count > 0,
+		}"
+		@click="emit('toggle')"
+	>
+		<!-- the media query picks the open state of the current viewport, matching the sidebar's own breakpoint -->
+		<Icon
+			icon="arrow-left2"
+			class="toggle-close"
+		/>
+
+		<Icon
+			icon="filter"
+			class="toggle-open"
+		/>
+
+		<!-- not filter-count, the filters sidebar has a global style by that name -->
+		<span
+			v-if="count > 0"
+			class="toggle-count"
+		>{{ count }}</span>
+	</button>
 </template>
 
 <style scoped>
-.filters-toggle {
+.filter-toggle {
-	min-width: 2.75rem;
-	height: 3rem;
-	justify-content: center;
-	align-items: center;
-	padding: 0 .25rem;
-	border-radius: 0 .5rem .5rem 0;
-	background: var(--background);
-	color: var(--glass);
-	font-weight: bold;
-	box-shadow: inset 0 0 3px var(--shadow-weak-30);
-
-	&.open {
-		left: 0;
-		right: auto;
-	}
-
-	&.show-full {
 	display: flex;
-	}
+	align-items: center;
-
+	gap: .75rem;
-	&.close .cross {
+	padding: 0 1rem;
-		display: none;
+	border-radius: 0 .25rem .25rem 0;
-	}
+	margin-right: 1rem;
+	font-weight: bold;
+	color: var(--glass-strong-10);
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
 
 	.icon {
-		fill: var(--glass);
+		fill: var(--glass-strong-10);
+		margin: .75rem 0 .75rem 0;
+	}
+
+	&.active {
+		padding-right: .75rem;
 	}
 
 	&:hover {
+		color: var(--primary);
 		cursor: pointer;
+		box-shadow: 0 0 3px var(--shadow-weak-20);
 
 		.icon {
 			fill: var(--primary);
 		}
 	}
+
+	.toggle-close {
+		display: none;
+	}
+
+	&.open-full {
+		.toggle-close {
+			display: inline-block;
+		}
+
+		.toggle-open {
+			display: none;
+		}
+	}
+}
+
+.toggle-count {
+	min-width: 1.25rem;
+	height: 1.25rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 0 .25rem;
+	border-radius: .625rem;
+	background: var(--primary);
+	color: var(--text-light);
+	font-size: .8rem;
+	font-weight: bold;
+	line-height: 1;
+}
+
+@media (--compact) {
+	.filter-toggle {
+		/* the full mode state doesn't apply in compact mode, matches the specificity of the open-full rule to override it */
+		&,
+		&.open-full {
+			.toggle-close {
+				display: none;
+			}
+
+			.toggle-open {
+				display: inline-block;
+			}
+		}
+
+		/* after the reset, so it wins when both states are open */
+		&.open-compact {
+			.toggle-close {
+				display: inline-block;
+			}
+
+			.toggle-open {
+				display: none;
+			}
+		}
+	}
 }
 </style>

components/movies/movies.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { parse } from 'path-to-regexp';
-import { inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
+import Campaign from '#/components/campaigns/campaign.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
 import Filters from '#/components/filters/filters.vue';
 import TagsFilter from '#/components/filters/tags.vue';
+import FilterToggle from '#/components/filters/toggle.vue';
 
 import YearsFilter from '#/components/filters/years.vue';
 import Checkbox from '#/components/form/checkbox.vue';
@@ -18,7 +20,12 @@ import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
 import { formatYears, parseYears } from '#/utils/parse-range.js';
 
 const pageContext = inject('pageContext');
-const { pageProps, routeParams, urlParsed } = pageContext;
+const {
+	pageProps,
+	routeParams,
+	urlParsed,
+	campaigns,
+} = pageContext;
 
 const {
 	actor: pageActor,
@@ -40,6 +47,11 @@ const loading = ref(false);
 
 const showFilters = ref(true);
 
+// desktop defaults to open, compact defaults to closed
+// we can't measure the viewport in SSR, so use separate toggles, each viewport only reads its own
+const showFiltersFull = ref(true);
+const showFiltersCompact = ref(false);
+
 const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
 const queryActors = actorIds.map((urlActorId) => aggActors.value.find((aggActor) => aggActor.id === urlActorId)).filter(Boolean);
 
@@ -57,6 +69,20 @@ const filters = ref({
 	requireCover: !!urlParsed.search.cover,
 });
 
+// the search input updates the filter while typing, only count the search once it's applied
+const appliedSearch = ref(urlParsed.search.q);
+
+// indicates the results are narrowed down: the search, each tag, actor and the channel count individually, the year range and cover requirement count once
+// the page's own actor, tag or channel aren't in these filters, so they aren't counted
+const filterCount = computed(() => [
+	appliedSearch.value?.trim() ? 1 : 0,
+	filters.value.tags.length,
+	filters.value.actors.length,
+	filters.value.entity ? 1 : 0,
+	filters.value.years.length > 0 || filters.value.yearRange ? 1 : 0,
+	filters.value.requireCover ? 1 : 0,
+].reduce((acc, count) => acc + count, 0));
+
 function getPath(targetScope, preserveQuery) {
 	const path = parse(routeParams.path).map((segment) => {
 		if (segment.name === 'scope') {
@@ -78,6 +104,8 @@ function getPath(targetScope, preserveQuery) {
 }
 
 async function search(options = {}) {
+	appliedSearch.value = filters.value.search;
+
 	if (options.resetPage !== false) {
 		currentPage.value = 1;
 	}
@@ -133,6 +161,11 @@ async function search(options = {}) {
 	events.emit('scrollUp');
 }
 
+function toggleFilters(state) {
+	showFiltersFull.value = state ?? !showFiltersFull.value;
+	showFiltersCompact.value = state ?? !showFiltersCompact.value;
+}
+
 function updateFilter(prop, value, reload = true) {
 	filters.value[prop] = value;
 
@@ -147,6 +180,9 @@ function updateFilter(prop, value, reload = true) {
 		<Filters
 			v-if="showFilters"
 			:class="{ loading }"
+			:show-full="showFiltersFull"
+			:show-compact="showFiltersCompact"
+			@close="toggleFilters(false)"
 		>
 			<div class="filter search-container">
 				<!-- onsearch not compatible with FF and Safari -->
@@ -206,8 +242,30 @@ function updateFilter(prop, value, reload = true) {
 		</Filters>
 
 		<div class="movies-container">
+			<Campaign
+				v-if="campaigns?.meta"
+				:campaign="campaigns.meta"
+				class="campaign-meta campaign-full"
+			/>
+
 			<div class="movies-header">
-				<div class="meta">{{ total }} results</div>
+				<span class="header-filter">
+					<FilterToggle
+						v-if="showFilters"
+						:show-full="showFiltersFull"
+						:show-compact="showFiltersCompact"
+						:count="filterCount"
+						@toggle="toggleFilters()"
+					/>
+
+					<div class="meta">{{ total }}<span class="meta-label">&nbsp;results</span></div>
+				</span>
+
+				<Campaign
+					v-if="campaigns?.meta"
+					:campaign="campaigns.meta"
+					class="campaign-meta campaign-gap"
+				/>
 
 				<select
 					v-model="scope"
@@ -265,16 +323,42 @@ function updateFilter(prop, value, reload = true) {
 }
 
 .movies-header {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	padding: .5rem 1rem .5rem 0;
+
+	.campaign {
+		max-height: 6rem;
+		justify-content: center;
+		margin: 0 1rem;
+	}
+}
+
+.header-filter {
 	display: flex;
 	align-items: center;
-	padding: .5rem 1rem .25rem 4rem;
+	flex-shrink: 0;
 }
 
 .meta {
 	display: flex;
-	flex-grow: 1;
 	justify-content: space-between;
 	align-items: center;
+	flex-shrink: 0;
+	margin-top: 2px;
+}
+
+:deep(.campaign-meta) .campaign-banner {
+	width: auto;
+}
+
+.campaign-full {
+	height: auto;
+}
+
+.campaign-full {
+	display: none;
 }
 
 .movies {
@@ -290,6 +374,16 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
+@media(--small-10) {
+	.campaign-gap {
+		display: none;
+	}
+
+	.campaign-full {
+		display: flex;
+	}
+}
+
 @media(--small-20) {
 	.movies {
 		padding: .5rem .5rem 1rem .5rem;
@@ -301,5 +395,9 @@ function updateFilter(prop, value, reload = true) {
 	.movies {
 		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 	}
+
+	.meta-label {
+		display: none;
+	}
 }
 </style>

components/scenes/scenes.vue

@@ -15,6 +15,7 @@ import Filters from '#/components/filters/filters.vue';
 import GroupsFilter from '#/components/filters/groups.vue';
 
 import TagsFilter from '#/components/filters/tags.vue';
+import FilterToggle from '#/components/filters/toggle.vue';
 import YearsFilter from '#/components/filters/years.vue';
 import Ellipsis from '#/components/loading/ellipsis.vue';
 import Pagination from '#/components/pagination/pagination.vue';
@@ -74,6 +75,11 @@ const total = ref(Number(pageProps.sceneTotal || pageProps.total));
 const loading = ref(false);
 const scenesContainer = ref(null);
 
+// desktop defaults to open, compact defaults to closed
+// we can't measure the viewport in SSR, so use separate toggles, each viewport only reads its own
+const showFiltersFull = ref(true);
+const showFiltersCompact = ref(false);
+
 const view = ref(env.scenesView || 'grid');
 
 const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
@@ -97,6 +103,20 @@ const filters = ref({
 	trans: parseRange(urlParsed.search.trans),
 });
 
+// the search input updates the filter while typing, only count the search once it's applied
+const appliedSearch = ref(urlParsed.search.q);
+
+// indicates the results are narrowed down: the search, each tag, actor and the channel count individually, each range counts once
+// the page's own actor, tag or channel aren't in these filters, so they aren't counted
+const filterCount = computed(() => [
+	appliedSearch.value?.trim() ? 1 : 0,
+	filters.value.tags.length,
+	filters.value.actors.length,
+	filters.value.entity ? 1 : 0,
+	filters.value.years.length > 0 || filters.value.yearRange ? 1 : 0,
+	...['group', 'females', 'males', 'trans'].map((key) => (filters.value[key] ? 1 : 0)),
+].reduce((acc, count) => acc + count, 0));
+
 const sceneCampaign = campaigns?.scenes;
 const campaignIndex = campaigns?.index;
 
@@ -123,6 +143,8 @@ function getPath(targetScope, preserveQuery) {
 }
 
 async function search(options = {}) {
+	appliedSearch.value = filters.value.search;
+
 	if (options.resetPage !== false) {
 		currentPage.value = 1;
 	}
@@ -196,6 +218,11 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
+function toggleFilters(state) {
+	showFiltersFull.value = state ?? !showFiltersFull.value;
+	showFiltersCompact.value = state ?? !showFiltersCompact.value;
+}
+
 function setView(newView) {
 	view.value = newView;
 	Cookies.set('scenesView', newView);
@@ -211,6 +238,9 @@ function setView(newView) {
 			<Filters
 				v-if="showFilters"
 				:loading="loading"
+				:show-full="showFiltersFull"
+				:show-compact="showFiltersCompact"
+				@close="toggleFilters(false)"
 			>
 				<div class="filter search-container">
 					<!-- onsearch not compatible with FF and Safari -->
@@ -274,16 +304,34 @@ function setView(newView) {
 			class="scenes-container"
 			:class="{ loading }"
 		>
+			<Campaign
+				v-if="campaigns?.meta"
+				:campaign="campaigns.meta"
+				class="campaign-meta campaign-full"
+			/>
+
 			<div
 				v-if="showMeta"
 				class="scenes-header"
 			>
-				<div class="meta">{{ total }} results</div>
+				<span class="header-filter">
+					<FilterToggle
+						v-if="showFilters"
+						:show-full="showFiltersFull"
+						:show-compact="showFiltersCompact"
+						:count="filterCount"
+						@toggle="toggleFilters()"
+					/>
+
+					<div
+						class="meta"
+					>{{ total }}<span class="meta-label">&nbsp;results</span></div>
+				</span>
 
 				<Campaign
 					v-if="campaigns?.meta"
 					:campaign="campaigns.meta"
-					class="campaign-meta"
+					class="campaign-meta campaign-gap"
 				/>
 
 				<div class="views">
@@ -430,12 +478,12 @@ function setView(newView) {
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
-	padding: .5rem 1rem .25rem 4rem;
+	padding: .5rem 1rem .5rem 0;
 
 	.campaign {
 		max-height: 6rem;
 		justify-content: center;
-		margin: .5rem 1rem 0 1rem;
+		margin: 0 1rem;
 		/* makes empty area link to ad, bit too annoying
 		width: 0;
 		flex-grow: 1;
@@ -455,7 +503,13 @@ function setView(newView) {
 	justify-content: space-between;
 	align-items: center;
 	flex-shrink: 0;
-	margin-bottom: .5rem;
+	margin-top: 2px;
+}
+
+.header-filter {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
 }
 
 .scenes-items {
@@ -476,6 +530,14 @@ function setView(newView) {
 	width: auto;
 }
 
+.campaign-full {
+	height: auto;
+}
+
+.campaign-full {
+	display: none;
+}
+
 .campaign-scene {
 	width: 100%;
 	aspect-ratio: 2 / 1; /* ensures banner can't be taller than scene tile */
@@ -579,6 +641,14 @@ function setView(newView) {
 	.scopes .views {
 		width: 100%;
 	}
+
+	.campaign-gap {
+		display: none;
+	}
+
+	.campaign-full {
+		display: flex;
+	}
 }
 
 @media(--small-20) {
@@ -600,4 +670,10 @@ function setView(newView) {
 		justify-content: flex-start;
 	}
 }
+
+@media(--small-50) {
+	.meta-label {
+		display: none;
+	}
+}
 </style>

pages/movies/+onBeforeRender.js

@@ -1,8 +1,13 @@
+import { getRandomCampaigns } from '#/src/campaigns.js';
 import { fetchMovies } from '#/src/movies.js';
 import { curateMoviesQuery } from '#/src/web/movies.js';
 
 export async function onBeforeRender(pageContext) {
-	const movieResults = await fetchMovies(await curateMoviesQuery({
+	const [
+		movieResults,
+		campaigns,
+	] = await Promise.all([
+		fetchMovies(await curateMoviesQuery({
 			...pageContext.urlQuery,
 			scope: pageContext.routeParams.scope || 'latest',
 		}), {
@@ -11,7 +16,15 @@ export async function onBeforeRender(pageContext) {
 			dedupe: true,
 		}, pageContext.user, {
 			restriction: pageContext.geo.restriction,
-	});
+		}),
+		// same banner shapes as the scenes page header and footer
+		getRandomCampaigns([
+			{ minRatio: 3 },
+			{ minRatio: 1.5 },
+		], { tagFilter: pageContext.tagFilter }),
+	]);
+
+	const [metaCampaign, paginationCampaign] = campaigns;
 
 	return {
 		pageContext: {
@@ -19,6 +32,10 @@ export async function onBeforeRender(pageContext) {
 			pageProps: {
 				...movieResults,
 			},
+			campaigns: {
+				meta: metaCampaign,
+				pagination: paginationCampaign,
+			},
 		},
 	};
 }

pages/scenes/+onBeforeRender.js

@@ -21,6 +21,7 @@ export async function onBeforeRender(pageContext) {
 			restriction: pageContext.geo.restriction,
 		}),
 		getRandomCampaigns([
+			{ minRatio: 3 },
 			{ minRatio: 0.75, maxRatio: 1.25 },
 			{ minRatio: 1.5 },
 		], { tagFilter: pageContext.tagFilter }),
@@ -31,7 +32,7 @@ export async function onBeforeRender(pageContext) {
 	} = sceneResults;
 
 	const campaignIndex = getCampaignIndex(scenes.length);
-	const [sceneCampaign, paginationCampaign] = campaigns;
+	const [metaCampaign, sceneCampaign, paginationCampaign] = campaigns;
 
 	return {
 		pageContext: {
@@ -41,6 +42,7 @@ export async function onBeforeRender(pageContext) {
 			},
 			campaigns: {
 				index: campaignIndex,
+				meta: metaCampaign,
 				scenes: scenes.length > 5 && sceneCampaign,
 				pagination: paginationCampaign,
 			},