Added rudimentary timeline to display tag chapters.

This commit is contained in:
DebaucheryLibrarian 2021-03-15 04:59:08 +01:00
parent 1fb7d384fb
commit 398161b03b
2 changed files with 96 additions and 1 deletions

View File

@ -1,5 +1,26 @@
<template> <template>
<ul class="chapters nolist"> <div
v-if="timeline"
class="timeline"
>
<ul class="timeline-items nolist">
<li
v-for="chapter in timeline"
:key="`chapter-${chapter.id}`"
:style="{ left: `${(chapter.time / duration) * 100}%` }"
:title="formatDuration(chapter.time)"
class="timeline-item"
><router-link
:to="`/tag/${chapter.tags[0].slug}`"
class="link"
>{{ chapter.tags[0]?.name || '&nbsp;' }}</router-link></li>
</ul>
</div>
<ul
v-else
class="chapters nolist"
>
<li <li
v-for="chapter in chapters" v-for="chapter in chapters"
:key="`chapter-${chapter.id}`" :key="`chapter-${chapter.id}`"
@ -55,6 +76,14 @@
<script> <script>
import Tags from './tags.vue'; import Tags from './tags.vue';
function timeline() {
if (this.chapters.every(chapter => chapter.time)) {
return this.chapters.filter(chapter => chapter.tags?.length > 0);
}
return null;
}
export default { export default {
components: { components: {
Tags, Tags,
@ -65,6 +94,16 @@ export default {
default: () => [], default: () => [],
}, },
}, },
data() {
const lastChapter = this.chapters[this.chapters.length - 1];
return {
duration: lastChapter.time + lastChapter.duration,
};
},
computed: {
timeline,
},
}; };
</script> </script>
@ -153,6 +192,41 @@ export default {
line-height: 1.5; line-height: 1.5;
} }
.timeline-items {
position: relative;
height: 5rem;
border-bottom: solid 1px var(--shadow-weak);
}
.timeline-item {
position: absolute;
bottom: -.25rem;
padding: .1rem .5rem;
border-radius: .6rem;
color: var(--primary);
background: var(--background);
transform: rotate(-60deg);
transform-origin: 0 50%;
box-shadow: 0 0 3px var(--shadow-weak);
font-size: .8rem;
font-weight: bold;
.link {
color: inherit;
}
&:before {
content: '';
display: inline-block;
width: 1rem;
height: 2px;
position: absolute;
left: calc(-1rem + 1px);
margin: .3rem .5rem 0 0;
background: var(--primary);
}
}
@media(max-width: $breakpoint-micro) { @media(max-width: $breakpoint-micro) {
.chapters { .chapters {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));

View File

@ -169,6 +169,10 @@ const tags = [
group: 'oral', group: 'oral',
priority: 6, priority: 6,
}, },
{
name: 'ass worship',
slug: 'ass-worship',
},
{ {
name: 'ball licking', name: 'ball licking',
slug: 'ball-licking', slug: 'ball-licking',
@ -494,6 +498,10 @@ const tags = [
name: 'gag', name: 'gag',
slug: 'gag', slug: 'gag',
}, },
{
name: 'gagging',
slug: 'gagging',
},
{ {
name: 'gangbang', name: 'gangbang',
slug: 'gangbang', slug: 'gangbang',
@ -785,6 +793,10 @@ const tags = [
slug: 'schoolgirl', slug: 'schoolgirl',
group: 'roleplay', group: 'roleplay',
}, },
{
name: 'sex',
slug: 'sex',
},
{ {
name: 'shaved', name: 'shaved',
slug: 'shaved', slug: 'shaved',
@ -1670,6 +1682,10 @@ const aliases = [
name: 'prolapsing', name: 'prolapsing',
for: 'anal-prolapse', for: 'anal-prolapse',
}, },
{
name: 'pussy fingering',
for: 'fingering',
},
{ {
name: 'raven', name: 'raven',
for: 'black-hair', for: 'black-hair',
@ -1777,6 +1793,11 @@ const aliases = [
for: 'mfm', for: 'mfm',
secondary: true, secondary: true,
}, },
{
name: 'spoon',
for: 'spooning',
secondary: true,
},
{ {
name: 'sex toy', name: 'sex toy',
for: 'toys', for: 'toys',