Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-11-04 06:31:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: vertical chapters layout for mobile screen

Browse Source 
This layout aligns with youtube's chapter layout on mobile
This commit is contained in:
Sai Karthik
2023-06-10 14:17:41 +05:30
parent bc3dbe9ad5
commit 4fa73663c6
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ChaptersBar.vue
View File

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