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

<template>
	<div class="page">
		<div class="header">
			<a
				:href="entityUrl"
				target="_blank"
				rel="noopener"
				class="link link-child"
				:data-umami-event="entity.affiliate ? 'entity-click-aff' : 'entity-click'"
				:data-umami-event-aff-id="entity.affiliate?.id"
				:data-umami-event-entity="entity.slug"
			>
				<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);

const entityUrl = (() => {
	if (!entity.url) {
		return null;
	}

	if (!entity.affiliate?.parameters) {
		return entity.url;
	}

	const newParams = new URLSearchParams({
		...Object.fromEntries(new URL(entity.url).searchParams),
		...Object.fromEntries(new URLSearchParams(entity.affiliate.parameters)),
	});

	return `${entity.url}?${newParams}`;
})();
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

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

.header {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	position: sticky;
	top: 0;
	z-index: 1;
	color: var(--text-light);
	background: var(--grey-dark-50);

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

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

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

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

.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(--compact) {
	.logo {
		height: 1.25rem;
	}

	.logo-parent {
		display: none;
	}

	.favicon {
		display: inline-block;
	}

	.expand-text {
		display: none;
	}

	.expand .icon {
		margin-right: 1rem;
	}
}

@media(--small-20) {
	.logo {
		padding: .5rem 1rem;
	}

	.favicon {
		height: 1rem;
		padding: .5rem 1rem;
	}
}
</style>