Restoring scroll position when going from home to scene to home.

assets/components/home/home.vue

@@ -5,6 +5,7 @@
         <div class="content-inner">
             <Releases
                 :releases="releases"
+                referer="home"
             />
         </div>
     </div>
@@ -24,6 +25,13 @@ async function mounted() {
     await this.fetchReleases();
 }
 
+function updated() {
+    if (this.from.name === 'scene' && this.from.hash === '#home') {
+        const releaseTile = document.querySelector(`#scene-${this.from.params.releaseId}`);
+        if (releaseTile) releaseTile.scrollIntoView();
+    }
+}
+
 export default {
     components: {
         FilterBar,
@@ -34,8 +42,13 @@ export default {
             releases: [],
             networks: [],
             pageTitle: null,
+            from: null,
         };
     },
+    beforeRouteEnter(to, from, next) {
+        next(vm => vm.$set(vm, 'from', from));
+    },
+    updated,
     mounted,
     methods: {
         fetchReleases,

assets/components/releases/releases.vue

@@ -10,7 +10,10 @@
                 v-for="release in releases"
                 :key="`release-${release.id}`"
             >
-                <ReleaseTile :release="release" />
+                <ReleaseTile
+                    :release="release"
+                    :referer="referer"
+                />
             </li>
         </ul>
 
@@ -46,6 +49,10 @@ export default {
             type: String,
             default: null,
         },
+        referer: {
+            type: String,
+            default: null,
+        },
     },
     computed: {
         range,

assets/components/tile/release.vue

@@ -1,7 +1,8 @@
 <template>
     <div
+        :id="`${release.type}-${release.id}`"
+        :class="{ [release.type]: true }"
         class="tile"
-        :class="{ movie: release.type === 'movie' }"
     >
         <span class="poster">
             <span class="details">
@@ -47,10 +48,8 @@
                 >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}</a>
             </span>
 
-            <a
+            <router-link
-                :href="`/${release.type || 'scene'}/${release.id}/${release.slug || ''}`"
+                :to="{ name: release.type || 'scene', params: { releaseId: release.id, releaseSlug: release.slug }, ...(referer && { hash: `#${referer}` }) }"
-                target="_blank"
-                rel="noopener noreferrer"
                 class="link"
             >
                 <img
@@ -72,14 +71,12 @@
                     :title="release.title"
                     class="thumbnail"
                 >No thumbnail available</div>
-            </a>
+            </router-link>
         </span>
 
         <div class="info">
-            <a
+            <router-link
-                :href="`/${release.type || 'scene'}/${release.id}`"
+                :to="{ name: release.type || 'scene', params: { releaseId: release.id, releaseSlug: release.slug }, ...(referer && { hash: `#${referer}` }) }"
-                target="_blank"
-                rel="noopener noreferrer"
                 class="row link"
             >
                 <h3
@@ -92,7 +89,7 @@
                         icon="film"
                     />{{ release.title }}
                 </h3>
-            </a>
+            </router-link>
 
             <span class="row">
                 <ul class="actors nolist">
@@ -135,6 +132,10 @@ export default {
             type: Object,
             default: null,
         },
+        referer: {
+            type: String,
+            default: null,
+        },
     },
 };
 </script>

assets/js/fragments.js

@@ -113,6 +113,7 @@ const releaseFields = `
     title
     date
     slug
+    type
     createdAt
     url
     ${releaseActorsFragment}

assets/js/router.js

@@ -17,11 +17,15 @@ Vue.use(VueRouter);
 const routes = [
     {
         path: '/',
+        redirect: { name: 'home' },
+    },
+    {
+        path: '/home',
         component: Home,
         name: 'home',
     },
     {
-        path: '/scene/:releaseId/:releaseTitle?',
+        path: '/scene/:releaseId/:releaseSlug?',
         component: Release,
         name: 'scene',
     },
@@ -74,6 +78,9 @@ const routes = [
 const router = new VueRouter({
     mode: 'history',
     routes,
+    afterEach(to, from) {
+        console.log(to, from);
+    },
 });
 
 export default router;

migrations/20190325001339_releases.js

@@ -326,7 +326,8 @@ exports.up = knex => Promise.resolve()
             .references('id')
             .inTable('studios');
 
-        table.string('type', 10);
+        table.string('type', 10)
+            .defaultTo('scene');
 
         table.string('shoot_id');
         table.string('entry_id');