Added scroll buttons to entity children.

This commit is contained in:
ThePendulum 2020-06-28 03:19:09 +02:00
parent 7d31dd8d52
commit 6d337e7cb2
3 changed files with 146 additions and 35 deletions

View File

@ -50,8 +50,23 @@
<div class="content-inner"> <div class="content-inner">
<div <div
v-if="entity.children.length > 0" v-if="entity.children.length > 0"
class="children-container"
>
<div
class="scroll-container"
:class="{ expanded }"
>
<div
class="scroll scroll-left noselect"
:class="{ unscrolled }"
@click="scroll('left')"
><Icon icon="arrow-left3" /></div>
<div
ref="children"
class="children" class="children"
:class="{ expanded }" :class="{ expanded }"
@scroll="updateScroll"
> >
<EntityTile <EntityTile
v-for="child in entity.children" v-for="child in entity.children"
@ -60,6 +75,13 @@
/> />
</div> </div>
<div
class="scroll scroll-right noselect"
:class="{ scrolled }"
@click="scroll('right')"
><Icon icon="arrow-right3" /></div>
</div>
<div <div
v-if="entity.children.length > 1" v-if="entity.children.length > 1"
class="expand noselect" class="expand noselect"
@ -75,6 +97,7 @@
icon="arrow-down3" icon="arrow-down3"
/> />
</div> </div>
</div>
<FilterBar <FilterBar
:fetch-releases="fetchEntity" :fetch-releases="fetchEntity"
@ -109,8 +132,30 @@ async function fetchEntity() {
this.pageTitle = entity.name; this.pageTitle = entity.name;
} }
function updateScroll() {
this.unscrolled = this.$refs.children.scrollLeft === 0;
this.scrolled = this.$refs.children.scrollWidth - this.$refs.children.clientWidth === this.$refs.children.scrollLeft;
}
function scroll(direction) {
if (direction === 'right') {
this.$refs.children.scrollLeft = this.$refs.children.scrollLeft + this.$refs.children.clientWidth - 100;
}
if (direction === 'left') {
this.$refs.children.scrollLeft = this.$refs.children.scrollLeft - this.$refs.children.clientWidth + 100;
}
}
async function mounted() { async function mounted() {
await this.fetchEntity(); await this.fetchEntity();
this.updateScroll();
window.addEventListener('resize', this.updateScroll);
}
function beforeDestroy() {
window.removeEventListener('resize', this.updateScroll);
} }
async function route() { async function route() {
@ -130,14 +175,19 @@ export default {
totalCount: null, totalCount: null,
limit: 10, limit: 10,
expanded: false, expanded: false,
unscrolled: true,
scrolled: false,
}; };
}, },
watch: { watch: {
$route: route, $route: route,
}, },
mounted, mounted,
beforeDestroy,
methods: { methods: {
fetchEntity, fetchEntity,
updateScroll,
scroll,
}, },
}; };
</script> </script>
@ -179,13 +229,17 @@ export default {
object-position: 100% 50%; object-position: 100% 50%;
} }
.children-container {
background: var(--profile);
}
.children { .children {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
overflow-x: auto;
padding: 1rem; padding: 1rem;
border-bottom: solid 1px var(--darken-hint); border-bottom: solid 1px var(--darken-hint);
background: var(--profile); overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; scrollbar-width: none;
.tile { .tile {
@ -209,18 +263,69 @@ export default {
} }
.expand { .expand {
background: var(--profile);
.icon { .icon {
fill: var(--lighten-weak); fill: var(--lighten);
} }
&:hover { &:hover {
background: var(--darken-strong); background: var(--lighten-hint);
.icon { .icon {
fill: var(--lighten-weak); fill: var(--text-light);
} }
} }
} }
.scroll-container {
position: relative;
padding: 0 1rem 0 0;
&.expanded {
padding: 0;
.scroll {
display: none;
}
}
}
.scroll {
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
&.unscrolled,
&.scrolled {
display: none;
}
.icon {
fill: var(--lighten);
}
&:hover {
display: flex;
cursor: pointer;
.icon {
fill: var(--text-light);
}
}
}
.scroll-left {
left: 0;
padding: 1rem 2rem 1rem 1rem;
background: linear-gradient(to right, var(--profile) 50%, transparent);
}
.scroll-right {
right: 0;
padding: 1rem 1rem 1rem 2rem;
background: linear-gradient(to left, var(--profile) 50%, transparent);
}
</style> </style>

View File

@ -11,7 +11,7 @@
/> />
<router-link <router-link
to="/home" to="/updates"
class="logo-link" class="logo-link"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
@ -29,7 +29,7 @@
<li class="nav-item"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
to="/home" to="/updates"
@click.native="toggleSidebar(false)" @click.native="toggleSidebar(false)"
> >
<a <a
@ -67,7 +67,7 @@
:href="href" :href="href"
:class="{ active: isActive }" :class="{ active: isActive }"
@click="navigate" @click="navigate"
>Sites</a> >Channels</a>
</router-link> </router-link>
</li> </li>

View File

@ -23,7 +23,7 @@
</template> </template>
<script> <script>
import Tag from '../tile/tag.vue'; import Tag from './tile.vue';
function sfw() { function sfw() {
return this.$store.state.ui.sfw; return this.$store.state.ui.sfw;
@ -146,7 +146,7 @@ export default {
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
grid-gap: 1rem; grid-gap: 1rem;
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
} }
@ -158,13 +158,19 @@ export default {
@media(max-width: $breakpoint3) { @media(max-width: $breakpoint3) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fill, minmax(21rem, .5fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, .5fr));
} }
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
} }
} }
</style> </style>