Added tag page. Added default 'anal' tag to Vixen scraper for Tushy and Tushy Raw.

assets/components/actor/actor.vue

@@ -113,14 +113,4 @@ export default {
         content: ':';
     }
 }
-
-.scenes {
-    display: grid;
-    grid-gap: 1rem;
-    margin: 0 0 1rem 0;
-}
-
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
 </style>

assets/components/header/header.vue

@@ -15,7 +15,7 @@
 .header {
     color: $text-contrast;
     background: $primary;
-    padding: 1rem;
+    padding: .5rem 1rem;
 }
 
 .logo-link {

assets/components/home/home.vue

@@ -144,10 +144,4 @@ export default {
 .filter {
     display: inline-block;
 }
-
-.scenes {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    grid-gap: 1rem;
-}
 </style>

assets/components/network/network.vue

@@ -113,18 +113,13 @@ export default {
     height: 3rem;
 }
 
-.sites,
-.scenes {
+.sites {
     display: grid;
     grid-gap: 1rem;
     margin: 0 0 1rem 0;
 }
 
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
-
 .sites {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, 15rem);
 }
 </style>

assets/components/site/site.vue

@@ -147,11 +147,7 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
-
 .sites {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, 15rem);
 }
 </style>

assets/components/tag/tag.vue

@@ -0,0 +1,83 @@
+<template>
+    <div
+        v-if="tag"
+        class="content tag"
+    >
+        <div class="header">
+            <span>
+                <h2 class="title">{{ tag.name }}</h2>
+
+                <span class="description">{{ tag.description }}</span>
+            </span>
+        </div>
+
+        <div class="content-inner">
+            <h3 class="heading">Latest releases</h3>
+
+            <ul class="nolist scenes">
+                <li
+                    v-for="release in releases"
+                    :key="`release-${release.id}`"
+                >
+                    <ReleaseTile :release="release" />
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import ReleaseTile from '../tile/release.vue';
+
+async function mounted() {
+    [this.tag] = await this.$store.dispatch('fetchTags', this.$route.params.tagSlug);
+    this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+
+    this.pageTitle = this.tag.name;
+}
+
+export default {
+    components: {
+        ReleaseTile,
+    },
+    data() {
+        return {
+            tag: null,
+            releases: null,
+            pageTitle: null,
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+.title {
+    display: inline-block;
+    margin: 0 .5rem 0 0;
+    text-transform: capitalize;
+}
+
+.heading {
+    padding: 0;
+    margin: 0 0 1rem 0;
+}
+
+.bio-heading {
+    display: inline-block;
+    font-weight: bold;
+    margin: .5rem 0 0 0;
+
+    &::after {
+        content: ':';
+    }
+}
+</style>

assets/components/tile/release.vue

@@ -131,8 +131,11 @@ export default {
 
 .thumbnail {
     width: 100%;
+    height: 12rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     object-fit: cover;
-    object-position: 50% 0;
     background-position: center;
     background-size: cover;
     background-color: $shadow-hint;

assets/components/tile/site.vue

@@ -30,7 +30,7 @@ export default {
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
-    padding: 1rem;
+    padding: .5rem 1rem;
     border-radius: .25rem;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     height: 100%;

assets/css/_theme.scss

@@ -1,4 +1,5 @@
 /* $primary: #ff886c; */
+$breakpoint: 720px;
 $primary: #ff6c88;
 
 $background: #fff;

assets/css/style.scss

@@ -34,3 +34,15 @@ body {
         fill: $primary;
     }
 }
+
+.scenes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
+    grid-gap: 1rem;
+}
+
+@media(max-width: $breakpoint) {
+    .scenes {
+        grid-template-columns: repeat(auto-fit, minmax(22.5rem, 1fr));
+    }
+}

assets/js/router.js

@@ -6,6 +6,7 @@ import Release from '../components/release/release.vue';
 import Site from '../components/site/site.vue';
 import Network from '../components/network/network.vue';
 import Actor from '../components/actor/actor.vue';
+import Tag from '../components/tag/tag.vue';
 import NotFound from '../components/errors/404.vue';
 
 Vue.use(VueRouter);
@@ -19,12 +20,12 @@ const routes = [
     {
         path: '/scene/:releaseId',
         component: Release,
-        name: 'release',
+        name: 'scene',
     },
     {
         path: '/movie/:releaseId',
         component: Release,
-        name: 'release',
+        name: 'movie',
     },
     {
         path: '/actor/:actorSlug',
@@ -41,6 +42,11 @@ const routes = [
         component: Network,
         name: 'network',
     },
+    {
+        path: '/tag/:tagSlug',
+        component: Tag,
+        name: 'tag',
+    },
     {
         path: '*',
         component: NotFound,

assets/js/store.js

@@ -6,6 +6,7 @@ import initReleasesStore from './releases/releases';
 import initSitesStore from './sites/sites';
 import initNetworksStore from './networks/networks';
 import initActorsStore from './actors/actors';
+import initTagsStore from './tags/tags';
 
 function initStore(router) {
     Vue.use(Vuex);
@@ -17,6 +18,7 @@ function initStore(router) {
     store.registerModule('actors', initActorsStore(store, router));
     store.registerModule('sites', initSitesStore(store, router));
     store.registerModule('networks', initNetworksStore(store, router));
+    store.registerModule('tags', initTagsStore(store, router));
 
     return store;
 }

assets/js/tags/actions.js

@@ -0,0 +1,22 @@
+import { get } from '../api';
+
+function initTagsActions(_store, _router) {
+    async function fetchTags({ _commit }, tagId) {
+        const tags = await get(`/tags/${tagId || ''}`);
+
+        return tags;
+    }
+
+    async function fetchTagReleases({ _commit }, tagId) {
+        const releases = await get(`/tags/${tagId}/releases`);
+
+        return releases;
+    }
+
+    return {
+        fetchTags,
+        fetchTagReleases,
+    };
+}
+
+export default initTagsActions;

assets/js/tags/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/tags/state.js

@@ -0,0 +1 @@
+export default {};

assets/js/tags/tags.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initTagsStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initTagsStore;