Removed info channels from overview. Fixed poster gap.

components/scenes/scenes.vue

@@ -54,6 +54,11 @@
 			>
 				<div class="meta">{{ total }} results</div>
 
+				<Campaign
+					v-if="campaigns?.meta"
+					:campaign="campaigns.meta"
+				/>
+
 				<select
 					v-model="scope"
 					class="input"
@@ -83,23 +88,30 @@
 				v-if="showScopeTabs"
 				class="scopes"
 			>
-				<Link
-					:href="getPath('latest')"
-					class="scope nolink"
-					:active="scope === 'latest'"
-				>Latest</Link>
+				<div class="scopes-pills">
+					<Link
+						:href="getPath('latest')"
+						class="scope nolink"
+						:active="scope === 'latest'"
+					>Latest</Link>
 
-				<Link
-					:href="getPath('upcoming')"
-					class="scope nolink"
-					:active="scope === 'upcoming'"
-				>Upcoming</Link>
+					<Link
+						:href="getPath('upcoming')"
+						class="scope nolink"
+						:active="scope === 'upcoming'"
+					>Upcoming</Link>
 
-				<Link
-					:href="getPath('new')"
-					class="scope nolink"
-					:active="scope === 'new'"
-				>New</Link>
+					<Link
+						:href="getPath('new')"
+						class="scope nolink"
+						:active="scope === 'new'"
+					>New</Link>
+				</div>
+
+				<Campaign
+					v-if="campaigns?.scope"
+					:campaign="campaigns.scope"
+				/>
 			</nav>
 
 			<ul
@@ -107,10 +119,10 @@
 			>
 				<template v-for="item in campaignScenes">
 					<li
-						v-if="item === 'campaign' && campaign"
+						v-if="item === 'campaign' && sceneCampaign"
 						:key="`campaign-${item.id}`"
 					>
-						<Campaign :campaign="campaign" />
+						<Campaign :campaign="sceneCampaign" />
 					</li>
 
 					<li
@@ -172,7 +184,12 @@ const props = defineProps({
 	},
 });
 
-const { pageProps, routeParams, urlParsed } = inject('pageContext');
+const {
+	pageProps,
+	routeParams,
+	urlParsed,
+	campaigns,
+} = inject('pageContext');
 
 const {
 	actor: pageActor,
@@ -206,10 +223,10 @@ const filters = ref({
 	actors: queryActors,
 });
 
-const campaign = pageProps.campaigns?.scenes;
-const campaignIndex = pageProps.campaigns?.index;
+const sceneCampaign = campaigns?.scenes;
+const campaignIndex = campaigns?.index;
 
-const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (index === campaignIndex ? ['campaign', scene] : scene)));
+const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (sceneCampaign && index === campaignIndex ? ['campaign', scene] : scene)));
 
 function getPath(targetScope, preserveQuery) {
 	const path = parse(routeParams.path).map((segment) => {
@@ -302,8 +319,15 @@ function updateFilter(prop, value, reload = true) {
 
 .scenes-header {
 	display: flex;
-	align-items: center;
+	align-items: flex-end;
+	justify-content: space-between;
 	padding: .5rem 1rem .25rem 3rem;
+
+	.campaign {
+		max-height: 6rem;
+		justify-content: center;
+		margin: .5rem 1rem 0 1rem;
+	}
 }
 
 .scenes-container {
@@ -314,9 +338,9 @@ function updateFilter(prop, value, reload = true) {
 
 .meta {
 	display: flex;
-	flex-grow: 1;
 	justify-content: space-between;
 	align-items: center;
+	margin-bottom: .5rem;
 }
 
 .scenes {
@@ -328,8 +352,21 @@ function updateFilter(prop, value, reload = true) {
 
 .scopes {
 	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	padding: .75rem 1rem .25rem 1rem;
+
+	.campaign {
+		max-height: 6rem;
+		justify-content: flex-end;
+		margin-left: 1rem;
+	}
+}
+
+.scopes-pills {
+	display: flex;
+	align-items: center;
 	gap: .5rem;
-	padding: .75rem 0 .25rem 1rem;
 }
 
 .scope {
@@ -370,6 +407,19 @@ function updateFilter(prop, value, reload = true) {
 
 	.scopes {
 		justify-content: center;
+		flex-direction: column-reverse;
+
+		.campaign {
+			width: 100%;
+			justify-content: center;
+			margin-left: 0;
+			margin-bottom: 1rem;
+		}
+	}
+
+	.scopes-pills {
+		width: 100%;
+		justify-content: center;
 	}
 }