From 32c3f6e4e4356c572aaebde3be938766a52fc994 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Fri, 17 Jun 2022 10:36:05 +0530
Subject: [PATCH] feat: horizontal scrollable chapters as tiles
---
src/components/ChaptersBar.vue | 33 +++++++++++++++++++++++++--------
1 file changed, 25 insertions(+), 8 deletions(-)
diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 412f6833..0f9b8c1f 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,18 +1,35 @@
<template>
- <h2 v-t="'video.chapters'" />
- <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
- <img :src="chapter.image" :alt="chapter.title" class="h-12" />
- <div class="ml-1">
- <span class="text-xl" v-text="chapter.title" />
- <br />
- <span class="text-sm" v-text="timeFormat(chapter.start)" />
+ <!-- <h2 v-t="'video.chapters'" class="mb-5" /> -->
+ <div class="flex overflow-x-auto">
+ <div :key="chapter.start" v-for="chapter in chapters" @click="$emit('seek', chapter.start)" class="chapter">
+ <img :src="chapter.image" :alt="chapter.title" class="" />
+ <div class="m-1 flex">
+ <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
+ <span class="text-sm font-bold text-yellow-500" v-text="timeFormat(chapter.start)" />
+ </div>
</div>
</div>
</template>
<style>
+::-webkit-scrollbar {
+ height: 5px;
+}
.chapter {
- @apply flex items-center mb-2 cursor-pointer w-sm max-w-90vw;
+ @apply cursor-pointer;
+ align-self: center;
+ padding: 10px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+.text-truncate {
+ white-space: nowrap;
+ width: 10em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
}
</style>