Improved clip layout. Using format module for duration and time.

assets/components/releases/clips.vue

@@ -5,34 +5,38 @@
 			:key="`clip-${clip.id}`"
 			class="clip"
 		>
-			<a
-				v-if="clip.poster"
-				:href="`/media/${clip.poster.path}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="clip-poster-link"
-			>
-				<img
-					:src="`/media/${clip.poster.thumbnail}`"
-					class="clip-poster"
+			<div class="clip-poster-container">
+				<a
+					v-if="clip.poster"
+					:href="`/media/${clip.poster.path}`"
+					target="_blank"
+					rel="noopener noreferrer"
 				>
-			</a>
+					<img
+						:src="`/media/${clip.poster.thumbnail}`"
+						class="clip-poster"
+					>
+				</a>
+
+				<span
+					v-if="clip.duration"
+					class="clip-duration"
+				>{{ formatDuration(clip.duration) }}</span>
+			</div>
 
 			<div class="clip-info">
-				<div class="clip-header">
-					<h3 class="clip-title">{{ clip.title }}</h3>
-					<span
-						v-if="clip.duration"
-						class="clip-duration"
-					>{{ formatDuration(clip.duration) }}</span>
-				</div>
+				<h3
+					v-if="clip.title"
+					class="clip-row clip-title"
+					:title="clip.title"
+				>{{ clip.title }}</h3>
 
-				<p
-					v-if="clip.description"
-					class="clip-description"
-				>{{ clip.description }}</p>
+				<p class="clip-row clip-description">{{ clip.description }}</p>
 
-				<Tags :tags="clip.tags" />
+				<Tags
+					:tags="clip.tags"
+					class="clip-row clip-tags"
+				/>
 			</div>
 		</li>
 	</ul>
@@ -55,35 +59,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.clip {
+@import 'breakpoints';
+
+.clips {
 	display: grid;
-	grid-template-columns: .25fr .75fr;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-gap: 1rem;
+}
+
+.clip {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak);
 	margin: 0 0 .5rem 0;
 }
 
+.clip-poster-container {
+	position: relative;
+	margin: 0 0 1rem 0;
+}
+
 .clip-poster {
 	width: 100%;
-	max-height: 100%;
+	height: 10rem;
 	object-fit: cover;
 	object-position: center;
 }
 
-.clip-info {
-	flex-grow: 1;
-	padding: 1rem 1rem .5rem 1rem;
-	overflow: hidden;
+.clip-duration {
+	color: var(--text-light);
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	padding: .5rem .5rem .75rem 1rem;
+	font-weight: bold;
+	text-shadow: 0 0 2px var(--darken-strong);
 }
 
-.clip-header {
-	display: flex;
-	justify-content: space-between;
+.clip-info {
+	padding: 0 1rem;
+}
+
+.clip-row {
+	margin: 0 0 .75rem 0;
 }
 
 .clip-title {
-	display: inline-block;
 	padding: 0;
-	margin: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.clip-description {
+	line-height: 1.5;
+}
+
+@media(max-width: $breakpoint-micro) {
+	.clips {
+		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	}
 }
 </style>

assets/components/releases/media.vue

@@ -105,7 +105,9 @@ function sfw() {
 }
 
 function photos() {
-	const photosWithClipPosters = (this.release.photos || []).concat(this.release.clips ? this.release.clips.map(clip => clip.poster) : []);
+	const clipPostersById = (this.release.clips || []).reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
+	const uniqueClipPosters = Array.from(new Set(this.release.clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
+	const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
 
 	if (this.release.trailer || this.release.teaser) {
 		// poster will be on trailer video