traxxx/assets/components/entities/entity.vue

366 lines
6.4 KiB
Vue

<template>
<div
v-if="entity"
class="entity content"
>
<div class="info">
<template v-if="entity.hasLogo">
<img
v-if="$route.name === 'network'"
class="logo"
:src="`/img/logos/${entity.slug}/thumbs/network.png`"
>
<img
v-else-if="entity.parent"
class="logo"
:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
>
<img
v-else
class="logo"
:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
>
</template>
<h2
v-else
class="name"
>{{ entity.name }}</h2>
<router-link
v-if="entity.parent"
:to="`/${entity.parent.type}/${entity.parent.slug}`"
class="link parent-link"
>
<img
v-if="entity.parent.hasLogo"
class="logo logo-parent"
:src="`/img/logos/${entity.parent.slug}/thumbs/network.png`"
>
<h3
v-else
class="name parent-name"
>{{ entity.parent.name }}</h3>
</router-link>
</div>
<div class="content-inner">
<div
v-if="entity.children.length > 0"
class="children-container"
>
<div
v-if="expanded"
class="expand noselect"
@click="expanded = !expanded"
>
<Icon
v-show="expanded"
icon="arrow-up3"
/>
<Icon
v-show="!expanded"
icon="arrow-down3"
/>
</div>
<div
class="scroll-container"
:class="{ expanded }"
>
<div
class="scroll scroll-left noselect"
:class="{ 'scroll-start': scrollAtStart }"
@click="scroll('left')"
><Icon icon="arrow-left3" /></div>
<div
ref="children"
class="children"
:class="{ expanded }"
@scroll="updateScroll"
>
<EntityTile
v-for="child in entity.children"
:key="`child-${child.id}`"
:entity="child"
/>
</div>
<div
class="scroll scroll-right noselect"
:class="{ 'scroll-end': scrollAtEnd }"
@click="scroll('right')"
><Icon icon="arrow-right3" /></div>
</div>
<div
v-if="scrollable || expanded"
class="expand noselect"
@click="expanded = !expanded"
>
<Icon
v-show="expanded"
icon="arrow-up3"
/>
<Icon
v-show="!expanded"
icon="arrow-down3"
/>
</div>
</div>
<FilterBar
:fetch-releases="fetchEntity"
:items-total="totalCount"
:items-per-page="limit"
/>
<div class="releases">
<Releases :releases="entity.releases" />
</div>
</div>
</div>
</template>
<script>
import EntityTile from './tile.vue';
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';
async function fetchEntity() {
const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
entitySlug: this.$route.params.entitySlug,
entityType: this.$route.name,
limit: this.limit,
range: this.$route.params.range,
pageNumber: Number(this.$route.params.pageNumber),
});
this.entity = entity;
this.totalCount = totalCount;
this.pageTitle = entity.name;
}
function updateScroll() {
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) {
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() {
this.expanded = false;
await this.fetchEntity();
}
export default {
components: {
EntityTile,
FilterBar,
Releases,
},
data() {
return {
entity: null,
totalCount: null,
limit: 10,
expanded: false,
scrollable: true,
scrollAtStart: true,
scrollAtEnd: false,
};
},
watch: {
$route: route,
},
mounted,
beforeDestroy,
methods: {
fetchEntity,
updateScroll,
scroll,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.info {
height: 2.5rem;
display: flex;
justify-content: space-between;
padding: 1rem;
background: var(--profile);
border-bottom: solid 1px var(--lighten-hint);
box-shadow: inset 0 0 3px var(--darken);
.link {
display: flex;
align-items: center;
text-decoration: none;
}
}
.logo {
height: 100%;
width: 100%;
max-width: 20rem;
object-fit: contain;
object-position: 0 50%;
}
.name {
color: var(--text-light);
display: flex;
align-items: center;
padding: 0;
margin: 0;
font-size: 1.5rem;
}
.logo-parent {
object-position: 100% 50%;
}
.children-container {
background: var(--profile);
}
.children {
display: flex;
box-sizing: border-box;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
&.expanded {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
.tile {
width: 100%;
}
}
&::-webkit-scrollbar {
display: none;
}
}
.expand {
.icon {
fill: var(--lighten);
}
&:hover {
background: var(--lighten-hint);
.icon {
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;
&.scroll-start ,
&.scroll-end {
/* use over v-show so button stays visible while still hovered */
display: none;
.icon {
fill: var(--lighten-weak);
}
}
.icon {
fill: var(--lighten);
}
&:hover {
display: flex;
cursor: pointer;
&:not(.scroll-start):not(.scroll-end) {
.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);
}
@media(max-width: $breakpoint) {
.scroll {
display: none;
}
}
</style>