traxxx/assets/components/releases/movie.vue

<template>
	<div
		v-if="movie"
		class="movie"
	>
		<Media
			:release="movie"
		/>

		<Details :release="movie" />

		<div class="column">
			<h2 class="title">{{ movie.title }}</h2>

			<p>{{ movie.description }}</p>

			<div
				v-lazy-container="{ selector: '.lazy' }"
				class="actors"
			>
				<ActorTile
					v-for="actor in movie.actors"
					:key="`actor-${actor.id}`"
					:actor="actor"
				/>
			</div>

			<Tags
				v-if="movie.tags && movie.tags.length > 0"
				:tags="movie.tags"
			/>

			<Releases
				:releases="movie.scenes"
			/>
		</div>
	</div>
</template>

<script>
import Media from './media.vue';
import Details from './details.vue';
import Tags from './tags.vue';
import Releases from './releases.vue';
import ActorTile from '../actors/tile.vue';

async function mounted() {
	this.movie = await this.$store.dispatch('fetchMovieById', this.$route.params.movieId);
}

export default {
	components: {
		Details,
		Tags,
		Media,
		ActorTile,
		Releases,
	},
	data() {
		return {
			movie: null,
		};
	},
	mounted,
};
</script>

<style lang="scss" scoped>
.title {
	padding: .5rem 0;
	margin: 0 0 1rem 0;
	color: var(--shadow-strong);
}

.covers {
	display: inline-block;
	margin: 0 0 1rem 0;
}

.cover {
	height: 20rem;
	margin: 0 1rem 0 0;
	box-shadow: 0 0 3px var(--shadow-weak);
}

.trailer {
	height: 20rem;
}

.date {
	display: inline-block;
	padding: 1rem;
}

.content-inner {
	padding: 1rem;
}

.actors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: .5rem;
    flex-grow: 1;
    flex-wrap: wrap;
	margin: 0 0 1rem 0;
}
</style>