From 42f38a67f33812d89759080ff2ab592af8808489 Mon Sep 17 00:00:00 2001 From: Dragos <86549690+dragos-efy@users.noreply.github.com> Date: Mon, 5 Sep 2022 20:32:02 +0300 Subject: [PATCH] Update ChaptersBar.vue --- src/components/ChaptersBar.vue | 39 ++++++++++++---------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue index a1952bba..b6e0a01b 100644 --- a/src/components/ChaptersBar.vue +++ b/src/components/ChaptersBar.vue @@ -1,64 +1,51 @@ <template> <!-- desktop view --> - <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden"> - <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters"> - {{ $t("video.chapters") }} ({{ chapters.length }}) - </h2> + <div v-if="!mobileLayout" class="pp-chapters flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden"> + <h6 aria-label="chapters" title="chapters">{{ $t("video.chapters") }} - {{ chapters.length }}</h6> <div :key="chapter.start" v-for="(chapter, index) in chapters" @click="$emit('seek', chapter.start)" - class="chapter-vertical" - :class="{ 'bg-red-500/50': isCurrentChapter(index) }" + class="chapter efy_anim_pulse" + :class="{ 'pp-chapter-active': isCurrentChapter(index) }" > <div class="flex"> - <span class="mt-5 mr-2 text-current" v-text="index + 1" /> <img :src="chapter.image" :alt="chapter.title" /> <div class="flex flex-col m-2"> - <span class="text-sm" :title="chapter.title" v-text="chapter.title" /> - <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> + <span :title="chapter.title" v-text="index + 1 + '. ' + chapter.title" class="font-bold" /> + <span class="font-bold" v-text="timeFormat(chapter.start)" /> </div> </div> </div> </div> <!-- mobile view --> - <div v-else class="flex overflow-x-auto"> + <div v-else class="pp-chapters pp-mobile flex overflow-x-auto"> <div :key="chapter.start" v-for="(chapter, index) in chapters" @click="$emit('seek', chapter.start)" - class="chapter" - :class="{ 'bg-red-500/50': isCurrentChapter(index) }" + class="chapter efy_anim_pulse" + :class="{ 'pp-chapter-active': isCurrentChapter(index) }" > <img :src="chapter.image" :alt="chapter.title" /> <div class="m-1 flex"> - <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> - <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> + <span class="text-truncate font-bold" :title="chapter.title" v-text="chapter.title" /> + <span class="px-1 font-bold" v-text="timeFormat(chapter.start)" /> </div> </div> </div> </template> <style> -::-webkit-scrollbar { - height: 5px; -} .chapter { @apply cursor-pointer self-center p-2.5; } -.chapter img { +.pp-mobile .chapter img { @apply w-full h-full; } -.chapter-vertical { - @apply cursor-pointer self-center p-2.5; -} -.chapter-vertical img { +.chapter img { @apply w-3/10 h-3/10; } - -.chapter-vertical:hover { - @apply bg-gray-500; -} .text-truncate { @apply truncate overflow-hidden inline-block w-10em; }