Only show entity children expand when overflowing.

This commit is contained in:
ThePendulum 2020-06-28 03:28:11 +02:00
parent 6d337e7cb2
commit 4bf4183a2a
4 changed files with 137 additions and 11 deletions

View File

@ -58,7 +58,7 @@
>
<div
class="scroll scroll-left noselect"
:class="{ unscrolled }"
:class="{ 'scroll-start': scrollAtStart }"
@click="scroll('left')"
><Icon icon="arrow-left3" /></div>
@ -77,13 +77,13 @@
<div
class="scroll scroll-right noselect"
:class="{ scrolled }"
:class="{ 'scroll-end': scrollAtEnd }"
@click="scroll('right')"
><Icon icon="arrow-right3" /></div>
</div>
<div
v-if="entity.children.length > 1"
v-if="(scrollable && entity.children.length > 1) || expanded"
class="expand noselect"
@click="expanded = !expanded"
>
@ -133,8 +133,9 @@ async function fetchEntity() {
}
function updateScroll() {
this.unscrolled = this.$refs.children.scrollLeft === 0;
this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
this.scrollable = this.$refs.children.scrollWidth > this.$refs.children.clientWidth;
this.scrollAtStart = this.$refs.children.scrollLeft === 0;
this.scrollAtEnd = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
}
function scroll(direction) {
@ -175,8 +176,9 @@ export default {
totalCount: null,
limit: 10,
expanded: false,
unscrolled: true,
scrolled: false,
scrollable: true,
scrollAtStart: true,
scrollAtEnd: false,
};
},
watch: {
@ -298,9 +300,14 @@ export default {
top: 0;
bottom: 0;
&.unscrolled,
&.scrolled {
&.scroll-start ,
&.scroll-end {
/* use over v-show so button stays visible while still hovered */
display: none;
.icon {
fill: var(--lighten-weak);
}
}
.icon {
@ -311,10 +318,12 @@ export default {
display: flex;
cursor: pointer;
&:not(.scroll-start):not(.scroll-end) {
.icon {
fill: var(--text-light);
}
}
}
}
.scroll-left {

View File

@ -0,0 +1,107 @@
<template>
<router-link
:to="{ name: 'tag', params: { tagSlug: tag.slug, tags: 'all-tags', range: 'latest' } }"
:title="tag.name"
class="tile"
>
<span class="title">{{ tag.name }}</span>
<template v-if="tag.poster">
<img
v-if="!lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`"
:title="tag.poster.comment"
:alt="tag.name"
class="poster"
>
<img
v-if="!lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`"
:title="tag.poster.sfw.comment"
:alt="tag.name"
class="poster"
>
<img
v-if="lazy && !sfw"
:data-src="`/img/${tag.poster.thumbnail}`"
:data-loading="`/img/${tag.poster.lazy}`"
:title="tag.poster.comment"
:alt="tag.name"
class="poster"
>
<img
v-if="lazy && sfw"
:data-src="`/img/${tag.poster.sfw.thumbnail}`"
:data-loading="`/img/${tag.poster.sfw.lazy}`"
:title="tag.poster.sfw.comment"
:alt="tag.name"
class="poster"
>
</template>
</router-link>
</template>
<script>
function sfw() {
return this.$store.state.ui.sfw;
}
export default {
props: {
tag: {
type: Object,
default: null,
},
lazy: {
type: Boolean,
default: false,
},
},
computed: {
sfw,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.tile {
color: var(--text-light);
background: var(--profile);
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
position: relative;
box-shadow: 0 0 3px var(--darken-weak);
overflow: hidden;
}
.poster {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 100%;
}
.title {
width: 100%;
display: flex;
box-sizing: border-box;
padding: .5rem 1rem;
position: absolute;
bottom: 0;
background: var(--darken);
overflow: hidden;
white-space: nowrap;
font-size: 1rem;
font-weight: bold;
text-transform: capitalize;
text-shadow: 0 0 3px var(--darken-strong);
text-overflow: ellipsis;
}
</style>

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-left2</title>
<path d="M10.5 16l2-2-6-6 6-6-2-2-8 8 8 8z"></path>
</svg>

After

Width:  |  Height:  |  Size: 217 B

View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>arrow-right2</title>
<path d="M5.5 0l-2 2 6 6-6 6 2 2 8-8-8-8z"></path>
</svg>

After

Width:  |  Height:  |  Size: 217 B