Experimenting using GraphQL in favor of REST.

assets/components/container/container.vue

@@ -3,7 +3,8 @@
         <Header />
 
         <div class="content">
-            <router-view />
+            <!-- key forces rerender when new and old path use same component -->
+            <router-view :key="$route.fullPath" />
         </div>
     </div>
 </template>

assets/components/releases/release.vue

@@ -108,6 +108,22 @@
                 </ul>
             </div>
 
+            <div v-if="release.scenes && release.scenes.length > 0">
+                <h3>Scenes</h3>
+
+                <Releases
+                    v-if="release.scenes && release.scenes.length > 0"
+                    :releases="release.scenes"
+                    class="row"
+                />
+            </div>
+
+            <div v-if="release.movie">
+                <h3>Movie</h3>
+
+                <Release :release="release.movie" />
+            </div>
+
             <div
                 v-if="release.tags.length > 0"
                 class="row"
@@ -196,8 +212,10 @@
 </template>
 
 <script>
-import Actor from '../tile/actor.vue';
 import Banner from './banner.vue';
+import Actor from '../tile/actor.vue';
+import Release from '../tile/release.vue';
+import Releases from './releases.vue';
 
 function pageTitle() {
     return this.release && this.release.title;
@@ -211,6 +229,8 @@ export default {
     components: {
         Actor,
         Banner,
+        Releases,
+        Release,
     },
     data() {
         return {

assets/components/releases/releases.vue

@@ -56,6 +56,7 @@ export default {
 }
 
 .tiles {
+    width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
     grid-gap: 1rem;

assets/components/tile/actor.vue

@@ -35,9 +35,9 @@
 
                     <span
                         v-if="actor.ageThen && actor.ageThen < actor.age"
-                        v-tooltip="'Age at scene date'"
+                        v-tooltip="`${actor.ageThen} years old on release date`"
                         class="age-then"
-                    >@ {{ actor.ageThen }}</span>
+                    >{{ actor.ageThen }}</span>
                 </span>
                 <span
                     v-if="actor.origin"
@@ -114,6 +114,7 @@ export default {
     color: $text-contrast;
     width: 100%;
     display: flex;
+    align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
     padding: .5rem;

assets/components/tile/release.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="tile">
+    <div
+        class="tile"
+        :class="{ movie: release.type === 'movie' }"
+    >
         <span class="banner">
             <span class="details">
                 <router-link
@@ -39,7 +42,7 @@
             </span>
 
             <router-link
-                :to="`/scene/${release.id}`"
+                :to="`/${release.type || 'scene'}/${release.id}`"
                 class="link"
             >
                 <img
@@ -66,14 +69,19 @@
 
         <div class="info">
             <router-link
-                :to="`/scene/${release.id}`"
+                :to="`/${release.type || 'scene'}/${release.id}`"
                 class="row link"
             >
                 <h3
                     v-tooltip.top="release.title"
                     :title="release.title"
                     class="title"
-                >{{ release.title }}</h3>
+                >
+                    <Icon
+                        v-if="release.type === 'movie'"
+                        icon="film"
+                    />{{ release.title }}
+                </h3>
             </router-link>
 
             <span class="row">
@@ -212,13 +220,19 @@ export default {
 }
 
 .title {
-    color: $text;
+    display: flex;
+    align-items: center;
     margin: 0 .25rem .25rem 0;
+    color: $text;
     font-size: 1rem;
     max-height: 3rem;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    .icon {
+        margin: 0 .25rem 0 0;
+    }
 }
 
 .network {