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,135 +1,153 @@
 <template>
-    <div class="content-inner">
+    <div class="content">
-        <div class="filters-bar">
+        <div class="filters-bar noselect">
-            Content:
+            <Icon icon="filter" />
+
             <ul class="filters">
-                <li>
+                <li class="filter">
-                    <label>
+                    <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"
+                    :key="release.id"
+                    class="scene"
+                >
+                    <span class="scene-banner">
+                        <span class="scene-details">
+                            <a
+                                :href="`/site/${release.site.id}`"
+                                :title="release.network.name"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="scene-site site-link"
+                            >{{ release.site.name }}</a>
 
-        <ul class="scenes nolist">
+                            <a
-            <li
+                                :href="release.url"
-                v-for="release in releases"
+                                target="_blank"
-                :key="release.id"
+                                rel="noopener noreferrer"
-                class="scene"
+                                class="scene-date"
-            >
+                            >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
-                <span class="scene-banner">
+                        </span>
-                    <span class="scene-details">
-                        <a
-                            :href="`/site/${release.site.id}`"
-                            :title="release.network.name"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="scene-site site-link"
-                        >{{ release.site.name }}</a>
 
                         <a
-                            :href="release.url"
+                            :href="`/scene/${release.id}`"
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="scene-date"
+                            class="scene-link"
-                        >{{ formatDate(release.date, 'MMM D, YYYY') }}</a>
-                    </span>
-
-                    <a
-                        :href="`/scene/${release.id}`"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="scene-link"
-                    >
-                        <img
-                            v-if="release.poster"
-                            :src="`/${release.poster.path}`"
-                            :alt="release.title"
-                            class="scene-thumbnail"
                         >
+                            <img
+                                v-if="release.poster"
+                                :src="`/${release.poster.path}`"
+                                :alt="release.title"
+                                class="scene-thumbnail"
+                            >
 
-                        <img
+                            <img
-                            v-else-if="release.photos.length > 0"
+                                v-else-if="release.photos.length > 0"
-                            :src="`/${release.photos[0].path}`"
+                                :src="`/${release.photos[0].path}`"
-                            :alt="release.title"
+                                :alt="release.title"
-                            class="scene-thumbnail"
+                                class="scene-thumbnail"
+                            >
+
+                            <div
+                                v-else
+                                :title="release.title"
+                                class="scene-thumbnail"
+                            >No thumbnail available</div>
+                        </a>
+                    </span>
+
+                    <div class="scene-info">
+                        <a
+                            :href="`/scene/${release.id}`"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="scene-row scene-link"
                         >
+                            <h3 class="scene-title">{{ release.title }}</h3>
+                        </a>
 
-                        <div
+                        <span class="scene-row">
-                            v-else
+                            <ul class="scene-actors nolist">
-                            :title="release.title"
+                                <li
-                            class="scene-thumbnail"
+                                    v-for="actor in release.actors"
-                        >No thumbnail available</div>
+                                    :key="actor.id"
-                    </a>
+                                    class="scene-actor"
-                </span>
+                                >
+                                    <a
+                                        :href="`/actor/${actor.slug}`"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="actor-link"
+                                    >{{ actor.name }}</a>
+                                </li>
+                            </ul>
+                        </span>
 
-                <div class="scene-info">
+                        <span
-                    <a
+                            :title="release.tags.map(tag => tag.name).join(', ')"
-                        :href="`/scene/${release.id}`"
+                            class="scene-row"
-                        target="_blank"
+                        >
-                        rel="noopener noreferrer"
+                            <ul class="scene-tags nolist">
-                        class="scene-row scene-link"
+                                <li
-                    >
+                                    v-for="tag in release.tags"
-                        <h3 class="scene-title">{{ release.title }}</h3>
+                                    :key="`tag-${tag.slug}`"
-                    </a>
+                                    class="scene-tag"
-
+                                >
-                    <span class="scene-row">
+                                    <a
-                        <ul class="scene-actors nolist">
+                                        :href="`/tag/${tag.slug}`"
-                            <li
+                                        target="_blank"
-                                v-for="actor in release.actors"
+                                        rel="noopener noreferrer"
-                                :key="actor.id"
+                                        class="tag-link"
-                                class="scene-actor"
+                                    >{{ tag.name }}</a>
-                            >
+                                </li>
-                                <a
+                            </ul>
-                                    :href="`/actor/${actor.slug}`"
+                        </span>
-                                    target="_blank"
+                    </div>
-                                    rel="noopener noreferrer"
+                </li>
-                                    class="actor-link"
+            </ul>
-                                >{{ actor.name }}</a>
+        </div>
-                            </li>
-                        </ul>
-                    </span>
-
-                    <span
-                        :title="release.tags.map(tag => tag.name).join(', ')"
-                        class="scene-row"
-                    >
-                        <ul class="scene-tags nolist">
-                            <li
-                                v-for="tag in release.tags"
-                                :key="`tag-${tag.id}`"
-                                class="scene-tag"
-                            >
-                                <a
-                                    :href="`/tag/${tag.slug}`"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="tag-link"
-                                >{{ tag.name }}</a>
-                            </li>
-                        </ul>
-                    </span>
-                </div>
-            </li>
-        </ul>
     </div>
 </template>
 
@@ -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;
 }