Modularized release component between movie and scene. Added Kink Classics channel.

assets/components/releases/movie-tile.vue

@@ -0,0 +1,171 @@
+<template>
+	<div class="tile">
+		<div class="movie">
+			<router-link
+				:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+				class="cover"
+			>
+				<img
+					v-if="movie.covers[0]"
+					:src="`/media/${movie.covers[0].thumbnail}`"
+				>
+			</router-link>
+
+			<div class="info">
+				<router-link
+					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+					class="title-link"
+				>
+					<h3 class="title">{{ movie.title }}</h3>
+				</router-link>
+
+				<ul
+					class="actors nolist"
+					:title="movie.actors.map(actor => actor.name).join(', ')"
+				>
+					<li
+						v-for="actor in movie.actors"
+						:key="`tag-${movie.id}-${actor.id}`"
+						class="actor"
+					><router-link
+						:to="`/actor/${actor.id}/${actor.slug}`"
+						class="actor-link"
+					>{{ actor.name }}</router-link></li>
+				</ul>
+
+				<ul
+					class="tags nolist"
+					:title="movie.tags.map(tag => tag.name).join(', ')"
+				>
+					<li
+						v-for="tag in movie.tags"
+						:key="`tag-${movie.id}-${tag.id}`"
+						class="tag"
+					><router-link
+						:to="`/tag/${tag.slug}`"
+						class="tag-link"
+					>{{ tag.name }}</router-link></li>
+				</ul>
+			</div>
+		</div>
+
+		<Details :release="movie" />
+	</div>
+</template>
+
+<script>
+import Details from './tile-details.vue';
+
+export default {
+	components: {
+		Details,
+	},
+	props: {
+		movie: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.tile {
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+	font-size: 0;
+}
+
+.movie {
+	display: flex;
+}
+
+.title-link {
+	color: var(--text);
+	text-decoration: none;
+}
+
+.cover {
+	height: 16rem;
+	box-shadow: 0 0 3px var(--darken-weak);
+
+	img {
+		height: 100%;
+		max-width: 12rem;
+		object-fit: cover;
+		object-position: center ;
+	}
+}
+
+.info {
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+.title {
+	box-sizing: border-box;
+	padding: 1rem;
+	margin: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.actors {
+	padding: 0 1rem;
+	margin: 0 0 1rem 0;
+	line-height: 1.5;
+}
+
+.actor:not(:last-child)::after {
+	content: ',';
+	margin: 0 .25rem 0 0;
+	font-size: 1rem;
+}
+
+.actor-link {
+	font-size: 1rem;
+	color: var(--link);
+	text-decoration: none;
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.tags {
+	padding: .2rem 1rem 0 1rem;
+	height: 1.75rem;
+	line-height: 2;
+	overflow: hidden;
+}
+
+.tag {
+	margin: 0 0 .5rem 0;
+}
+
+.tag-link {
+	background: var(--background);
+	font-size: .75rem;
+	padding: .25rem .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	text-decoration: none;
+	box-shadow: 0 0 3px var(--shadow-weak);
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+@media(max-width: $breakpoint) {
+	.cover {
+		height: 12rem;
+	}
+}
+</style>