traxxx/assets/components/networks/networks.vue

<template>
	<div class="networks">
		<div class="content-inner">
			<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />

			<span
				v-if="done && entities.length === 0"
				class="empty"
			>No results for "{{ $route.query.query }}"</span>

			<div
				v-else
				class="entity-tiles"
			>
				<Entity
					v-for="entity in entities"
					:key="`entity-tile-${entity.slug}`"
					:entity="entity"
				/>
			</div>
		</div>

		<Footer />
	</div>
</template>

<script>
import Entity from '../entities/tile.vue';
import SearchBar from '../search/bar.vue';

async function fetchEntities() {
	if (this.$route.query.query) {
		await this.searchEntities();
		return;
	}

	this.done = false;

	this.entities = await this.$store.dispatch('fetchEntities', {
		type: 'network',
		entitySlugs: [],
	});

	this.done = true;
}

async function searchEntities() {
	this.done = false;

	this.entities = await this.$store.dispatch('searchEntities', {
		query: this.$route.query.query,
		limit: 20,
	});

	this.done = true;
}

async function mounted() {
	this.pageTitle = 'Channels';

	await this.fetchEntities();
}

function channelCount() {
	return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
}

export default {
	components: {
		Entity,
		SearchBar,
	},
	data() {
		return {
			done: false,
			pageTitle: null,
			entities: [],
		};
	},
	computed: {
		channelCount,
	},
	watch: {
		$route: fetchEntities,
	},
	mounted,
	methods: {
		fetchEntities,
		searchEntities,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

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

.content-inner {
	padding: 0 1rem;
}

.search {
	margin: 1rem 0 0 0;
}

.entity-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: .5rem;
    padding: 1rem 0;

	.tile {
		height: 6rem;
	}
}

.empty {
	display: block;
	margin: 1rem 0;
	color: var(--shadow);
	font-size: 1.25rem;
	font-weight: bold;
}

@media(max-width: $breakpoint2) {
    .entity-tiles {
        grid-gap: .5rem;
    }
}

@media(max-width: $breakpoint0) {
    .entity-tiles {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}
</style>