traxxx/assets/components/sites/site.vue

<template>
	<div
		v-if="site"
		class="content site"
	>
		<div class="header">
			<a
				v-tooltip.bottom="site.url && `Go to ${site.url}`"
				:href="site.url"
				target="_blank"
				rel="noopener noreferrer"
				class="link link-site"
			>
				<img
					:src="`/img/logos/${site.network.slug}/${site.slug}.png`"
					:title="site.name"
					:alt="site.name"
					class="logo logo-site"
				>
			</a>

			<ul class="tags nolist">
				<li
					v-for="tag in site.tags"
					:key="`tag-${tag.slug}`"
					class="tag"
				>{{ tag.name }}</li>
			</ul>

			<router-link
				v-tooltip.bottom="`Go to ${site.network.name} overview`"
				:to="{ name: 'network', params: { networkSlug: site.network.slug } }"
				class="link link-network"
			>
				<img
					:src="`/img/logos/${site.network.slug}/network.png`"
					:title="site.network.name"
					:alt="site.network.name"
					class="logo logo-network"
				>
			</router-link>
		</div>

		<FilterBar
			:fetch-releases="fetchSite"
			:items-total="totalCount"
			:items-per-page="limit"
		/>

		<div class="content-inner">
			<Releases :releases="releases" />
		</div>
	</div>
</template>

<script>
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';

async function fetchSite() {
	const { site, releases, totalCount } = await this.$store.dispatch('fetchSiteBySlug', {
		siteSlug: this.$route.params.siteSlug,
		range: this.$route.params.range,
		pageNumber: Number(this.$route.params.pageNumber) || 1,
		limit: this.limit,
	});

	this.site = site;
	this.releases = releases;
	this.totalCount = totalCount;
}

async function route() {
	await this.fetchSite();
}

async function mounted() {
	await this.fetchSite();

	this.pageTitle = this.site.name;
}

export default {
	components: {
		FilterBar,
		Releases,
	},
	data() {
		return {
			site: null,
			releases: null,
			totalCount: 0,
			limit: 10,
			pageTitle: null,
		};
	},
	watch: {
		$route: route,
	},
	mounted,
	methods: {
		fetchSite,
	},
};
</script>

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

.header {
    background: $profile;
    color: $text-contrast;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link {
    padding: 1rem;
}

.link-site {
    margin: 0 1rem 0 0;
    justify-content: flex-start;

    .logo {
        object-position: 0 0;
    }
}

.link-network {
    justify-content: flex-end;

    .logo {
        object-position: 100% 0;
    }
}

.logo {
    width: 100%;
    max-width: 15rem;
    max-height: 5rem;
    object-fit: contain;
    filter: $logo-highlight;
}

.tag {
    background: $shadow;
    padding: .5rem;
    margin: 0 .5rem .5rem 0;
}

@media(max-width: $breakpoint) {
    .link {
        padding: .5rem 1rem;
    }

    .logo {
        max-height: 2.5rem;
    }

    .tags {
        display: none;
    }
}
</style>