traxxx-web/pages/entities/@entitySlug/+Page.vue

<template>
	<div class="page">
		<div class="header">
			<a
				:href="entity.url"
				target="_blank"
				rel="noopener"
				class="link link-child"
			>
				<template v-if="entity.hasLogo">
					<img
						v-if="entity.type === 'network'"
						class="logo logo-child"
						:src="`/logos/${entity.slug}/thumbs/network.png`"
					>

					<img
						v-else-if="entity.parent && !entity.independent"
						class="logo logo-child"
						:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
					>

					<img
						v-else
						class="logo logo-child"
						:src="`/logos/${entity.slug}/thumbs/${entity.slug}.png`"
					>
				</template>

				<h2
					v-else
					class="name"
				>{{ entity.name }}</h2>
			</a>

			<a
				v-if="entity.parent"
				:href="`/${entity.parent.type}/${entity.parent.slug}`"
				class="link link-parent"
			>
				<img
					v-if="entity.parent.hasLogo"
					class="logo logo-parent"
					:src="`/logos/${entity.parent.slug}/thumbs/network.png`"
				>

				<img
					v-if="entity.parent.hasLogo"
					class="favicon"
					:src="`/logos/${entity.parent.slug}/favicon.png`"
				>

				<h3
					v-else
					class="name parent-name"
				>{{ entity.parent.name }}</h3>
			</a>
		</div>

		<div class="content">
			<div class="children-container">
				<ul
					v-if="entity.children.length > 0"
					ref="children"
					class="children nolist"
					:class="{ expanded }"
				>
					<li
						v-for="channel in entity.children"
						:key="`channel-${channel.id}`"
						:title="channel.name"
					>
						<EntityTile :entity="channel" />
					</li>
				</ul>

				<div class="expand-container">
					<button
						v-show="scrollable && !expanded"
						class="expand"
						@click="expanded = !expanded"
					>
						<span class="expand-text">Expand channels</span>
						<Icon icon="arrow-down3" />
					</button>

					<button
						v-show="expanded"
						class="expand"
						@click="expanded = !expanded"
					>
						<span class="expand-text">Collapse channels</span>
						<Icon icon="arrow-up3" />
					</button>
				</div>
			</div>

			<Scenes />
		</div>
	</div>
</template>

<script setup>
import { ref, computed, inject } from 'vue';

import EntityTile from '#/components/entities/tile.vue';
import Scenes from '#/components/scenes/scenes.vue';

const { pageProps } = inject('pageContext');
const { entity } = pageProps;

const children = ref(null);
const expanded = ref(false);

const scrollable = computed(() => children.value?.scrollWidth > children.value?.clientWidth);
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
}

.content {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	flex-grow: 1;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	color: var(--text-light);
	background: var(--grey-dark-50);
}

.logo {
	height: 2.5rem;
	max-width: 15rem;
	padding: .75rem 1rem;
	object-fit: contain;
}

.link-parent {
	display: flex;
	align-items: center;
}

.favicon {
	display: none;
	padding: .75rem 1rem;
}

.children-container {
	position: relative;
}

.children {
	background: var(--grey-dark-50);
	display: flex;
	/*
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	*/
	gap: .5rem;
	padding: .5rem;
	overflow-x: auto;
	flex-shrink: 0;

	&.expanded {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		overflow-x: hidden;

		.entity {
			width: 100%;
		}
	}
}

.children::-webkit-scrollbar {
	display: none;
}

.expand-container {
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: -.75rem;
	z-index: 10;
}

.expand {
	display: flex;
	align-items: center;
	padding: .5rem;
	border: none;
	background: var(--grey-dark-50);
	color: var(--highlight-strong-30);
	font-size: .9rem;
	font-weight: bold;
	border-radius: .5rem;
	box-shadow: 0 0 3px var(--shadow);

	.icon {
		fill: var(--highlight-strong-30);
		margin-left: 1rem;
	}

	&:hover {
		color: var(--text-light);
		cursor: pointer;

		.icon {
			fill: var(--text-light);
		}
	}
}

@media(--small-10) {
	.logo-parent {
		display: none;
	}

	.favicon {
		display: inline-block;
	}
}

@media(--compact) {
	.logo {
		height: 1.75rem;
	}

	.expand-text {
		display: none;
	}

	.expand .icon {
		margin-right: 1rem;
	}
}
</style>