traxxx/assets/components/releases/movie.vue

108 lines
1.6 KiB
Vue
Raw Normal View History

<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>