Improved compact scene tile layout, added dark versions of entity favicons.

assets/components/releases/releases.vue

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .heading {
     padding: 0;
@@ -111,15 +111,9 @@ export default {
     font-weight: bold;
 }
 
-@media(max-width: $breakpoint3) {
+@media(max-width: $breakpoint-kilo) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    }
-}
-
-@media(max-width: $breakpoint2) {
-    .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-gap: .5rem;
     }
 }
 </style>

assets/components/releases/scene-tile.vue

@@ -4,122 +4,132 @@
 		:class="{ new: release.isNew }"
 		class="tile"
 	>
-		<span class="poster">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="link"
-			>
-				<img
-					v-if="release.poster"
-					:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
-					:style="{ 'background-image': sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}` }"
-					:alt="release.title"
-					class="thumbnail"
-					loading="lazy"
-				>
-
-				<span
-					v-else-if="release.covers && release.covers.length > 0"
-					class="covers"
+		<div class="tile-body">
+			<span class="poster">
+				<a
+					:href="`/scene/${release.id}/${release.slug || ''}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="link"
 				>
 					<img
-						v-for="cover in release.covers"
-						:key="cover.id"
-						:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
-						:style="{ 'background-image': sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
+						v-if="release.poster"
+						:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
+						:style="{ 'background-image': sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}` }"
 						:alt="release.title"
-						class="thumbnail cover"
+						class="thumbnail"
 						loading="lazy"
 					>
-				</span>
 
-				<div
-					v-else
-					:title="release.title"
-					class="thumbnail"
-				>No thumbnail available</div>
-			</a>
-
-			<Details :release="release" />
-		</span>
-
-		<div class="info">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="row link"
-			>
-				<h3
-					v-if="release.title"
-					v-tooltip.bottom="release.title"
-					:title="release.title"
-					class="title"
-				>{{ release.title }}</h3>
-
-				<h3
-					v-else-if="release.actors.length > 0"
-					class="title title-composed"
-				>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
-
-				<h3
-					v-else
-					class="title title-empty"
-				>{{ release.entity.name }}</h3>
-			</a>
-
-			<span class="row">
-				<ul
-					class="actors nolist"
-					:title="release.actors.map(actor => actor.name).join(', ')"
-				>
-					<li
-						v-for="actor in release.actors"
-						:key="actor.id"
-						class="actor"
+					<span
+						v-else-if="release.covers && release.covers.length > 0"
+						class="covers"
 					>
-						<router-link
-							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
-							class="actor-link"
-						>{{ actor.name }}</router-link>
-					</li>
-				</ul>
+						<img
+							v-for="cover in release.covers"
+							:key="cover.id"
+							:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
+							:style="{ 'background-image': sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
+							:alt="release.title"
+							class="thumbnail cover"
+							loading="lazy"
+						>
+					</span>
+
+					<div
+						v-else
+						:title="release.title"
+						class="thumbnail"
+					>No thumbnail available</div>
+				</a>
 			</span>
 
-			<div class="labels">
-				<router-link
-					v-if="release.shootId && release.studio"
-					:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</router-link>
+			<div class="info">
+				<Details
+					:release="release"
+					class="details-wide"
+				/>
 
-				<span
-					v-else-if="release.shootId"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</span>
-
-				<ul
-					v-if="release.tags.length > 0"
-					:title="release.tags.map(tag => tag.name).join(', ')"
-					class="tags nolist"
+				<a
+					:href="`/scene/${release.id}/${release.slug || ''}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="row link"
 				>
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
+					<h3
+						v-if="release.title"
+						v-tooltip.bottom="release.title"
+						:title="release.title"
+						class="title"
+					>{{ release.title }}</h3>
+
+					<h3
+						v-else-if="release.actors.length > 0"
+						class="title title-composed"
+					>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
+
+					<h3
+						v-else
+						class="title title-empty"
+					>{{ release.entity.name }}</h3>
+				</a>
+
+				<span class="row">
+					<ul
+						class="actors nolist"
+						:title="release.actors.map(actor => actor.name).join(', ')"
 					>
-						<router-link
-							:to="`/tag/${tag.slug}`"
-							class="tag-link"
-						>{{ tag.name }}</router-link>
-					</li>
-				</ul>
+						<li
+							v-for="actor in release.actors"
+							:key="actor.id"
+							class="actor"
+						>
+							<router-link
+								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+								class="actor-link"
+							>{{ actor.name }}</router-link>
+						</li>
+					</ul>
+				</span>
+
+				<div class="labels">
+					<router-link
+						v-if="release.shootId && release.studio"
+						:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
+						:title="release.studio && release.studio.name"
+						class="shoot nolink"
+					>{{ release.shootId }}</router-link>
+
+					<span
+						v-else-if="release.shootId"
+						:title="release.studio && release.studio.name"
+						class="shoot nolink"
+					>{{ release.shootId }}</span>
+
+					<ul
+						v-if="release.tags.length > 0"
+						:title="release.tags.map(tag => tag.name).join(', ')"
+						class="tags nolist"
+					>
+						<li
+							v-for="tag in release.tags"
+							:key="`tag-${tag.slug}`"
+							class="tag"
+						>
+							<router-link
+								:to="`/tag/${tag.slug}`"
+								class="tag-link"
+							>{{ tag.name }}</router-link>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</div>
+
+		<Details
+			:release="release"
+			class="details-compact"
+		/>
 	</div>
 </template>
 
@@ -147,7 +157,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .tile {
     background: var(--background);
@@ -172,9 +182,13 @@ export default {
 	}
 }
 
+.tile-body {
+	display: flex;
+	flex-direction: column;
+}
+
 .poster {
     position: relative;
-    margin: 0 0 .6rem 0;
 }
 
 .covers {
@@ -213,6 +227,7 @@ export default {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+	overflow: hidden;
 }
 
 .link {
@@ -298,4 +313,53 @@ export default {
         color: var(--primary);
     }
 }
+
+.details-wide {
+	margin: 0 0 .5rem 0;
+}
+
+.details-compact {
+	display: none;
+}
+
+@media(max-width: $breakpoint-kilo) {
+	.tile-body {
+		flex-direction: row;
+	}
+
+	.poster {
+		margin: 0;
+	}
+
+	.thumbnail {
+		width: 9rem;
+		height: 100%;
+	}
+
+	.info {
+		padding: .5rem .25rem 0 .25rem;
+	}
+
+	.row {
+		margin: 0 0 .15rem 0;
+	}
+
+	.title,
+	.actor-link {
+		font-size: .9rem;
+	}
+
+	.details-wide {
+		display: none;
+	}
+
+	.details-compact {
+		display: flex;
+		border-top: solid 1px var(--shadow-hint);
+	}
+
+	.shoot {
+		display: none;
+	}
+}
 </style>

assets/components/releases/tile-details.vue

@@ -12,10 +12,17 @@
 				:title="`Part of ${release.entity.parent.name}`"
 				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
 				class="site-link"
-			><img
-				:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
-				class="favicon"
-			></router-link>
+			>
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
+					class="favicon favicon-light"
+				>
+
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
+					class="favicon favicon-dark"
+				>
+			</router-link>
 
 			<router-link
 				v-tooltip.bottom="`More from ${release.entity.name}`"
@@ -29,10 +36,17 @@
 			v-else
 			:to="`/${release.entity.type}/${release.entity.slug}`"
 			class="site site-link"
-		><img
-			:src="`/img/logos/${release.entity.slug}/favicon.png`"
-			class="favicon"
-		>{{ release.entity.name }}</router-link>
+		>
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
+				class="favicon favicon-light"
+			>
+
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
+				class="favicon favicon-dark"
+			>{{ release.entity.name }}
+		</router-link>
 
 		<a
 			v-if="release.date"
@@ -68,6 +82,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .details {
     width: 100%;
     display: flex;
@@ -79,8 +95,9 @@ export default {
 	box-shadow: 0 0 3px var(--darken);
 
     .favicon {
-		width: 1rem;
-        margin: 0 .25rem 0 0;
+		height: 2rem;
+		box-sizing: border-box;
+		padding: .5rem;
     }
 
 	/*
@@ -115,9 +132,43 @@ export default {
 	}
 }
 
+.site {
+	padding: 0 .5rem 0 0;
+}
+
 .site-link {
     display: flex;
     color: var(--text-light);
     text-decoration: none;
 }
+
+.favicon-dark {
+	display: none;
+}
+
+@media(max-width: $breakpoint-kilo) {
+	/* light details bar
+	.details {
+		background: var(--background);
+		box-shadow: none;
+
+		.favicon-dark {
+			display: inline-block;
+		}
+
+		.favicon-light {
+			display: none;
+		}
+	}
+
+	.site-link,
+	.date {
+		color: var(--text);
+	}
+	*/
+
+	.site {
+		padding: 0 .5rem 0 0;
+	}
+}
 </style>