Added sites

assets/components/sites/site.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        v-if="site"
+        class="content site"
+    >
+        <FilterBar :fetch-releases="fetchSite" />
+
+        <div class="content-inner">
+            <div class="header">
+                <a
+                    v-if="site.url"
+                    :href="site.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <object
+                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
+                        :title="site.name"
+                        type="image/png"
+                        class="logo"
+                    ><h2>{{ site.name }}</h2></object>
+
+                    <Icon
+                        icon="new-tab"
+                        class="icon-href"
+                    />
+                </a>
+
+                <span class="link">
+                    <span class="networklogo-container">
+                        Part of
+                        <a
+                            :href="`/network/${site.network.slug}`"
+                            class="networklogo-link"
+                        >
+                            <object
+                                :data="`/img/logos/${site.network.slug}/network.png`"
+                                :title="site.network.name"
+                                type="image/png"
+                                class="networklogo"
+                            >{{ site.network.name }}</object>
+                        </a>
+                    </span>
+                </span>
+            </div>
+
+            <p class="description">{{ site.description }}</p>
+
+            <Releases
+                :releases="releases"
+                :context="site.name"
+            />
+        </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 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.title {
+    display: inline-flex;
+    align-items: top;
+    margin: 0 1rem 0 0;
+
+    &:hover .icon {
+        fill: $primary;
+    }
+}
+
+.heading {
+    padding: 0;
+    margin: 0 0 1rem 0;
+}
+
+.link {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.logo {
+    width: 20rem;
+    max-height: 8rem;
+    object-fit: contain;
+    margin: 0 .5rem 1rem 0;
+}
+
+.networklogo-container {
+    display: flex;
+    align-items: center;
+}
+
+.networklogo {
+    color: $text;
+    width: 15rem;
+    max-height: 6rem;
+    font-weight: bold;
+    object-fit: contain;
+    object-position: 100% 0;
+    margin: 0 0 0 .5rem;
+}
+
+.sites,
+.scenes {
+    display: grid;
+    grid-gap: 1rem;
+    margin: 0 0 1rem 0;
+}
+
+.sites {
+    grid-template-columns: repeat(auto-fit, 15rem);
+}
+</style>

assets/components/sites/sites.vue

@@ -0,0 +1,49 @@
+<template>
+    <ul class="nolist sites">
+        <li
+            v-for="site in sites"
+            :key="`site-${site.id}`"
+        >
+            <SiteTile :site="site" />
+        </li>
+    </ul>
+</template>
+
+<script>
+import SiteTile from '../tile/site.vue';
+
+export default {
+    components: {
+        SiteTile,
+    },
+    props: {
+        sites: {
+            type: Array,
+            default: () => [],
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.sites {
+    display: grid;
+    grid-gap: 1rem;
+    padding: 1rem;
+    margin: 0;
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+
+    &.compact {
+        display: flex;
+        overflow-x: auto;
+
+        .tile {
+            width: 15rem;
+            margin: 0 1rem 0 0;
+        }
+    }
+}
+</style>