Added icon component. Stylized filter bar.

assets/components/container/container.vue

@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .container {
     height: 100%;
     display: flex;
@@ -27,11 +27,15 @@ export default {
 }
 
 .content {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
-    overflow-y: auto;
+    overflow: hidden;
 }
 
 .content-inner {
+    flex-grow: 1;
     padding: 1rem;
+    overflow-y: auto;
 }
 </style>

assets/components/home/home.vue

@@ -1,34 +1,51 @@
 <template>
-    <div class="content-inner">
-        <div class="filters-bar">
-            Content:
+    <div class="content">
+        <div class="filters-bar noselect">
+            <Icon icon="filter" />
+
             <ul class="filters">
-                <li>
-                    <label>
+                <li class="filter">
+                    <label
+                        class="toggle"
+                        :class="{ active: showLesbian }"
+                    >
                         <input
+                            v-model="showLesbian"
                             type="checkbox"
-                        >Lesbian
+                            class="check"
+                        >lesbian
                     </label>
                 </li>
-                <li>
-                    <label>
+
+                <li class="filter">
+                    <label
+                        class="toggle"
+                        :class="{ active: showGay }"
+                    >
                         <input
+                            v-model="showGay"
                             type="checkbox"
-                        >Gay
+                            class="check"
+                        >gay
                     </label>
                 </li>
-                <li>
-                    <label>
+
+                <li class="filter">
+                    <label
+                        class="toggle"
+                        :class="{ active: showTrans }"
+                    >
                         <input
+                            v-model="showTrans"
                             type="checkbox"
-                        >Transsexual
+                            class="check"
+                        >trans
                     </label>
                 </li>
             </ul>
         </div>
 
-        <h2 class="heading">Latest releases</h2>
-
+        <div class="content-inner">
             <ul class="scenes nolist">
                 <li
                     v-for="release in releases"
@@ -115,7 +132,7 @@
                             <ul class="scene-tags nolist">
                                 <li
                                     v-for="tag in release.tags"
-                                :key="`tag-${tag.id}`"
+                                    :key="`tag-${tag.slug}`"
                                     class="scene-tag"
                                 >
                                     <a
@@ -131,6 +148,7 @@
                 </li>
             </ul>
         </div>
+    </div>
 </template>
 
 <script>
@@ -145,6 +163,9 @@ async function mounted() {
 export default {
     data() {
         return {
+            showLesbian: true,
+            showGay: false,
+            showTrans: false,
             releases: [],
         };
     },
@@ -158,6 +179,47 @@ export default {
 <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;
+}
+
 .scenes {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

assets/components/icon/icon.vue

@@ -0,0 +1,61 @@
+<template>
+    <div
+        :title="label"
+        :class="{ active }"
+        class="icon"
+        v-html="svg"
+    />
+</template>
+
+<script>
+export default {
+    props: {
+        icon: {
+            type: String,
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        active: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            svg: null,
+        };
+    },
+    beforeMount() {
+        this.svg = require(`../../img/${this.icon}.svg`).default;
+    },
+};
+</script>
+
+<style lang="scss">
+@import '../../css/theme';
+
+.icon {
+    fill: $text;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    &.active {
+        fill: $shadow;
+
+        &:hover {
+            fill: $text;
+            cursor: pointer;
+        }
+    }
+}
+</style>

assets/css/_states.scss

@@ -0,0 +1,7 @@
+.noselect {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}

assets/css/style.scss

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

assets/img/filter.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>filter</title>
+<path d="M16 0c-8.837 0-16 2.239-16 5v3l12 12v10c0 1.105 1.791 2 4 2s4-0.895 4-2v-10l12-12v-3c0-2.761-7.163-5-16-5zM2.95 4.338c0.748-0.427 1.799-0.832 3.040-1.171 2.748-0.752 6.303-1.167 10.011-1.167s7.262 0.414 10.011 1.167c1.241 0.34 2.292 0.745 3.040 1.171 0.494 0.281 0.76 0.519 0.884 0.662-0.124 0.142-0.391 0.38-0.884 0.662-0.748 0.427-1.8 0.832-3.040 1.171-2.748 0.752-6.303 1.167-10.011 1.167s-7.262-0.414-10.011-1.167c-1.24-0.34-2.292-0.745-3.040-1.171-0.494-0.282-0.76-0.519-0.884-0.662 0.124-0.142 0.391-0.38 0.884-0.662z"></path>
+</svg>

assets/js/main.js

@@ -7,11 +7,15 @@ import initStore from './store';
 import '../css/style.scss';
 
 import Container from '../components/container/container.vue';
+import Icon from '../components/icon/icon.vue';
 
 function init() {
     const store = initStore(router);
 
     Vue.mixin({
+        components: {
+            Icon,
+        },
         watch: {
             pageTitle(title) {
                 if (title) {

public/css/style.css

@@ -1,3 +1,37 @@
+.filters-bar[data-v-5533e378] {
+  display: block;
+  background: rgba(0, 0, 0, 0.1);
+  padding: .5rem 1rem;
+}
+.filters-bar .icon[data-v-5533e378] {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.filters[data-v-5533e378] {
+  display: inline-block;
+  list-style: none;
+  padding: .5rem;
+  margin: 0;
+}
+.filters .toggle[data-v-5533e378] {
+    color: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    padding: .5rem;
+    border-radius: .5rem;
+    font-size: .9rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+.filters .toggle .check[data-v-5533e378] {
+      display: none;
+}
+.filters .toggle.active[data-v-5533e378] {
+      color: #fff;
+      background: #ff886c;
+}
+.filter[data-v-5533e378] {
+  display: inline-block;
+}
 .scenes[data-v-5533e378] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -148,6 +182,13 @@
     width: .6rem;
 }
 
+.noselect {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-tap-highlight-color: transparent; }
+
 html,
 body {
   height: 100%; }
@@ -182,17 +223,40 @@ body {
   margin: 0;
 }
 
-.container[data-v-4f86a868] {
+.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.content[data-v-4f86a868] {
+.content {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  overflow: hidden;
+}
+.content-inner {
+  flex-grow: 1;
+  padding: 1rem;
   overflow-y: auto;
 }
-.content-inner[data-v-4f86a868] {
-  padding: 1rem;
+
+.icon {
+  fill: #222;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+.icon svg {
+    width: 100%;
+    height: 100%;
+}
+.icon.active {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.icon.active:hover {
+      fill: #222;
+      cursor: pointer;
 }
 

src/fetch-releases.js

@@ -337,6 +337,8 @@ async function fetchReleases() {
     const accumulatedScenes = scenesPerSite.reduce((acc, siteScenes) => ([...acc, ...siteScenes]), []);
     const sortedScenes = accumulatedScenes.sort(({ date: dateA }, { date: dateB }) => moment(dateB).diff(dateA));
 
+    knex.destroy();
+
     return sortedScenes;
 }