traxxx/assets/components/releases/chapters.vue

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