Added rudimentary tags page. Improved social match behavior.

2019-12-01 05:32:47 +01:00
parent bead69de49
commit cf81aa99e0
41 changed files with 495 additions and 104 deletions
--- a/assets/components/actors/actor.vue
+++ b/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(),
    ]);

--- a/assets/components/actors/actors.vue
+++ b/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 {
--- a/assets/components/header/header.vue
+++ b/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>
--- a/assets/components/networks/networks.vue
+++ b/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 {
--- a/assets/components/tags/tag.vue
+++ b/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;

--- a/assets/components/tags/tags.vue
+++ b/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>
--- a/assets/components/tile/release.vue
+++ b/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>
--- a/assets/components/tile/tag.vue
+++ b/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>
--- a/assets/img/modelhub.svg
+++ b/assets/img/modelhub.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="56.835938"
+   height="27.519531"
+   viewBox="0 0 487.24401 208.36217"
+   version="1.1"
+   id="svg34"
+   sodipodi:docname="modelhub.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata38">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>cliphub</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview36"
+     showgrid="false"
+     inkscape:zoom="10.796116"
+     inkscape:cx="36.555237"
+     inkscape:cy="24.650121"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Page-1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title2">cliphub</title>
+  <desc
+     id="desc4">Created with Sketch.</desc>
+  <defs
+     id="defs8">
+    <polygon
+       id="path-1"
+       points="343.86282,220 0.26087996,220 0.26087996,0.11564746 343.86282,0.11564746 " />
+    <polygon
+       id="path-3"
+       points="883.15816,0 0,0 0,220 883.15816,220 " />
+  </defs>
+  <g
+     id="Symbols"
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     transform="translate(-18.966281,-22.803411)">
+    <g
+       id="cliphub">
+      <g
+         id="Page-1"
+         transform="translate(0.79406475,26.176259)"
+         style="fill:#000000;fill-opacity:1">
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-weight:normal;font-size:342.91262817px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:8.5728159;"
+           x="-4.7667637"
+           y="218.76817"
+           id="text868"><tspan
+             sodipodi:role="line"
+             id="tspan866"
+             x="-4.7667637"
+             y="218.76817"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans Bold';baseline-shift:baseline;stroke-width:8.5728159;fill-opacity:1;">MH</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/assets/img/onlyfans.svg
+++ b/assets/img/onlyfans.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="icon-logo"
+   viewBox="0 0 92.400002 92.399879"
+   version="1.1"
+   sodipodi:docname="onlyfans.svg"
+   width="92.400002"
+   height="92.399879"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata21">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs19" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview17"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="6.1429902"
+     inkscape:cx="26.40336"
+     inkscape:cy="24.398909"
+     inkscape:window-x="1047"
+     inkscape:window-y="930"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="icon-logo" />
+  <path
+     class="svg-logo-color-1"
+     d="M 46.07999,3.9024059e-5 A 46.2,46.2 0 1 0 92.39999,46.170039 46.26,46.26 0 0 0 46.07999,3.9024059e-5 Z m 0,87.569999975941 a 41.38,41.38 0 1 1 41.48,-41.4 41.44,41.44 0 0 1 -41.48,41.38 z"
+     id="path2"
+     inkscape:connector-curvature="0"
+     style="fill-rule:evenodd" />
+  <path
+     d="m 65.28999,43.190039 v -3.77 a 16.75,16.75 0 0 0 -5.08,-12 17.31,17.31 0 0 0 -12.19,-5 h -3.1 a 17.31,17.31 0 0 0 -12.18,5 16.7,16.7 0 0 0 -5.07,12 v 3.77 l -2.14,3.86 v 5.56 a 18.64,18.64 0 0 0 5.64,13.33 19.37,19.37 0 0 0 13.59,5.54 h 3.45 a 19.33,19.33 0 0 0 13.55,-5.54 18.61,18.61 0 0 0 5.65,-13.33 v -5.56 z m -16.8,17.06 v 4.45 a 1.93,1.93 0 0 1 -0.89,1.64 h -0.84 a 1,1 0 0 1 -0.3,0 h -0.2 a 1.18,1.18 0 0 1 -0.25,0 h -0.38 a 2,2 0 0 1 -0.92,-1.67 v -4.42 a 5.3,5.3 0 0 1 2,-10.24 h 0.11 a 5.3,5.3 0 0 1 2,10.24 z m 9.09,-16.94 h -22.21 v -3.89 a 9.27,9.27 0 0 1 2.81,-6.63 9.62,9.62 0 0 1 6.74,-2.79 h 3.1 a 9.61,9.61 0 0 1 6.74,2.79 9.31,9.31 0 0 1 2.81,6.63 z"
+     class="svg-logo-color-2"
+     id="path14"
+     inkscape:connector-curvature="0" />
+</svg>
--- a/assets/img/tumblr2.svg
+++ b/assets/img/tumblr2.svg
@@ -1,5 +0,0 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-<title>tumblr2</title>
-<path d="M14.5 0h-13c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM11.434 12.884c-0.472 0.222-0.9 0.378-1.281 0.469-0.381 0.088-0.797 0.134-1.241 0.134-0.506 0-0.803-0.063-1.191-0.191s-0.719-0.309-0.994-0.544c-0.275-0.238-0.463-0.488-0.569-0.753s-0.159-0.65-0.159-1.156v-3.872h-1.5v-1.563c0.434-0.141 0.938-0.344 1.244-0.606 0.309-0.263 0.559-0.578 0.744-0.947 0.188-0.369 0.316-0.837 0.388-1.406h1.569v2.55h2.556v1.972h-2.553v2.831c0 0.641-0.009 1.009 0.059 1.191s0.238 0.369 0.422 0.475c0.244 0.147 0.525 0.219 0.838 0.219 0.559 0 1.116-0.181 1.669-0.544v1.741z"></path>
-</svg>
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -1,10 +1,12 @@
 import { get } from '../api';

 function initActorActions(store, _router) {
-    async function fetchActors({ _commit }, actorId) {
-        const networks = await get(`/actors/${actorId || ''}`);
+    async function fetchActors({ _commit }, { actorId, limit = 100 }) {
+        if (actorId) {
+            return get(`/actors/${actorId}`, { limit });
+        }

-        return networks;
+        return get('/actors', { limit });
    }

    async function fetchActorReleases({ _commit }, actorId) {
--- a/assets/js/api.js
+++ b/assets/js/api.js
@@ -1,9 +1,7 @@
 import config from 'config';

-import queryString from 'query-string';
-
 async function get(endpoint, query = {}) {
-    const q = queryString.stringify(query);
+    const q = new URLSearchParams(query).toString();

    const res = await fetch(`${config.api.url}${endpoint}?${q}`, {
        method: 'GET',
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -8,7 +8,8 @@ import Network from '../components/networks/network.vue';
 import Networks from '../components/networks/networks.vue';
 import Actor from '../components/actors/actor.vue';
 import Actors from '../components/actors/actors.vue';
-import Tag from '../components/tag/tag.vue';
+import Tag from '../components/tags/tag.vue';
+import Tags from '../components/tags/tags.vue';
 import NotFound from '../components/errors/404.vue';

 Vue.use(VueRouter);
@@ -59,6 +60,11 @@ const routes = [
        component: Networks,
        name: 'networks',
    },
+    {
+        path: '/tags',
+        component: Tags,
+        name: 'tags',
+    },
    {
        path: '*',
        component: NotFound,
--- a/assets/js/tags/actions.js
+++ b/assets/js/tags/actions.js
@@ -1,10 +1,12 @@
 import { get } from '../api';

 function initTagsActions(store, _router) {
-    async function fetchTags({ _commit }, tagId) {
-        const tags = await get(`/tags/${tagId || ''}`);
+    async function fetchTags({ _commit }, { tagId, limit = 100, priority }) {
+        if (tagId) {
+            return get(`/tags/${tagId}`);
+        }

-        return tags;
+        return get('/tags', { limit, priority });
    }

    async function fetchTagReleases({ _commit }, tagId) {