Hiding more than 2 rows of tags under expand button on scene page. Fixed album background being bright in dark mode.

This commit is contained in:
DebaucheryLibrarian 2021-02-05 02:35:00 +01:00
parent 5906ed5948
commit 3e0a4406eb
3 changed files with 108 additions and 17 deletions

View File

@ -92,7 +92,7 @@ export default {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
background: var(--shadow-extreme); background: var(--darken-extreme);
z-index: 10; z-index: 10;
} }

View File

@ -51,12 +51,10 @@
</h2> </h2>
</div> </div>
<div <Tags
v-if="release.tags.length > 0" v-if="release.tags.length > 0"
class="row" :tags="release.tags"
> />
<Tags :tags="release.tags" />
</div>
<div class="row associations"> <div class="row associations">
<ul class="actors nolist"> <ul class="actors nolist">
@ -320,6 +318,8 @@ export default {
.title { .title {
display: inline-flex; display: inline-flex;
margin: 0; margin: 0;
font-size: 1.5rem;
line-height: 1.25;
.icon { .icon {
fill: var(--shadow); fill: var(--shadow);
@ -452,6 +452,10 @@ export default {
display: inline-block; display: inline-block;
} }
.title {
font-size: 1.25rem;
}
.actors { .actors {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
} }

View File

@ -1,5 +1,13 @@
<template> <template>
<ul class="tags nolist"> <div
class="tags-container"
:class="{ overflowing }"
>
<ul
ref="tags"
class="tags nolist"
:class="{ expanded }"
>
<li <li
v-for="tag in tags" v-for="tag in tags"
:key="`tag-${tag.slug}`" :key="`tag-${tag.slug}`"
@ -11,9 +19,42 @@
>{{ tag.name }}</a> >{{ tag.name }}</a>
</li> </li>
</ul> </ul>
<button
v-if="overflowing && !expanded"
class="tags-more"
@click="expanded = true"
>More tags</button>
<button
v-if="expanded"
class="tags-more"
@click="expanded = false"
>Fewer tags</button>
</div>
</template> </template>
<script> <script>
function updateOverflowing() {
const containerBoundaries = this.$refs.tags.getBoundingClientRect();
const containerBottom = containerBoundaries.top + containerBoundaries.height;
this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
const tagBoundaries = tag.getBoundingClientRect();
return tagBoundaries.top > containerBottom;
});
}
function mounted() {
window.addEventListener('resize', this.updateOverflowing);
this.updateOverflowing();
}
function beforeUnmount() {
window.removeEventListener('resize', this.updateOverflowing);
}
export default { export default {
props: { props: {
tags: { tags: {
@ -21,10 +62,39 @@ export default {
default: () => [], default: () => [],
}, },
}, },
data() {
return {
overflowing: false,
expanded: false,
};
},
mounted,
beforeUnmount,
methods: {
updateOverflowing,
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-container {
margin: 0 0 1.5rem 0;
&.overflowing {
margin: 0 0 .5rem 0;
}
}
.tags {
max-height: 4.6rem;
padding: 2px 1rem 0 1rem;
overflow: hidden;
&.expanded {
max-height: unset;
}
}
.tag .link { .tag .link {
color: var(--link); color: var(--link);
background: var(--background); background: var(--background);
@ -39,4 +109,21 @@ export default {
color: var(--primary); color: var(--primary);
} }
} }
.tags-more {
width: 100%;
background: none;
padding: .5rem 1rem;
border: solid 1px var(--shadow-hint);
border-left: none;
border-right: none;
margin: .25rem 0 .5rem 0;
color: var(--shadow);
font-size: .9rem;
&:hover {
cursor: pointer;
color: var(--shadow-strong);
}
}
</style> </style>