Only show entity children expand when overflowing.
This commit is contained in:
parent
6d337e7cb2
commit
4bf4183a2a
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 |
|
|
@ -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 |
Loading…
Reference in New Issue