forked from DebaucheryLibrarian/traxxx
108 lines
1.6 KiB
Vue
108 lines
1.6 KiB
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>
|