Redesigned homepage.

assets/components/release/banner.vue

@@ -0,0 +1,103 @@
+<template>
+    <div
+        class="banner"
+        @wheel.prevent="scrollBanner"
+    >
+        <div class="trailer">
+            <video
+                v-if="release.trailer"
+                :src="`/media/${release.trailer.path}`"
+                :poster="`/media/${(release.poster && release.poster.thumbnail) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
+                :alt="release.title"
+                class="item trailer-video"
+                controls
+            >Sorry, the tailer cannot be played in your browser</video>
+        </div>
+
+        <a
+            v-for="photo in photos"
+            :key="`banner-${photo.index}`"
+            :href="`/media/${photo.path}`"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <img
+                :src="`/media/${photo.thumbnail}`"
+                :alt="`Photo ${photo.index + 1}`"
+                class="item"
+            >
+        </a>
+    </div>
+</template>
+
+<script>
+function photos() {
+    if (this.release.photos.length) {
+        const set = this.release.photos.sort(({ index: indexA }, { index: indexB }) => indexA - indexB);
+
+        if (this.release.trailer) {
+            return set;
+        }
+
+        return [this.release.poster].concat(set);
+    }
+
+    if (this.release.poster && !this.release.trailer) {
+        return [this.release.poster];
+    }
+
+    return [];
+}
+
+function scrollBanner(event) {
+    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
+}
+
+export default {
+    props: {
+        release: {
+            type: Object,
+            default: null,
+        },
+    },
+    computed: {
+        photos,
+    },
+    methods: {
+        scrollBanner,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.banner {
+    background: $empty;
+    flex-shrink: 0;
+    white-space: nowrap;
+    overflow-x: auto;
+    margin: 0 0 1rem 0;
+    scrollbar-width: none;
+    box-shadow: 0 0 3px $shadow;
+    font-size: 0;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.trailer {
+    display: inline-block;
+    max-width: 100vw;
+}
+
+.trailer-video {
+    max-width: 100%;
+}
+
+.item {
+    max-height: 18rem;
+    vertical-align: middle;
+}
+</style>

assets/components/release/release.vue

@@ -1,34 +1,9 @@
 <template>
-    <div v-if="release">
-        <div
-            class="banner"
-            @wheel.prevent="scrollBanner"
-        >
-            <div class="banner-trailer">
-                <video
-                    v-if="release.trailer"
-                    :src="`/media/${release.trailer.path}`"
-                    :poster="`/media/${(release.poster && release.poster.thumbnail) || (release.photos.length && release.photos[Math.floor(Math.random() * release.photos.length)].path)}`"
-                    :alt="release.title"
-                    class="banner-item"
-                    controls
-                >Sorry, the tailer cannot be played in your browser</video>
-            </div>
-
-            <a
-                v-for="photo in photos"
-                :key="`banner-${photo.index}`"
-                :href="`/media/${photo.path}`"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                <img
-                    :src="`/media/${photo.thumbnail}`"
-                    :alt="`Photo ${photo.index + 1}`"
-                    class="banner-item"
-                >
-            </a>
-        </div>
+    <div
+        v-if="release"
+        class="content"
+    >
+        <Banner :release="release" />
 
         <h2 class="row title">{{ release.title }}</h2>
 
@@ -141,37 +116,20 @@
 </template>
 
 <script>
+import Banner from './banner.vue';
+
 function pageTitle() {
     return this.release && this.release.title;
 }
 
-function scrollBanner(event) {
-    event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
-}
-
-function photos() {
-    if (this.release.photos.length) {
-        const set = this.release.photos.sort(({ index: indexA }, { index: indexB }) => indexA - indexB);
-
-        if (this.release.trailer) {
-            return set;
-        }
-
-        return [this.release.poster].concat(set);
-    }
-
-    if (this.release.poster && !this.release.trailer) {
-        return [this.release.poster];
-    }
-
-    return [];
-}
-
 async function mounted() {
     [this.release] = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
 }
 
 export default {
+    components: {
+        Banner,
+    },
     data() {
         return {
             release: null,
@@ -179,41 +137,13 @@ export default {
     },
     computed: {
         pageTitle,
-        photos,
     },
     mounted,
-    methods: {
-        scrollBanner,
-    },
 };
 </script>
 
 <style lang="scss" scoped>
 @import 'theme';
-
-.banner {
-    background: $empty;
-    white-space: nowrap;
-    overflow-x: auto;
-    margin: 0 0 1rem 0;
-    scrollbar-width: none;
-    box-shadow: 0 0 3px $shadow;
-    font-size: 0;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
-.banner-trailer {
-    display: inline-block;
-}
-
-.banner-item {
-    height: 20rem;
-    vertical-align: middle;
-}
-
 .row {
     display: block;
     padding: 0 1rem;