Changed range toggles to links for home and actor pages.

assets/components/actors/actor.vue

@@ -253,7 +253,10 @@ import Gender from './gender.vue';
 import Social from './social.vue';
 
 async function fetchActor() {
-    this.actor = await this.$store.dispatch('fetchActors', { actorSlug: this.$route.params.actorSlug });
+    this.actor = await this.$store.dispatch('fetchActorBySlug', {
+        slug: this.$route.params.actorSlug,
+        range: this.$route.params.range,
+    });
 }
 
 function scrollPhotos(event) {

assets/components/header/filter-bar.vue

@@ -1,61 +1,31 @@
 <template>
     <div class="filter-bar noselect">
         <span class="sort">
-            <label class="range">
-                <input
-                    :id="`${_uid}-range-latest`"
-                    :checked="range === 'latest'"
-                    type="radio"
-                    class="range-input"
-                    @click="setRange('latest')"
-                >
-                <label
-                    :for="`${_uid}-range-latest`"
-                    class="range-button"
-                >Latest</label>
-            </label>
+            <router-link
+                :to="{ name: $route.name, params: { ...$route.params, range: 'latest' } }"
+                :class="{ active: range === 'latest' }"
+                class="range range-button"
+            >Latest</router-link>
 
-            <label class="range">
-                <input
-                    :id="`${_uid}-range-upcoming`"
-                    :checked="range === 'upcoming'"
-                    type="radio"
-                    class="range-input"
-                    @click="setRange('upcoming')"
-                >
-                <label
-                    :for="`${_uid}-range-upcoming`"
-                    class="range-button"
-                >Upcoming</label>
-            </label>
+            <router-link
+                :to="{ name: $route.name, params: { ...$route.params, range: 'upcoming' } }"
+                :class="{ active: range === 'upcoming' }"
+                class="range-button"
+            >Upcoming</router-link>
 
-            <label class="range">
-                <input
-                    :id="`${_uid}-range-new`"
-                    :checked="range === 'new'"
-                    type="radio"
-                    class="range-input"
-                    @click="setRange('new')"
-                >
-                <label
-                    :for="`${_uid}-range-new`"
-                    class="range-button"
-                >New</label>
-            </label>
+            <router-link
+                :to="{ name: $route.name, params: { ...$route.params, range: 'new' } }"
+                :class="{ active: range === 'new' }"
+                class="range-button"
+            >New</router-link>
 
-            <label class="range">
-                <input
-                    :id="`${_uid}-range-all`"
-                    :checked="range === 'all'"
-                    type="radio"
-                    class="range-input"
-                    @click="setRange('all')"
-                >
-                <label
-                    :for="`${_uid}-range-all`"
-                    class="range-button"
-                >All</label>
-            </label>
+            <!--
+            <router-link
+                :to="{ name: 'home', params: { range: 'all' } }"
+                :class="{ active: range === 'all' }"
+                class="range-button"
+            >All</router-link>
+            -->
         </span>
 
         <span>
@@ -92,8 +62,8 @@ function filter(state) {
     return state.ui.filter;
 }
 
-function range(state) {
-    return state.ui.range;
+function range() {
+    return this.$route.params.range;
 }
 
 function batch(state) {
@@ -192,17 +162,14 @@ export default {
     box-shadow: 0 0 2px var(--shadow-weak);
     font-size: .8rem;
     font-weight: bold;
+    text-decoration: none;
 
-    &:hover {
-        color: var(--text);
+    &:hover:not(.active) {
+        color: var(--shadow-strong);
         cursor: pointer;
     }
-}
 
-.range-input {
-    display: none;
-
-    &:checked + .range-button {
+    &.active {
         color: var(--primary);
     }
 }

assets/components/home/home.vue

@@ -15,11 +15,7 @@ import Releases from '../releases/releases.vue';
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchReleases', {
         limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
-    });
-
-    this.$store.commit('setCache', {
-        target: 'home',
-        releases: this.releases,
+        range: this.$route.params.range,
     });
 }
 
@@ -29,13 +25,6 @@ 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,
@@ -43,7 +32,6 @@ export default {
     },
     data() {
         return {
-            // releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
             releases: [],
             networks: [],
             pageTitle: null,
@@ -53,7 +41,6 @@ export default {
     beforeRouteEnter(to, from, next) {
         next(vm => vm.$set(vm, 'from', from));
     },
-    updated,
     mounted,
     methods: {
         fetchReleases,