DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Improved chapter timeline rendering.

This commit is contained in:
DebaucheryLibrarian 2024-10-30 02:40:19 +01:00
parent d655ed9faa
commit bcde0d8cd5
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
components/scenes/chapters.vue
View File

@ -5,15 +5,22 @@
> >
<ul class="timeline-items nolist"> <ul class="timeline-items nolist">
<li <li
v-for="chapter in timeline" v-for="(chapter, index) in timeline"
:key="`chapter-${chapter.id}`" :key="`chapter-${chapter.id}`"
:style="{ left: `${(chapter.time / duration) * 100}%` }" :style="{
left: `${(chapter.time / duration) * 100}%`,
bottom: `${(index % 3) * 1.5}rem`,
}"
:title="formatDuration(chapter.time)" :title="formatDuration(chapter.time)"
class="timeline-item" class="timeline-item"
><a >
:href="`/tag/${chapter.tags[0].slug}`" <a
class="link" :href="`/tag/${chapter.tags[0].slug}`"
>{{ chapter.tags[0]?.name || '&nbsp;' }}</a></li> class="link"
>{{ chapter.tags[0]?.name || '&nbsp;' }}</a>
<span class="timeline-timestamp">{{ formatDuration(chapter.time) }}</span>
</li>
</ul> </ul>
</div> </div>
@ -89,6 +96,8 @@ const props = defineProps({
}, },
}); });
console.log(props.chapters);
const lastChapter = props.chapters.at(-1); const lastChapter = props.chapters.at(-1);
const duration = lastChapter.time + lastChapter.duration; const duration = lastChapter.time + lastChapter.duration;
@ -196,10 +205,15 @@ const timeline = computed(() => {
} }
} }
.timeline {
overflow: hidden;
padding-right: 5rem; /* ensure last tag is cleared */
}
.timeline-items { .timeline-items {
position: relative; position: relative;
height: 5rem; height: 5rem;
border-bottom: solid 1px var(--shadow-weak); border-bottom: solid 1px var(--shadow-weak-30);
} }
.timeline-item { .timeline-item {
@ -207,30 +221,32 @@ const timeline = computed(() => {
bottom: -.25rem; bottom: -.25rem;
padding: .1rem .5rem; padding: .1rem .5rem;
border-radius: .6rem; border-radius: .6rem;
color: var(--primary);
background: var(--background); background: var(--background);
transform: rotate(-60deg); box-shadow: 0 0 3px var(--shadow-weak-30);
transform-origin: 0 50%;
box-shadow: 0 0 3px var(--shadow-weak);
font-size: .8rem; font-size: .8rem;
font-weight: bold;
.link { .link {
color: inherit; color: var(--primary);
font-weight: bold;
} }
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 1rem; width: 1px;
height: 2px; height: 5rem;
position: absolute; position: absolute;
left: calc(-1rem + 1px); left: 0;
margin: .3rem .5rem 0 0; margin: .3rem .5rem 0 0;
background: var(--primary); border-left: dashed 1px var(--shadow-weak-30);
} }
} }
.timeline-timestamp {
color: var(--glass);
margin-left: .25rem;
}
@media(--small-30) { @media(--small-30) {
.chapters { .chapters {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

12
pages/scene/+Page.vue
View File

@ -168,12 +168,6 @@
</div> </div>
</div> </div>
<Chapters
v-if="scene.chapters.length > 0"
:chapters="scene.chapters"
class="section"
/>
<div <div
v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0" v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
class="section details" class="section details"
@ -243,6 +237,12 @@
</div> </div>
</div> </div>
<Chapters
v-if="scene.chapters.length > 0"
:chapters="scene.chapters"
class="section"
/>
<div <div
v-if="scene.description" v-if="scene.description"
class="section" class="section"