traxxx/assets/components/sites/site.vue

<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>