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

193 lines
3.1 KiB
Vue
Raw Normal View History

<template>
<div class="tile">
<Details :release="movie" />
<div class="movie">
<router-link
2020-09-08 00:20:15 +00:00
:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
class="cover"
>
<img
v-if="movie.covers[0]"
:src="getPath(movie.covers[0], 'thumbnail')"
:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
loading="lazy"
>
</router-link>
<div class="info">
<router-link
2020-09-08 00:20:15 +00:00
:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: 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>
</div>
</template>
<script>
import Details from './tile-details.vue';
function sfw() {
return this.$store.state.ui.sfw;
}
export default {
components: {
Details,
},
props: {
movie: {
type: Object,
default: null,
},
},
computed: {
sfw,
},
};
</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 {
height: 16rem;
display: flex;
}
.title-link {
color: var(--text);
text-decoration: none;
}
.cover {
height: 100%;
box-shadow: 0 0 3px var(--darken-weak);
img {
height: 100%;
max-width: 12rem;
background-position: center;
background-size: cover;
object-fit: cover;
object-position: center;
}
}
.info {
display: flex;
flex-direction: column;
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 {
height: 0;
flex-grow: 1;
padding: 0 1rem;
line-height: 1.5;
overflow: hidden;
}
.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: .25rem 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-kilo) {
.movie {
height: 12rem;
}
/* ensure no half actor names show */
.actors {
margin: 0 0 1rem 0;
}
}
</style>