From 6458264abf1dbe069264102fc8a4c395b80a79ac Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Thu, 5 Sep 2024 01:00:02 +0200
Subject: [PATCH] Added dedicated compact scene tile.

---
 components/scenes/meta.vue   |  93 +++++++++++
 components/scenes/scenes.vue |   7 +-
 components/scenes/tile.vue   | 307 +++++++++++++++++------------------
 3 files changed, 250 insertions(+), 157 deletions(-)
 create mode 100644 components/scenes/meta.vue

diff --git a/components/scenes/meta.vue b/components/scenes/meta.vue
new file mode 100644
index 0000000..e388685
--- /dev/null
+++ b/components/scenes/meta.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="meta">
+		<div class="channel">
+			<Link
+				:href="scene.channel.isIndependent || !scene.network ? `/${scene.channel.type}/${scene.channel.slug}` : `/${scene.network.type}/${scene.network.slug}`"
+				class="favicon-link"
+			>
+				<img
+					:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/favicon.png` : `/logos/${scene.network.slug}/favicon.png`"
+					class="favicon"
+				>
+			</Link>
+
+			<Link
+				:href="`/${scene.channel.type}/${scene.channel.slug}`"
+				class="nolink channel-link"
+			>{{ scene.channel.name }}</Link>
+		</div>
+
+		<Link
+			:href="scene.watchUrl"
+			:title="scene.date ? format(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${format(scene.createdAt, 'y-MM-dd')}`"
+			target="_blank"
+			class="date-link nolink"
+			:data-umami-event="scene.affiliate ? 'scenetile-date-click-aff' : 'scenetile-date-click'"
+			:data-umami-event-aff-id="scene.affiliate?.id"
+			:data-umami-event-scene-id="scene.id"
+		>
+			<time
+				:datetime="scene.effectiveDate.toISOString()"
+				class="date"
+				:class="{ nodate: !scene.date }"
+			>{{ format(scene.effectiveDate, {
+				month: 'MMM y',
+				year: 'y',
+			}[scene.datePrecision] || 'MMM d, y') }}</time>
+		</Link>
+	</div>
+</template>
+
+<script setup>
+import { format } from 'date-fns';
+
+defineProps({
+	scene: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.meta {
+	display: flex;
+	justify-content: space-between;
+	align-items: stretch;
+	padding: 0 .5rem;
+	border-radius: 0 0 .25rem .25rem;
+	position: relative;
+	font-size: .8rem;
+	color: var(--text-light);
+	background: var(--shadow-strong-30);
+	box-shadow: 0 0 3px var(--shadow);
+}
+
+.channel {
+	display: inline-flex;
+	align-items: center;
+	font-weight: bold;
+	padding: .4rem 0;
+}
+
+.favicon-link {
+	display: inline-flex;
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	margin-right: .5rem;
+	object-fit: contain;
+}
+
+.date-link {
+	display: flex;
+	align-items: center;
+}
+
+.nodate {
+	font-style: italic;
+	color: var(--highlight);
+}
+</style>
diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue
index f7bf07f..b244c28 100644
--- a/components/scenes/scenes.vue
+++ b/components/scenes/scenes.vue
@@ -463,10 +463,15 @@ function updateFilter(prop, value, reload = true) {
 }
 
 @media(--small-20) {
+	/*
 	.scenes {
 		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	}
+	*/
+
+	.scenes {
+		grid-template-columns: 1fr;
 		padding: .5rem .5rem 1rem .5rem;
-		gap: .5rem .25rem;
 	}
 }
 </style>
diff --git a/components/scenes/tile.vue b/components/scenes/tile.vue
index 361640e..eb80111 100644
--- a/components/scenes/tile.vue
+++ b/components/scenes/tile.vue
@@ -6,130 +6,106 @@
 			'is-new': scene.isNew,
 		}"
 	>
-		<div class="poster-container">
-			<Link
-				:href="`/scene/${scene.id}/${scene.slug || ''}`"
-				:title="scene.title"
-				target="_blank"
-				class="poster"
-			>
-				<img
-					v-if="scene.poster"
-					:src="getPath(scene.poster, 'thumbnail')"
-					:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')})` }"
-					loading="lazy"
-					fetchpriority="low"
-					class="thumbnail"
-				>
-
-				<Icon
-					v-else
-					icon="clapboard"
-				/>
-			</Link>
-
-			<Heart
-				domain="scenes"
-				:item="scene"
-				:show-secondary="false"
-				class="light tiled"
-				@stashed="(stash) => { favorited = stash.id === currentStash.id ? true : favorited; }"
-				@unstashed="(stash) => { favorited = stash.id === currentStash.id ? false : favorited; }"
-			/>
-
-			<span
-				v-if="scene.isNew"
-				:title="`Newly added ${format(scene.createdAt, 'yyyy-MM-dd')}`"
-				class="new"
-			><Icon icon="star-full" /></span>
-		</div>
-
-		<div class="meta">
-			<div class="channel">
+		<div class="tile-full">
+			<div class="poster-container">
 				<Link
-					:href="scene.channel.isIndependent || !scene.network ? `/${scene.channel.type}/${scene.channel.slug}` : `/${scene.network.type}/${scene.network.slug}`"
-					class="favicon-link"
+					:href="`/scene/${scene.id}/${scene.slug || ''}`"
+					:title="scene.title"
+					target="_blank"
+					class="poster"
 				>
 					<img
-						:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/favicon.png` : `/logos/${scene.network.slug}/favicon.png`"
-						class="favicon"
+						v-if="scene.poster"
+						:src="getPath(scene.poster, 'thumbnail')"
+						:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')})` }"
+						loading="lazy"
+						fetchpriority="low"
+						class="thumbnail"
 					>
+
+					<Icon
+						v-else
+						icon="clapboard"
+					/>
 				</Link>
 
-				<Link
-					:href="`/${scene.channel.type}/${scene.channel.slug}`"
-					class="nolink channel-link"
-				>{{ scene.channel.name }}</Link>
+				<Heart
+					domain="scenes"
+					:item="scene"
+					:show-secondary="false"
+					class="light tiled"
+					@stashed="(stash) => { favorited = stash.id === currentStash.id ? true : favorited; }"
+					@unstashed="(stash) => { favorited = stash.id === currentStash.id ? false : favorited; }"
+				/>
+
+				<span
+					v-if="scene.isNew"
+					:title="`Newly added ${format(scene.createdAt, 'yyyy-MM-dd')}`"
+					class="new"
+				><Icon icon="star-full" /></span>
 			</div>
 
-			<Link
-				:href="scene.watchUrl"
-				:title="scene.date ? format(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${format(scene.createdAt, 'y-MM-dd')}`"
-				target="_blank"
-				class="date-link nolink"
-				:data-umami-event="scene.affiliate ? 'scenetile-date-click-aff' : 'scenetile-date-click'"
-				:data-umami-event-aff-id="scene.affiliate?.id"
-				:data-umami-event-scene-id="scene.id"
-			>
-				<time
-					:datetime="scene.effectiveDate.toISOString()"
-					class="date"
-					:class="{ nodate: !scene.date }"
-				>{{ format(scene.effectiveDate, {
-					month: 'MMM y',
-					year: 'y',
-				}[scene.datePrecision] || 'MMM d, y') }}</time>
-			</Link>
+			<Meta
+				:scene="scene"
+				class="meta-full"
+			/>
+
+			<div class="info">
+				<Link
+					:href="`/scene/${scene.id}/${scene.slug || ''}`"
+					:title="scene.title"
+					target="_blank"
+					class="row title nolink"
+				>{{ scene.title }}</Link>
+
+				<ul
+					class="row actors nolist"
+					:title="scene.actors.map((actor) => actor.name).join(', ')"
+				>
+					<li
+						v-for="actor in scene.actors"
+						:key="`actor-${scene.id}-${actor.id}`"
+						class="actor"
+					>
+						<Link
+							:href="`/actor/${actor.id}/${actor.slug}`"
+							class="nolink"
+						>{{ actor.name }}</Link>
+					</li>
+				</ul>
+
+				<ul
+					class="row tags nolist"
+					:title="scene.tags.map((tag) => tag.name).join(', ')"
+				>
+					<li
+						v-if="scene.shootId"
+						class="tag shoot"
+					>
+						<Link
+							:href="scene.studio ? `/studio/${scene.studio.slug}` : null"
+							class="nolink"
+						>{{ scene.shootId }}</Link>
+					</li>
+
+					<li
+						v-for="tag in scene.tags"
+						:key="`tag-${scene.id}-${tag.id}`"
+						class="tag"
+					>
+						<Link
+							:href="`/tag/${tag.slug}`"
+							class="nolink"
+						>{{ tag.name }}</Link>
+					</li>
+				</ul>
+			</div>
 		</div>
 
-		<Link
-			:href="`/scene/${scene.id}/${scene.slug || ''}`"
-			:title="scene.title"
-			target="_blank"
-			class="row title nolink"
-		>{{ scene.title }}</Link>
-
-		<ul
-			class="row actors nolist"
-			:title="scene.actors.map((actor) => actor.name).join(', ')"
-		>
-			<li
-				v-for="actor in scene.actors"
-				:key="`actor-${scene.id}-${actor.id}`"
-				class="actor"
-			>
-				<Link
-					:href="`/actor/${actor.id}/${actor.slug}`"
-					class="nolink"
-				>{{ actor.name }}</Link>
-			</li>
-		</ul>
-
-		<ul
-			class="row tags nolist"
-			:title="scene.tags.map((tag) => tag.name).join(', ')"
-		>
-			<li
-				v-if="scene.shootId"
-				class="tag shoot"
-			>
-				<Link
-					:href="scene.studio ? `/studio/${scene.studio.slug}` : null"
-					class="nolink"
-				>{{ scene.shootId }}</Link>
-			</li>
-
-			<li
-				v-for="tag in scene.tags"
-				:key="`tag-${scene.id}-${tag.id}`"
-				class="tag"
-			>
-				<Link
-					:href="`/tag/${tag.slug}`"
-					class="nolink"
-				>{{ tag.name }}</Link>
-			</li>
-		</ul>
+		<Meta
+			:scene="scene"
+			class="meta-compact"
+		/>
 	</div>
 </template>
 
@@ -139,6 +115,7 @@ import { format } from 'date-fns';
 
 import getPath from '#/src/get-path.js';
 
+import Meta from '#/components/scenes/meta.vue';
 import Heart from '#/components/stashes/heart.vue';
 
 const props = defineProps({
@@ -158,6 +135,8 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 
 <style scoped>
 .tile {
+	display: flex;
+	flex-direction: column;
 	width: 100%;
 	overflow: hidden;
 	background: var(--background-base);
@@ -177,6 +156,20 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 	}
 }
 
+.tile-full {
+	display: flex;
+	flex-direction: column;
+}
+
+.meta-compact {
+	display: none;
+}
+
+.info {
+	display: flex;
+	flex-direction: column;
+}
+
 .poster-container {
 	position: relative;
 	overflow: hidden;
@@ -230,48 +223,6 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 	}
 }
 
-.meta {
-	display: flex;
-	justify-content: space-between;
-	align-items: stretch;
-	padding: 0 .5rem;
-	border-radius: 0 0 .25rem .25rem;
-	margin-bottom: .5rem;
-	position: relative;
-	font-size: .8rem;
-	color: var(--text-light);
-	background: var(--shadow-strong-30);
-	box-shadow: 0 0 3px var(--shadow);
-}
-
-.channel {
-	display: inline-flex;
-	align-items: center;
-	font-weight: bold;
-	padding: .4rem 0;
-}
-
-.favicon-link {
-	display: inline-flex;
-}
-
-.favicon {
-	width: 1rem;
-	height: 1rem;
-	margin-right: .5rem;
-	object-fit: contain;
-}
-
-.date-link {
-	display: flex;
-	align-items: center;
-}
-
-.nodate {
-	font-style: italic;
-	color: var(--highlight);
-}
-
 .row {
 	margin: 0 .5rem .25rem .5rem;
 	font-size: .9rem;
@@ -279,6 +230,7 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 
 .title {
 	display: block;
+	margin-top: .5rem;
 	margin-bottom: .4rem;
 	overflow: hidden;
 	white-space: nowrap;
@@ -319,4 +271,47 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 	font-size: .75rem;
 	font-weight: bold;
 }
+
+@media(--small-20) {
+	.tile-full {
+		flex-direction: row;
+	}
+
+	.poster-container {
+		width: 10rem;
+		flex-shrink: 0;
+	}
+
+	.poster {
+		border-radius: .25rem 0 0 0;
+	}
+
+	.bookmarks.tiled {
+		right: auto;
+		left: 0;
+	}
+
+	.meta-full {
+		display: none;
+	}
+
+	.meta-compact {
+		display: flex;
+	}
+
+	.info {
+		width: 0;
+		flex-grow: 1;
+		justify-content: center;
+	}
+
+	.row {
+		margin: 0 .5rem .5rem .5rem;
+	}
+
+	.title {
+		margin-top: .6rem;
+		margin-bottom: .6rem;
+	}
+}
 </style>