<template> <div v-if="site" class="content site" > <FilterBar :fetch-releases="fetchSite" /> <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> <a v-tooltip.bottom="`Go to ${site.network.name} overview`" :href="`/network/${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" > </a> </div> <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() { this.site = await this.$store.dispatch('fetchSites', { siteSlug: this.$route.params.siteSlug }); this.releases = this.site.releases; } async function mounted() { await this.fetchSite(); this.pageTitle = this.site.name; } export default { components: { FilterBar, Releases, }, data() { return { site: null, releases: null, pageTitle: null, }; }, 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>