82 lines
1.3 KiB
Vue
82 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="serie-tile">
|
||
|
|
<a
|
||
|
|
:href="`/serie/${serie.id}/${serie.slug}`"
|
||
|
|
class="poster-container"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
v-if="serie.poster"
|
||
|
|
:src="getPath(serie.poster, 'thumbnail')"
|
||
|
|
:style="{ 'background-image': `url(${getPath(serie.poster, 'lazy')})` }"
|
||
|
|
class="poster"
|
||
|
|
loading="lazy"
|
||
|
|
>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="tile-info">
|
||
|
|
<a
|
||
|
|
:href="`/serie/${serie.id}/${serie.slug}`"
|
||
|
|
class="title nolink"
|
||
|
|
>{{ serie.title }}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import getPath from '#/src/get-path.js';
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
serie: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.serie-tile {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||
|
|
border-radius: .25rem;
|
||
|
|
overflow: hidden;
|
||
|
|
background: var(--background-base);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||
|
|
|
||
|
|
:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
|
||
|
|
fill: var(--text-light);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.unstashed {
|
||
|
|
opacity: .5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.poster-container {
|
||
|
|
aspect-ratio: 16/9;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.poster {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile-info {
|
||
|
|
display: flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
padding: .25rem .5rem;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
</style>
|