Added dedicated compact scene tile.

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>

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>

components/scenes/tile.vue

@@ -6,6 +6,7 @@
 			'is-new': scene.isNew,
 		}"
 	>
+		<div class="tile-full">
 			<div class="poster-container">
 				<Link
 					:href="`/scene/${scene.id}/${scene.slug || ''}`"
@@ -44,44 +45,12 @@
 				><Icon icon="star-full" /></span>
 			</div>
 
-		<div class="meta">
+			<Meta
-			<div class="channel">
+				:scene="scene"
-				<Link
+				class="meta-full"
-					: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>
 
+			<div class="info">
 				<Link
 					:href="`/scene/${scene.id}/${scene.slug || ''}`"
 					:title="scene.title"
@@ -131,6 +100,13 @@
 					</li>
 				</ul>
 			</div>
+		</div>
+
+		<Meta
+			:scene="scene"
+			class="meta-compact"
+		/>
+	</div>
 </template>
 
 <script setup>
@@ -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>