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

assets/components/header/header.vue

@@ -1,6 +1,11 @@
 <template>
     <header class="header">
-        <h1 class="logo">Porn Radar</h1>
+        <router-link
+            :to="{ name: 'home' }"
+            class="logo-link"
+        >
+            <h1 class="logo">Porn Radar</h1>
+        </router-link>
     </header>
 </template>
 
@@ -13,7 +18,13 @@
     padding: 1rem;
 }
 
+.logo-link {
+    color: inherit;
+    text-decoration: none;
+}
+
 .logo {
+    display: inline-block;
     margin: 0;
 }
 </style>

assets/components/home/home.vue

@@ -33,10 +33,17 @@
                         class="scene-link"
                     >
                         <img
-                            :src="`/${release.site.id}/${release.id}/0.jpg`"
-                            :alt="release.id"
+                            v-if="release.photos > 0"
+                            :src="`/${release.site.id}/${release.id}/1.jpg`"
+                            :alt="release.title"
                             class="scene-thumbnail"
                         >
+
+                        <div
+                            v-else
+                            :title="release.title"
+                            class="scene-thumbnail"
+                        >No thumbnail available</div>
                     </a>
                 </span>
 
@@ -112,7 +119,7 @@ export default {
 
 .scenes {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     grid-gap: 1rem;
 }
 
@@ -134,10 +141,15 @@ export default {
 .scene-thumbnail {
     width: 100%;
     height: 200px;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    object-fit: cover;
     background-position: center;
     background-size: cover;
-    object-fit: cover;
+    background-color: $shadow-hint;
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
 }
 
 .scene-row {
@@ -168,6 +180,7 @@ export default {
 
 .scene-site {
     border-radius: 0 0 .25rem 0;
+    font-weight: bold;
 }
 
 .scene-date {
@@ -219,7 +232,7 @@ export default {
 }
 
 .scene-actor:not(:last-of-type)::after,
-.scene-tag:not(:last-of-type):after {
+.scene-tag:not(:last-child):after {
     content: ",";
 }
 

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>

assets/css/_theme.scss

@@ -2,3 +2,9 @@ $primary: #ff886c;
 
 $text: #222;
 $text-contrast: #fff;
+
+$shadow: rgba(0, 0, 0, .5);
+$shadow-weak: rgba(0, 0, 0, .2);
+$shadow-hint: rgba(0, 0, 0, .1);
+
+$highlight: rgba(255, 255, 255, .5);

assets/css/style.scss

@@ -6,7 +6,9 @@ body {
 }
 
 body {
+    color: $text;
     margin: 0;
+    font-family: Verdana, sans-serif;
 }
 
 .nolist {

assets/js/main.js

@@ -12,6 +12,16 @@ function init() {
     const store = initStore(router);
 
     Vue.mixin({
+        watch: {
+            pageTitle(title) {
+                if (title) {
+                    document.title = `Porn Radar - ${title}`;
+                    return;
+                }
+
+                document.title = 'Porn Radar';
+            },
+        },
         methods: {
             formatDate: (date, format) => dayjs(date).format(format),
         },

assets/js/router.js

@@ -12,18 +12,22 @@ const routes = [
     {
         path: '/',
         component: Home,
+        name: 'home',
     },
     {
         path: '/scene/:releaseId',
         component: Release,
+        name: 'release',
     },
     {
         path: '/movie/:releaseId',
         component: Release,
+        name: 'release',
     },
     {
         path: '/actor/:actorSlug',
         component: Actor,
+        name: 'actor',
     },
     {
         path: '*',