TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: F5B9A961BF6EAF0E
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> <template>
<!-- desktop view --> <!-- desktop / mobile view -->
<div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-w-35vw max-h-75vh min-h-64 lt-lg:hidden"> <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"> <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
{{ $t("video.chapters") }} ({{ chapters.length }}) {{ $t("video.chapters") }} ({{ chapters.length }})
</h2> </h2>
@ -21,8 +27,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- mobile view --> <!-- old mobile view -->
<div v-else class="flex overflow-x-auto"> <!-- <div v-else class="flex overflow-x-auto">
<div <div
:key="chapter.start" :key="chapter.start"
v-for="(chapter, index) in chapters" 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)" /> <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div> -->
</template> </template>
<style> <style>