Added 'match all' tag filter for actors and toggle to 'match any'.

assets/components/actors/actor.vue

@@ -291,6 +291,7 @@
 				</Scroll>
 
 				<FilterBar
+					ref="filter"
 					:fetch-releases="fetchActor"
 					:items-total="totalCount"
 					:items-per-page="limit"
@@ -322,7 +323,7 @@ import Social from './social.vue';
 async function fetchActor() {
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
-		limit: 10,
+		limit: this.limit,
 		pageNumber: Number(this.$route.params.pageNumber),
 		range: this.$route.params.range,
 	});
@@ -330,6 +331,10 @@ async function fetchActor() {
 	this.actor = actor;
 	this.releases = releases;
 	this.totalCount = totalCount;
+
+	if (this.$refs.filter) {
+		this.$refs.filter.$el.scrollIntoView();
+	}
 }
 
 function sfw() {
@@ -364,7 +369,7 @@ export default {
 			actor: null,
 			releases: null,
 			totalCount: 0,
-			limit: 10,
+			limit: 15,
 			pageTitle: null,
 			bioExpanded: false,
 			photosExpanded: false,

assets/components/header/filters.vue

@@ -15,6 +15,21 @@
 		</div>
 
 		<div slot="popover">
+			<select
+				v-model="mode"
+				class="mode"
+				@change="$router.push({ query: { ...$route.query, mode } })"
+			>
+				<option
+					value="all"
+					class="option"
+				>match all selected</option>
+				<option
+					value="any"
+					class="option"
+				>match any selected</option>
+			</select>
+
 			<ul class="tags nolist">
 				<li
 					v-for="tag in availableTags"
@@ -22,7 +37,7 @@
 					class="tag"
 					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<router-link :to="{ query: { ...getNewRange(tag.slug) } }">
+					<router-link :to="{ query: { ...getNewRange(tag.slug), mode } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,7 +45,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }) } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }), mode }, params: { pageNumber: 1 } }"
 						class="name"
 					>{{ tag.name }}</router-link>
 				</li>
@@ -71,6 +86,11 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		return {
+			mode: 'all',
+		};
+	},
 	computed: {
 		selectedTags,
 	},
@@ -119,6 +139,15 @@ export default {
 	}
 }
 
+.mode {
+	width: 100%;
+	background: none;
+	padding: .75rem;
+	font-size: 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
 .tags {
 	padding: .5rem 0;
 }

assets/components/releases/tile.vue

@@ -255,16 +255,16 @@ export default {
 }
 
 .labels {
-    padding: .25rem .5rem 1rem .5rem;
+    padding: 0 .5rem 1rem .25rem;
     max-height: .5rem;
     overflow-y: hidden;
 }
 
 .shoot {
 	display: inline;
-	padding: .25rem;
-	background: var(--shadow-hint);
-	color: var(--shadow);
+	padding: .25rem .5rem .25rem .25rem;
+	border-right: solid 1px var(--shadow-hint);
+	color: var(--shadow-strong);
 	font-size: 0.8rem;
 	font-weight: bold;
 }
@@ -275,7 +275,7 @@ export default {
 }
 
 .tag {
-    margin: 0 .25rem .25rem 0;
+    margin: 0 0 .25rem 0;
 }
 
 .tag-link {
@@ -286,7 +286,6 @@ export default {
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px var(--shadow-hint);
 
     &:hover {
         color: var(--primary);

assets/components/tags/tags.vue

@@ -3,6 +3,7 @@
 		<div
 			v-for="(tags, category) in categories"
 			:key="category"
+			class="category"
 		>
 			<h3 class="heading">{{ category }}</h3>
 
@@ -47,12 +48,13 @@ async function mounted() {
 			'creampie',
 			'squirting',
 		],
-		appearance: [
+		ethnicity: [
 			'asian',
 			'ebony',
 			'latina',
 			'caucasian',
-			'indian',
+		],
+		appearance: [
 			'natural-boobs',
 			'fake-boobs',
 			'blonde',
@@ -155,7 +157,11 @@ export default {
 }
 
 .heading {
-    font-size: 1.3rem;
+	display: inline-block;
+	background: var(--primary);
+	color: var(--text-light);
+	padding: .5rem;
+    font-size: 1rem;
     text-transform: capitalize;
 }