traxxx/assets/components/releases/chapters.vue

162 lines
2.7 KiB
Vue
Raw Normal View History

2021-02-26 23:37:22 +00:00
<template>
<ul class="chapters nolist">
<li
v-for="chapter in chapters"
:key="`chapter-${chapter.id}`"
class="chapter"
>
<a
v-if="chapter.poster"
:href="getPath(chapter.poster)"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="getPath(chapter.poster, 'thumbnail')"
class="chapter-poster"
>
</a>
<span class="chapter-details">
<span
v-if="chapter.time"
v-tooltip="'Time in video'"
class="chapter-time"
><Icon icon="film3" /> {{ formatDuration(chapter.time) }}</span>
<span
v-if="chapter.duration"
v-tooltip="'Duration'"
class="chapter-duration"
><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
</span>
<div class="chapter-info">
<h3
v-if="chapter.title"
class="chapter-row chapter-title"
:title="chapter.title"
>{{ chapter.title }}</h3>
<p
v-if="chapter.description"
class="chapter-row chapter-description"
>{{ chapter.description }}</p>
<Tags
:tags="chapter.tags"
class="chapter-row chapter-tags"
/>
</div>
</li>
</ul>
</template>
<script>
import Tags from './tags.vue';
export default {
components: {
Tags,
},
props: {
chapters: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss">
.chapter-tags.tags-container {
margin: 0 0 .5rem 0;
.tags {
padding: 2px 0 0 2px;
}
}
</style>
<style lang="scss" scoped>
@import 'breakpoints';
.chapters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
}
.chapter {
display: flex;
flex-direction: column;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
margin: 0 0 .5rem 0;
font-size: 0;
}
.chapter-poster {
width: 100%;
height: 10rem;
object-fit: cover;
object-position: center;
}
.chapter-details {
height: 1.75rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .5rem;
margin: 0 0 .75rem 0;
color: var(--text-light);
background: var(--profile);
font-size: .9rem;
font-weight: bold;
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
}
.chapter-duration,
.chapter-time {
display: flex;
align-items: center;
}
.chapter-duration .icon {
/* narrower icon */
margin: -.1rem .3rem 0 0;
}
.chapter-info {
padding: 0 .5rem;
font-size: 1rem;
}
.chapter-row {
margin: 0 0 .5rem 0;
}
.chapter-title {
padding: 0;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chapter-description {
line-height: 1.5;
}
@media(max-width: $breakpoint-micro) {
.chapters {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
}
</style>