Added release page with photo viewer. Added photo count to database. Improved styling.

assets/components/release/release.vue

@@ -1,5 +1,147 @@
 <template>
-    <div>
-        <h2>Release</h2>
+    <div v-if="release">
+        <div
+            class="banner"
+            @wheel.prevent="scrollBanner"
+        >
+            <img
+                v-for="i in release.photos"
+                :key="`banner-${i}`"
+                :src="`/${release.site.id}/${release.id}/${i}.jpg`"
+                :alt="`Photo ${i}`"
+                class="banner-item"
+            >
+        </div>
+
+        <h2 class="row title">{{ release.title }}</h2>
+
+        <a
+            :href="release.url"
+            :title="release.shootId || release.entryId"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="row date"
+        >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
+
+        <ul class="row actors">
+            <li
+                v-for="actor in release.actors"
+                :key="actor.id"
+                class="actor"
+            >
+                <a
+                    :href="`/actor/${actor.id}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="actor-link"
+                >{{ actor.name }}</a>
+            </li>
+        </ul>
+
+        <span class="row site">
+            <a
+                :href="release.site.url"
+                target="_blank"
+                rel="noopener noreferrer"
+            >{{ release.site.name }}</a>
+
+            (<a
+                :href="release.network.url"
+                target="_blank"
+                rel="noopener noreferrer"
+            >{{ release.network.name }}</a>)
+        </span>
+
+        <p class="row description">{{ release.description }}</p>
+
+        <ul class="row tags">
+            <li
+                v-for="tag in release.tags"
+                :key="tag.tag"
+                class="tag"
+            >
+                <a
+                    :href="`/tag/${tag.tag}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="tag-link"
+                >{{ tag.tag }}</a>
+            </li>
+        </ul>
     </div>
 </template>
+
+<script>
+function pageTitle() {
+    return this.release && this.release.title;
+}
+
+function scrollBanner(event) {
+    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
+async function mounted() {
+    [this.release] = await this.$store.dispatch('fetchReleases', this.$route.params.releaseId);
+
+    console.log(this.release);
+}
+
+export default {
+    data() {
+        return {
+            release: null,
+        };
+    },
+    computed: {
+        pageTitle,
+    },
+    mounted,
+    methods: {
+        scrollBanner,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.banner {
+    white-space: nowrap;
+    overflow-x: auto;
+    margin: 0 0 1rem 0;
+    scrollbar-width: none;
+    box-shadow: 0 0 3px $shadow;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.banner-item {
+    height: 20rem;
+    vertical-align: middle;
+}
+
+.row {
+    display: block;
+    padding: 0 1rem;
+    margin: 0 0 .5rem 0;
+}
+
+.actors,
+.tags {
+    list-style: none;
+}
+
+.actor,
+.tag {
+    display: inline-block;
+    text-transform: capitalize;
+
+    &:not(:last-child)::after {
+        content: ',';
+        display: inline-block;
+        width: .6rem;
+    }
+}
+</style>