traxxx/assets/components/releases/movie-tile.vue

172 lines
2.7 KiB
Vue
Raw Normal View History

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