Added tag filter to releases query, enabled on homepage.

assets/components/home/filter.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="filters-bar noselect">
+        <Icon icon="filter" />
+
+        <ul class="filters">
+            <li
+                v-tooltip.bottom="'Not yet available'"
+                class="filter"
+            >
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('straight') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="straight"
+                        type="checkbox"
+                        class="check"
+                        disabled
+                        @change="$emit('set-filter', localFilter)"
+                    >straight
+                </label>
+            </li>
+
+            <li class="filter">
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('lesbian') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="lesbian"
+                        type="checkbox"
+                        class="check"
+                        @change="$emit('set-filter', localFilter)"
+                    >lesbian
+                </label>
+            </li>
+
+            <li class="filter">
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('gay') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="gay"
+                        type="checkbox"
+                        class="check"
+                        @change="$emit('set-filter', localFilter)"
+                    >gay
+                </label>
+            </li>
+
+            <li class="filter">
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('transsexual') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="transsexual"
+                        type="checkbox"
+                        class="check"
+                        @change="$emit('set-filter', localFilter)"
+                    >trans
+                </label>
+            </li>
+        </ul>
+
+        <ul class="filters">
+            <li class="filter">
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('anal') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="anal"
+                        type="checkbox"
+                        class="check"
+                        @change="$emit('set-filter', localFilter)"
+                    >anal
+                </label>
+            </li>
+        </ul>
+
+        <ul class="filters">
+            <li class="filter">
+                <label
+                    class="toggle"
+                    :class="{ active: !localFilter.includes('femdom') }"
+                >
+                    <input
+                        v-model="localFilter"
+                        value="femdom"
+                        type="checkbox"
+                        class="check"
+                        @change="$emit('set-filter', localFilter)"
+                    >femdom
+                </label>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        filter: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            localFilter: this.filter,
+        };
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.filters-bar {
+    display: block;
+    background: $shadow-hint;
+    padding: .5rem 1rem;
+    font-size: 0;
+
+    .icon {
+        fill: $shadow;
+    }
+}
+
+.filters {
+    display: inline-block;
+    list-style: none;
+    padding: .5rem;
+    margin: 0;
+
+    &:not(:last-child) {
+        border-right: solid 1px $shadow-weak;
+    }
+}
+
+.filter {
+    display: inline-block;
+}
+
+.toggle {
+    color: $shadow;
+    background: $shadow-hint;
+    box-sizing: border-box;
+    padding: .5rem;
+    margin: 0 .25rem;
+    border-radius: .5rem;
+    font-size: .9rem;
+    font-weight: bold;
+    cursor: pointer;
+
+    .check {
+        display: none;
+    }
+
+    &.active {
+        color: $text-contrast;
+        background: $primary;
+    }
+}
+</style>

assets/components/home/home.vue

@@ -1,62 +1,9 @@
 <template>
     <div class="content">
-        <div class="filters-bar noselect">
-            <Icon icon="filter" />
-
-            <ul class="filters">
-                <li class="filter">
-                    <label
-                        class="toggle"
-                        :class="{ active: showStraight }"
-                    >
-                        <input
-                            v-model="showStraight"
-                            type="checkbox"
-                            class="check"
-                        >straight
-                    </label>
-                </li>
-
-                <li class="filter">
-                    <label
-                        class="toggle"
-                        :class="{ active: showLesbian }"
-                    >
-                        <input
-                            v-model="showLesbian"
-                            type="checkbox"
-                            class="check"
-                        >lesbian
-                    </label>
-                </li>
-
-                <li class="filter">
-                    <label
-                        class="toggle"
-                        :class="{ active: showGay }"
-                    >
-                        <input
-                            v-model="showGay"
-                            type="checkbox"
-                            class="check"
-                        >gay
-                    </label>
-                </li>
-
-                <li class="filter">
-                    <label
-                        class="toggle"
-                        :class="{ active: showTrans }"
-                    >
-                        <input
-                            v-model="showTrans"
-                            type="checkbox"
-                            class="check"
-                        >trans
-                    </label>
-                </li>
-            </ul>
-        </div>
+        <FilterBar
+            :filter="filter"
+            @set-filter="setFilter"
+        />
 
         <div class="content-inner">
             <ul class="scenes nolist">
@@ -73,75 +20,47 @@
 </template>
 
 <script>
+import FilterBar from './filter.vue';
 import ReleaseTile from '../tile/release.vue';
 
-async function mounted() {
-    this.releases = await this.$store.dispatch('fetchReleases');
-    this.networks = await this.$store.dispatch('fetchNetworks');
+async function fetchReleases() {
+    this.releases = await this.$store.dispatch('fetchReleases', {
+        filter: this.filter,
+    });
+}
 
+async function setFilter(filter) {
+    this.filter = filter;
+    localStorage.setItem('filter', this.filter);
+
+    await this.fetchReleases();
+}
+
+async function mounted() {
     this.pageTitle = '';
+
+    await this.fetchReleases();
 }
 
 export default {
     components: {
+        FilterBar,
         ReleaseTile,
     },
     data() {
+        const storedFilter = localStorage.getItem('filter');
+
         return {
-            showStraight: true,
-            showLesbian: true,
-            showGay: false,
-            showTrans: false,
+            filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
             releases: [],
             networks: [],
             pageTitle: null,
         };
     },
     mounted,
+    methods: {
+        fetchReleases,
+        setFilter,
+    },
 };
 </script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.filters-bar {
-    display: block;
-    background: $shadow-hint;
-    padding: .5rem 1rem;
-
-    .icon {
-        fill: $shadow;
-    }
-}
-
-.filters {
-    display: inline-block;
-    list-style: none;
-    padding: .5rem;
-    margin: 0;
-
-    .toggle {
-        color: $shadow;
-        background: $shadow-hint;
-        box-sizing: border-box;
-        padding: .5rem;
-        border-radius: .5rem;
-        font-size: .9rem;
-        font-weight: bold;
-        cursor: pointer;
-
-        .check {
-            display: none;
-        }
-
-        &.active {
-            color: $text-contrast;
-            background: $primary;
-        }
-    }
-}
-
-.filter {
-    display: inline-block;
-}
-</style>

assets/components/release/release.vue

@@ -168,7 +168,7 @@ function photos() {
 }
 
 async function mounted() {
-    [this.release] = await this.$store.dispatch('fetchReleases', this.$route.params.releaseId);
+    [this.release] = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
 }
 
 export default {

assets/components/site/site.vue

@@ -116,7 +116,7 @@ export default {
 }
 
 .logo {
-    width: 15rem;
+    width: 20rem;
     max-height: 8rem;
     object-fit: contain;
     margin: 0 .5rem 1rem 0;

assets/css/_tooltip.scss

@@ -0,0 +1,109 @@
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: #222;
+    color: white;
+    border-radius: 16px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: #222;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, .1);
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    /* transition: opacity .15s, visibility .15s; */
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    /* transition: opacity .15s; */
+  }
+}

assets/css/style.scss

@@ -1,5 +1,6 @@
 @import 'theme';
 @import 'states';
+@import 'tooltip';
 
 html,
 body {

assets/js/api.js

@@ -1,9 +1,11 @@
 import config from 'config';
 
-async function get(endpoint, query = {}) {
-    const queryString = Object.entries(query).reduce((acc, [key, value], index) => `${acc}${index > 0 ? '&' : ''}${key}=${value}`, '?');
+import queryString from 'query-string';
 
-    const res = await fetch(`${config.api.url}${endpoint}${queryString}`, {
+async function get(endpoint, query = {}) {
+    const q = queryString.stringify(query);
+
+    const res = await fetch(`${config.api.url}${endpoint}?${q}`, {
         method: 'GET',
         mode: 'cors',
         credentials: 'same-origin',

assets/js/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import dayjs from 'dayjs';
+import VTooltip from 'v-tooltip';
 
 import router from './router';
 import initStore from './store';
@@ -31,6 +32,8 @@ function init() {
         },
     });
 
+    Vue.use(VTooltip);
+
     new Vue({ // eslint-disable-line no-new
         el: '#container',
         store,

assets/js/releases/actions.js

@@ -1,8 +1,8 @@
 import { get } from '../api';
 
 function initReleasesActions(_store, _router) {
-    async function fetchReleases({ _commit }, releaseId) {
-        const releases = await get(`/releases/${releaseId || ''}`);
+    async function fetchReleases({ _commit }, { id, filter }) {
+        const releases = await get(`/releases/${id || ''}`, { filter });
 
         return releases;
     }