Chapters Redesign

This commit is contained in:
dragos-efy 2024-03-03 20:50:15 +02:00
parent 4ffcb87df6
commit 13c31e71e3
2 changed files with 73 additions and 68 deletions

View File

@ -1,40 +1,19 @@
<template> <template>
<!-- desktop view --> <div class="pp-chapters max-h-75vh">
<div v-if="!mobileLayout" class="pp-chapters flex-col max-h-75vh min-h-64 lt-lg:hidden"> <h6 class="title efy_trans_filter efy_shadow_trans">{{ $t("video.chapters") }} - {{ chapters.length }}</h6>
<h6 aria-label="chapters" title="chapters" class="efy_trans_filter efy_shadow_trans">
{{ $t("video.chapters") }} - {{ chapters.length }}
</h6>
<div <div
v-for="(chapter, index) in chapters" v-for="(chapter, index) in chapters"
:key="chapter.start" :key="chapter.start"
class="chapter efy_anim_pulse" class="chapter flex efy_anim_pulse"
:class="isCurrentChapter(index) ? 'pp-chapter-active' : 'efy_shadow_trans efy_trans_filter'" :class="isCurrentChapter(index) ? 'pp-chapter-active' : 'efy_shadow_trans efy_trans_filter'"
:role="isCurrentChapter(index) ? 'button' : ''"
@click="$emit('seek', chapter.start)"
>
<div class="flex">
<img :src="chapter.image" :alt="chapter.title" />
<div class="flex flex-col m-2">
<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="pp-chapters pp-mobile flex overflow-x-auto">
<div
v-for="(chapter, index) in chapters"
:key="chapter.start"
class="chapter efy_anim_pulse efy_trans_filter"
:class="{ 'pp-chapter-active': isCurrentChapter(index) }"
@click="$emit('seek', chapter.start)" @click="$emit('seek', chapter.start)"
> >
<img :src="chapter.image" :alt="chapter.title" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <span
<span class="text-truncate font-bold" :title="chapter.title" v-text="chapter.title" /> :title="chapter.title"
<span class="px-1 font-bold" v-text="timeFormat(chapter.start)" /> v-text="timeFormat(chapter.start) + ' - ' + chapter.title"
</div> class="text font-bold"
/>
</div> </div>
</div> </div>
</template> </template>
@ -45,10 +24,6 @@ const props = defineProps({
type: Object, type: Object,
default: () => null, default: () => null,
}, },
mobileLayout: {
type: Boolean,
default: () => true,
},
playerPosition: { playerPosition: {
type: Number, type: Number,
default: () => 0, default: () => 0,
@ -66,49 +41,79 @@ defineEmits(["seek"]);
</script> </script>
<style> <style>
.chapter {
@apply cursor-pointer self-center p-2.5;
}
.pp-mobile .chapter img {
@apply w-full h-full;
}
.chapter img {
@apply w-3/10 h-3/10;
}
.text-truncate {
@apply truncate overflow-hidden inline-block w-10em;
}
.pp-chapters { .pp-chapters {
flex-direction: column;
margin: -15rem 0 0 0; margin: -15rem 0 0 0;
padding: var(--efy_gap); padding: var(--efy_gap);
min-width: 400rem;
max-width: 400rem; max-width: 400rem;
gap: var(--efy_gap0); gap: var(--efy_gap);
border-radius: var(--efy_radius); border-radius: var(--efy_radius);
overflow: auto; overflow: auto;
} .title {
.pp-chapters .chapter { background: var(--efy_bg1);
border: var(--efy_border);
padding: 10rem; padding: 10rem;
border-radius: var(--efy_radius); border-radius: var(--efy_radius);
border: var(--efy_border); line-height: 1;
} }
.pp-chapters [title="chapters"] { .chapter {
padding: 5rem 10rem; display: flex;
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: var(--efy_radius); border-radius: var(--efy_radius);
border: var(--efy_border); border: var(--efy_border);
align-items: center;
place-content: start;
cursor: pointer;
& img {
border-radius: var(--efy_radius) 0 0 var(--efy_radius);
max-width: 132rem;
height: 100%;
}
.text {
padding: 15rem;
width: 100%;
height: 100%;
display: flex;
align-items: center;
place-content: start;
border-radius: 0 var(--efy_radius) var(--efy_radius) 0;
}
}
} }
.pp-chapters .chapter .flex { :is(.pp-chapter-active, .pp-chapters .chapter:hover) .text {
gap: 0 15rem;
}
.pp-chapters.pp-mobile {
margin: 15rem 0 0 0;
max-width: 100%;
}
.pp-chapter-active,
.pp-chapters .chapter:hover {
background: var(--efy_color); background: var(--efy_color);
background-clip: padding-box;
color: var(--efy_text2); color: var(--efy_text2);
border: 0 !important;
margin: 0; margin: 0;
} }
@media (max-width: 1023px) {
.pp-chapters {
flex-direction: row;
margin: var(--efy_gap) 0 0 0;
max-width: 100%;
padding: 0 0 var(--efy_gap) 0;
.title {
display: none;
}
.chapter {
flex-direction: column;
& img {
border-radius: var(--efy_radius) var(--efy_radius) 0 0;
max-width: 100%;
}
.text {
padding: 7rem 8rem 5rem 8rem;
display: inline-block;
width: 160rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 0 0 var(--efy_radius) var(--efy_radius);
}
}
}
}
</style> </style>

View File

@ -26,7 +26,7 @@
--efy_text: oklch(.9 0 0); --efy_text: oklch(.9 0 0);
} /*Your code starts bellow*/ } /*Your code starts bellow*/
/*BG 1*/ .comment, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover), .pp-chapters [title=chapters] {background: var(--efy_bg1)} /*BG 1*/ .comment, .pp-mobile-nav a, .pp-mobile-nav p, .suggestion-selected, .pp-chapters .chapter:not(.pp-chapter-active, .chapter:hover) {background: var(--efy_bg1)}
/*Bold*/ .btn {font-weight: bold} /*Bold*/ .btn {font-weight: bold}
/*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container ul, .pp-mobile-btn i, .pp-mobile-nav a, .pp-mobile-nav p, .modal-container button:first-of-type svg {margin: 0} /*Margin: 0*/ .pp-watch-buttons .btn, .suggestions-container li, .suggestions-container ul, .pp-mobile-btn i, .pp-mobile-nav a, .pp-mobile-nav p, .modal-container button:first-of-type svg {margin: 0}
/*Text-Align: Center*/ .btn, .pp-import-channel, .pp-sortby-feed, .pp-playlist-add-modal-top, .pp-nav, .pp-nav > div.flex-1.flex.justify-start > a, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author {align-items: center; text-align: center} /*Text-Align: Center*/ .btn, .pp-import-channel, .pp-sortby-feed, .pp-playlist-add-modal-top, .pp-nav, .pp-nav > div.flex-1.flex.justify-start > a, .pp-watch-bellow-options .flex.items-center, .pp-channel-page-author {align-items: center; text-align: center}