traxxx/assets/components/entities/entity.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>