From 4fa73663c6e493567752bf65a071fbd3b3df3d37 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sat, 10 Jun 2023 14:17:41 +0530
Subject: [PATCH] refactor: vertical chapters layout for mobile screen

This layout aligns with youtube's chapter layout on mobile
---
 src/components/ChaptersBar.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 64d5b013..b77e0fb3 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -1,6 +1,12 @@
 <template>
-    <!-- desktop view -->
-    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden">
+    <!-- desktop / mobile view -->
+    <div
+        :class="
+            !mobileLayout
+                ? 'flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden'
+                : 'flex flex-col overflow-y-scroll max-h-64'
+        "
+    >
         <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
         </h2>
@@ -21,8 +27,8 @@
             </div>
         </div>
     </div>
-    <!-- mobile view -->
-    <div v-else class="flex overflow-x-auto">
+    <!-- old mobile view -->
+    <!-- <div v-else class="flex overflow-x-auto">
         <div
             :key="chapter.start"
             v-for="(chapter, index) in chapters"
@@ -36,7 +42,7 @@
                 <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
-    </div>
+    </div> -->
 </template>
 
 <style>