Added new tag filter stub.

assets/components/actors/actor.vue

@@ -303,8 +303,8 @@ import Gender from './gender.vue';
 import Social from './social.vue';
 
 async function fetchActor() {
-	this.actor = await this.$store.dispatch('fetchActorBySlug', {
-		actorSlug: this.$route.params.actorSlug,
+	this.actor = await this.$store.dispatch('fetchActorById', {
+		actorId: Number(this.$route.params.actorId),
 		range: this.$route.params.range,
 	});
 }

assets/components/header/filters.vue

@@ -1,72 +1,41 @@
 <template>
-	<div :class="{ compact }">
-		<ul class="filters">
-			<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>
+	<v-popover class="filters">
+		<div class="applied">Anal</div>
 
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('gay') }"
+		<div slot="popover">
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="`tag-${tag}`"
+					class="tag"
 				>
-					<input
-						v-model="localFilter"
-						value="gay"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>gay
-				</label>
-			</li>
+					<Icon
+						icon="checkmark"
+						class="include"
+					/>
 
-			<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>
+					<Icon
+						icon="cross"
+						class="exclude"
+					/>
 
-		<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>
+					<router-link
+						:to="{ name: 'tag', params: { tagSlug: tag } }"
+						class="name"
+					>{{ tag }}</router-link>
 				</li>
 			</ul>
 		</div>
+	</v-popover>
 </template>
 
 <script>
+const tags = [
+	'anal',
+	'double-penetration',
+	'gangbang',
+];
+
 export default {
 	props: {
 		filter: {
@@ -81,6 +50,7 @@ export default {
 	data() {
 		return {
 			localFilter: this.filter,
+			tags,
 		};
 	},
 };
@@ -89,54 +59,55 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.filters {
-    display: inline-block;
-    list-style: none;
+.applied {
+	padding: .5rem 1rem;
+	font-size: 1rem;
+}
+
+.tags {
+	padding: .5rem 0;
+}
+
+.tag {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+
+	.icon:hover,
+	.name:hover {
+		background: var(--darken-hint);
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
 		padding: .5rem;
-    margin: 0;
+		fill: var(--darken-weak);
 
-    &:not(:last-child) {
-        border-right: solid 1px var(--shadow-hint);
-    }
-}
-
-.filter {
-    display: inline-block;
-}
-
-.compact {
-    .filters {
-        padding: 0;
-        border: none;
-    }
-
-    .filter {
-        margin: 0 0 1.5rem 0;
-    }
-}
-
-.toggle {
-    color: var(--shadow);
-    box-sizing: border-box;
-    padding: .5rem;
-    margin: 0 .25rem;
-    border: solid 1px transparent;
-    font-size: .9rem;
-    font-weight: bold;
+		&:hover {
 			cursor: pointer;
+		}
+	}
 
-    .check {
-        display: none;
+	.include:hover,
+	.include.active {
+		fill: var(--success);
+	}
+
+	.exclude:hover,
+	.exclude.active {
+		fill: var(--alert);
+	}
+
+	.name {
+		padding: .5rem;
+		color: var(--text);
+		text-decoration: none;
 	}
 
 	&:hover {
-        color: var(--shadow);
-    }
-
-    &.active {
-		background: var(--background);
-        color: var(--primary);
-        box-shadow: 0 0 2px var(--shadow-weak);
+		background: var(--darken-hint);
+		cursor: pointer;
 	}
 }
 </style>

assets/components/tags/tag.vue

@@ -3,8 +3,6 @@
 		v-if="tag"
 		class="content"
 	>
-		<FilterBar :fetch-releases="fetchReleases" />
-
 		<div
 			class="tag"
 			:class="{ nomedia: !hasMedia }"
@@ -42,6 +40,7 @@
 				</div>
 			</div>
 
+
 			<div class="content-inner">
 				<Photos
 					v-if="hasMedia"
@@ -49,6 +48,7 @@
 					class="compact"
 				/>
 
+				<FilterBar :fetch-releases="fetchReleases" />
 				<Releases :releases="tag.releases" />
 			</div>
 		</div>
@@ -153,6 +153,7 @@ export default {
 
 .content-inner {
     padding: 0;
+	overflow-y: auto;
 }
 
 .header {

assets/components/tile/actor.vue

@@ -4,7 +4,7 @@
 		class="actor"
 	>
 		<router-link
-			:to="{ name: 'actor', params: { actorSlug: actor.slug } }"
+			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
 			<span

assets/components/tile/release.vue

@@ -123,10 +123,10 @@
 						:key="actor.id"
 						class="actor"
 					>
-						<a
-							:href="`/actor/${actor.slug}`"
+						<router-link
+							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 							class="actor-link"
-						>{{ actor.name }}</a>
+						>{{ actor.name }}</router-link>
 					</li>
 				</ul>
 			</span>

assets/css/_theme.scss

@@ -61,6 +61,7 @@ $female: #f0a;
 
     --alert: #f00;
     --warn: #fa0;
+    --success: #5c2;
 }
 
 .light {

assets/css/_tooltip.scss

@@ -7,7 +7,6 @@
     background: #222;
     color: white;
     border-radius: 16px;
-    padding: 5px 10px 4px;
   }
 
   .tooltip-arrow {
@@ -86,7 +85,6 @@
     .popover-inner {
       background: $color;
       color: black;
-      padding: .5rem;
       border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }

assets/js/actors/actions.js

@@ -8,26 +8,19 @@ import { curateActor, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
 function initActorActions(store, _router) {
-	async function fetchActorBySlug({ _commit }, { actorSlug, limit = 100, range = 'latest' }) {
+	async function fetchActorById({ _commit }, { actorId, limit = 100, range = 'latest' }) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { actors: [actor] } = await graphql(`
+		const { actor } = await graphql(`
             query Actor(
-                $actorSlug: String!
+                $actorId: Int!
                 $limit:Int = 1000,
                 $after:Date = "1900-01-01",
                 $before:Date = "2100-01-01",
                 $orderBy:[ReleasesActorsOrderBy!]
                 $exclude: [String!]
             ) {
-                actors(filter: {
-                    slug: {
-                        equalTo: $actorSlug,
-                    },
-                    networkId: {
-                        isNull: true,
-                    },
-                }) {
+                actor(id: $actorId) {
                     id
                     name
                     slug
@@ -177,7 +170,7 @@ function initActorActions(store, _router) {
                 }
             }
         `, {
-			actorSlug,
+			actorId,
 			limit,
 			after,
 			before,
@@ -280,7 +273,7 @@ function initActorActions(store, _router) {
 	}
 
 	return {
-		fetchActorBySlug,
+		fetchActorById,
 		fetchActors,
 		fetchActorReleases,
 	};

assets/js/router.js

@@ -60,7 +60,7 @@ const routes = [
 		name: 'movie',
 	},
 	{
-		path: '/actor/:actorSlug',
+		path: '/actor/:actorId/:actorSlug?',
 		name: 'actor',
 		redirect: from => ({
 			name: 'actorRange',
@@ -71,7 +71,7 @@ const routes = [
 		}),
 	},
 	{
-		path: '/actor/:actorSlug/:range',
+		path: '/actor/:actorId/:actorSlug?/:range',
 		component: Actor,
 		name: 'actorRange',
 	},