Added scroll buttons to entity children.
This commit is contained in:
parent
7d31dd8d52
commit
6d337e7cb2
|
|
@ -50,30 +50,53 @@
|
|||
<div class="content-inner">
|
||||
<div
|
||||
v-if="entity.children.length > 0"
|
||||
class="children"
|
||||
:class="{ expanded }"
|
||||
class="children-container"
|
||||
>
|
||||
<EntityTile
|
||||
v-for="child in entity.children"
|
||||
:key="`child-${child.id}`"
|
||||
:entity="child"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="scroll-container"
|
||||
:class="{ expanded }"
|
||||
>
|
||||
<div
|
||||
class="scroll scroll-left noselect"
|
||||
:class="{ unscrolled }"
|
||||
@click="scroll('left')"
|
||||
><Icon icon="arrow-left3" /></div>
|
||||
|
||||
<div
|
||||
v-if="entity.children.length > 1"
|
||||
class="expand noselect"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<Icon
|
||||
v-show="expanded"
|
||||
icon="arrow-up3"
|
||||
/>
|
||||
<div
|
||||
ref="children"
|
||||
class="children"
|
||||
:class="{ expanded }"
|
||||
@scroll="updateScroll"
|
||||
>
|
||||
<EntityTile
|
||||
v-for="child in entity.children"
|
||||
:key="`child-${child.id}`"
|
||||
:entity="child"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
v-show="!expanded"
|
||||
icon="arrow-down3"
|
||||
/>
|
||||
<div
|
||||
class="scroll scroll-right noselect"
|
||||
:class="{ scrolled }"
|
||||
@click="scroll('right')"
|
||||
><Icon icon="arrow-right3" /></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="entity.children.length > 1"
|
||||
class="expand noselect"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<Icon
|
||||
v-show="expanded"
|
||||
icon="arrow-up3"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!expanded"
|
||||
icon="arrow-down3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FilterBar
|
||||
|
|
@ -109,8 +132,30 @@ async function fetchEntity() {
|
|||
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() {
|
||||
await this.fetchEntity();
|
||||
|
||||
this.updateScroll();
|
||||
window.addEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
window.removeEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
||||
async function route() {
|
||||
|
|
@ -130,14 +175,19 @@ export default {
|
|||
totalCount: null,
|
||||
limit: 10,
|
||||
expanded: false,
|
||||
unscrolled: true,
|
||||
scrolled: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: route,
|
||||
},
|
||||
mounted,
|
||||
beforeDestroy,
|
||||
methods: {
|
||||
fetchEntity,
|
||||
updateScroll,
|
||||
scroll,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -179,13 +229,17 @@ export default {
|
|||
object-position: 100% 50%;
|
||||
}
|
||||
|
||||
.children-container {
|
||||
background: var(--profile);
|
||||
}
|
||||
|
||||
.children {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
background: var(--profile);
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
.tile {
|
||||
|
|
@ -209,18 +263,69 @@ export default {
|
|||
}
|
||||
|
||||
.expand {
|
||||
background: var(--profile);
|
||||
|
||||
.icon {
|
||||
fill: var(--lighten-weak);
|
||||
fill: var(--lighten);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--darken-strong);
|
||||
background: var(--lighten-hint);
|
||||
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
/>
|
||||
|
||||
<router-link
|
||||
to="/home"
|
||||
to="/updates"
|
||||
class="logo-link"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/home"
|
||||
to="/updates"
|
||||
@click.native="toggleSidebar(false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Sites</a>
|
||||
>Channels</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Tag from '../tile/tag.vue';
|
||||
import Tag from './tile.vue';
|
||||
|
||||
function sfw() {
|
||||
return this.$store.state.ui.sfw;
|
||||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(23rem, .33fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
|
||||
grid-gap: 1rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
|
@ -158,13 +158,19 @@ export default {
|
|||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.tiles {
|
||||
grid-template-columns: repeat(auto-fill, minmax(21rem, .5fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, .5fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue