Showing heading and dates on chapters.

components/campaigns/campaign.vue

@@ -30,6 +30,7 @@
 		target="_blank"
 		class="campaign"
 		:style="{ 'background-image': backdrop && `url(${bannerSrc})` }"
+		:class="{ backdrop }"
 		data-umami-event="campaign-click"
 		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
 	>
@@ -109,12 +110,16 @@ const bannerSrc = (() => {
 	backdrop-filter: blur(1rem) saturate(70%) brightness(75%);
 }
 
+.campaign.backdrop .campaign-overlay {
+	box-shadow: inset 0 0 5px var(--shadow-weak-20);
+}
+
 .campaign-banner {
 	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 	object-fit: contain;
-	filter: drop-shadow(0 0 2px var(--shadow-weak-10));
+	filter: drop-shadow(0 0 2px var(--shadow-weak-20));
 }
 
 .restricted {

components/scenes/chapters.vue

@@ -52,6 +52,13 @@
 					v-tooltip="'Duration'"
 					class="chapter-duration"
 				><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
+
+				<time
+					v-if="chapter.date"
+					v-tooltip="'Date'"
+					:datetime="chapter.date"
+					class="chapter-date"
+				>{{ formatDate(chapter.date, 'MMM d') }}</time>
 			</span>
 
 			<div class="chapter-info">
@@ -87,7 +94,7 @@
 import { computed } from 'vue';
 
 import getPath from '#/src/get-path.js';
-import { formatDuration } from '#/utils/format.js';
+import { formatDuration, formatDate } from '#/utils/format.js';
 
 const props = defineProps({
 	chapters: {
@@ -138,7 +145,7 @@ const timeline = computed(() => {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 .5rem;
+	padding: 0 .75rem;
 	border-radius: 0 0 .25rem .25rem;
 	margin: 0 0 .5rem 0;
 	color: var(--text-light);
@@ -164,7 +171,7 @@ const timeline = computed(() => {
 }
 
 .chapter-info {
-	padding: 0 .5rem;
+	padding: 0 .75rem;
 	font-size: 1rem;
 }
 
@@ -181,6 +188,7 @@ const timeline = computed(() => {
 }
 
 .chapter-description {
+	text-align: justify;
 	line-height: 1.5;
 }
 

pages/scene/+Page.vue

@@ -249,12 +249,6 @@
 					</div>
 				</div>
 
-				<Chapters
-					v-if="scene.chapters.length > 0"
-					:chapters="scene.chapters"
-					class="section"
-				/>
-
 				<div
 					v-if="scene.description"
 					class="section"
@@ -264,6 +258,18 @@
 					<p class="description">{{ scene.description }}</p>
 				</div>
 
+				<section
+					v-if="scene.chapters.length > 0"
+					class="section"
+				>
+					<h3 class="heading">Chapters</h3>
+
+					<Chapters
+						:chapters="scene.chapters"
+						class="section"
+					/>
+				</section>
+
 				<div
 					v-if="campaigns?.scene"
 					class="section"

src/scenes.js

@@ -86,7 +86,9 @@ function curateScene(rawScene, assets, reqUser, context) {
 		chapters: assets.chapters.map((chapter) => ({
 			id: chapter.id,
 			title: chapter.title,
+			description: chapter.description,
 			time: chapter.time,
+			date: chapter.date,
 			duration: chapter.duration,
 			poster: context.restriction
 				? null