Added rudimentary tags page. Improved social match behavior.

assets/components/actors/actor.vue

@@ -274,7 +274,7 @@ function scrollDescription(event) {
 
 async function mounted() {
     [this.actor] = await Promise.all([
-        this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
+        this.$store.dispatch('fetchActors', { actorId: this.$route.params.actorSlug }),
         this.fetchReleases(),
     ]);
 

assets/components/actors/actors.vue

@@ -12,7 +12,7 @@
 import Actor from '../tile/actor.vue';
 
 async function mounted() {
-    this.actors = await this.$store.dispatch('fetchActors');
+    this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
 }
 
 export default {

assets/components/header/header.vue

@@ -1,43 +1,58 @@
 <template>
     <header class="header">
-        <a
-            href="/"
+        <router-link
+            to="/"
             class="logo-link"
-        ><h1 class="logo">traxxx</h1></a>
+        ><h1 class="logo">traxxx</h1></router-link>
 
         <nav class="nav">
             <ul class="nolist">
                 <li class="nav-item">
-                    <Icon icon="stars" />
-
-                    <a
-                        href="/actors"
+                    <router-link
+                        to="/actors"
                         class="nav-link"
-                    >Actors</a>
+                        :class="{ active: active === 'actors' }"
+                    >
+                        <Icon icon="stars" />Actors
+                    </router-link>
                 </li>
 
                 <li class="nav-item">
-                    <Icon icon="earth2" />
-
-                    <a
-                        href="/networks"
+                    <router-link
+                        to="/networks"
                         class="nav-link"
-                    >Networks</a>
+                        :class="{ active: active === 'networks' }"
+                    >
+                        <Icon icon="earth2" />Networks
+                    </router-link>
                 </li>
 
                 <li class="nav-item">
-                    <Icon icon="price-tags" />
-
-                    <a
-                        href="/tags"
+                    <router-link
+                        to="/tags"
                         class="nav-link"
-                    >Categories</a>
+                        :class="{ active: active === 'tags' }"
+                    >
+                        <Icon icon="price-tags" />Tags
+                    </router-link>
                 </li>
             </ul>
         </nav>
     </header>
 </template>
 
+<script>
+function active() {
+    return this.$route.name;
+}
+
+export default {
+    computed: {
+        active,
+    },
+};
+</script>
+
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -68,15 +83,35 @@
 }
 
 .nav-link {
-    display: inline-block;
-    color: $shadow;
+    display: inline-flex;
+    align-items: center;
     padding: 1rem;
+    border-bottom: solid 5px transparent;
+    color: $shadow;
     text-decoration: none;
-    font-size: 1rem;
+    font-size: .9rem;
     font-weight: bold;
 
-    &:hover {
+    .icon {
+        fill: $shadow;
+        margin: 0 .5rem 0 0;
+    }
+
+    &.active {
         color: $primary;
+        border-bottom: solid 5px $primary;
+
+        .icon {
+            fill: $primary;
+        }
+    }
+
+    &:hover:not(.active) {
+        color: $primary;
+
+        .icon {
+            fill: $primary;
+        }
     }
 }
 </style>

assets/components/networks/networks.vue

@@ -13,8 +13,6 @@ import Network from '../tile/network.vue';
 
 async function mounted() {
     this.networks = await this.$store.dispatch('fetchNetworks');
-
-    console.log(this.networks);
 }
 
 export default {

assets/components/tags/tag.vue

@@ -6,6 +6,11 @@
         <FilterBar :fetch-releases="fetchReleases" />
 
         <div class="header">
+            <img
+                :src="`/img/tags/${tag.slug}.jpg`"
+                class="poster"
+            >
+
             <span>
                 <h2 class="title">
                     <Icon icon="price-tag4" />
@@ -34,8 +39,8 @@ async function fetchReleases() {
 }
 
 async function mounted() {
-    [[this.tag]] = await Promise.all([
-        this.$store.dispatch('fetchTags', this.$route.params.tagSlug),
+    [this.tag] = await Promise.all([
+        this.$store.dispatch('fetchTags', { tagId: this.$route.params.tagSlug }),
         this.fetchReleases(),
     ]);
 
@@ -65,13 +70,17 @@ export default {
 @import 'theme';
 
 .header {
-    display: flex;
-    justify-content: space-between;
-    padding: 1rem;
+}
+
+.poster {
+    width: 30rem;
+    height: 18rem;
+    object-fit: cover;
 }
 
 .title {
     display: inline-block;
+    padding: 1rem;
     margin: 0 .5rem 0 0;
     text-transform: capitalize;
 

assets/components/tags/tags.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="tags">
+        <Tag
+            v-for="tag in tags"
+            :key="`tag-${tag.id}`"
+            :tag="tag"
+        />
+    </div>
+</template>
+
+<script>
+import Tag from '../tile/tag.vue';
+
+async function mounted() {
+    this.tags = await this.$store.dispatch('fetchTags', { priority: [9] });
+}
+
+export default {
+    components: {
+        Tag,
+    },
+    data() {
+        return {
+            tags: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.tags {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-gap: .5rem;
+    padding: 1rem;
+}
+</style>

assets/components/tile/release.vue

@@ -2,19 +2,19 @@
     <div class="tile">
         <span class="banner">
             <span class="details">
-                <a
+                <router-link
                     v-if="release.site.independent"
-                    :href="`/network/${release.network.slug}`"
+                    :to="`/network/${release.network.slug}`"
                     class="site site-link"
-                >{{ release.network.name }}</a>
+                >{{ release.network.name }}</router-link>
 
-                <a
+                <router-link
                     v-else
                     v-tooltip.bottom="`Part of ${release.network.name}`"
                     :title="`Part of ${release.network.name}`"
-                    :href="`/site/${release.site.slug}`"
+                    :to="`/site/${release.site.slug}`"
                     class="site site-link"
-                >{{ release.site.name }}</a>
+                >{{ release.site.name }}</router-link>
 
                 <a
                     v-if="release.date"
@@ -38,8 +38,8 @@
                 >{{ `(${formatDate(release.dateAdded, 'MMM D, YYYY')})` }}`</a>
             </span>
 
-            <a
-                :href="`/scene/${release.id}`"
+            <router-link
+                :to="`/scene/${release.id}`"
                 class="link"
             >
                 <img
@@ -61,12 +61,12 @@
                     :title="release.title"
                     class="thumbnail"
                 >No thumbnail available</div>
-            </a>
+            </router-link>
         </span>
 
         <div class="info">
-            <a
-                :href="`/scene/${release.id}`"
+            <router-link
+                :to="`/scene/${release.id}`"
                 class="row link"
             >
                 <h3
@@ -74,7 +74,7 @@
                     :title="release.title"
                     class="title"
                 >{{ release.title }}</h3>
-            </a>
+            </router-link>
 
             <span class="row">
                 <ul class="actors nolist">
@@ -100,10 +100,10 @@
                     :key="`tag-${tag.slug}`"
                     class="tag"
                 >
-                    <a
-                        :href="`/tag/${tag.slug}`"
+                    <router-link
+                        :to="`/tag/${tag.slug}`"
                         class="tag-link"
-                    >{{ tag.name }}</a>
+                    >{{ tag.name }}</router-link>
                 </li>
             </ul>
         </div>

assets/components/tile/tag.vue

@@ -0,0 +1,72 @@
+<template>
+    <a
+        :href="`/tag/${tag.slug}`"
+        :title="tag.name"
+        class="tile"
+    >
+        <img
+            v-if="imageAvailable"
+            :src="`/img/tags/${tag.slug}_thumb.jpg`"
+            :alt="tag.name"
+            class="poster"
+            @error="imageAvailable = false"
+        >
+
+        <span class="title">{{ tag.name }}</span>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        tag: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            imageAvailable: true,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    background: $background;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    text-align: center;
+    text-decoration: none;
+}
+
+.poster {
+    width: 100%;
+    height: 14rem;
+    object-fit: cover;
+}
+
+.title {
+    color: $text;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: bold;
+    padding: .5rem 1rem;
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>