Added 'clear all' button to tag filter. Tag name never removes tag. Added actor scene scraping to LegalPorno.

assets/components/header/filters.vue

@@ -1,17 +1,17 @@
 <template>
 	<v-popover class="filters-container">
 		<div class="filters">
+			<Icon icon="price-tag4" />
+
 			<div
 				v-if="selectedTags.length > 0"
 				class="applied"
-			>{{ selectedTags.length }} selected</div>
+			>{{ selectedTags.length }} tag filters</div>
 
 			<div
 				v-else
 				class="applied empty"
 			>Filter by tags</div>
-
-			<Icon icon="filter" />
 		</div>
 
 		<div slot="popover">
@@ -30,6 +30,12 @@
 				>match any selected</option>
 			</select>
 
+			<router-link
+				v-if="selectedTags.length > 1"
+				class="reset"
+				:to="{}"
+			><Icon icon="cross2" />clear all</router-link>
+
 			<ul class="tags nolist">
 				<li
 					v-for="tag in availableTags"
@@ -37,15 +43,24 @@
 					class="tag"
 					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<router-link :to="{ query: { ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }">
+					<router-link
+						:to="{ query: { ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
+						class="include"
+						:class="{ selected: selectedTags.includes(tag.slug) }"
+					>
 						<Icon
 							icon="checkmark"
-							class="include"
+							class="add"
+						/>
+
+						<Icon
+							icon="cross2"
+							class="remove"
 						/>
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }), mode }, params: { pageNumber: 1 } }"
+						:to="{ query: { tags: tag.slug, mode }, params: { pageNumber: 1 } }"
 						class="name"
 					>{{ tag.name }}</router-link>
 				</li>
@@ -104,12 +119,13 @@ export default {
 @import 'theme';
 
 .filters {
+	color: var(--shadow);
 	display: inline-flex;
 	align-items: center;
 
 	.icon {
 		fill: var(--shadow);
-		margin: 0 .5rem 0 0;
+		margin: -.1rem 0 0 0;
 	}
 
 	&:hover {
@@ -143,27 +159,39 @@ export default {
 	width: 100%;
 	background: none;
 	padding: .75rem;
+	margin: 0 0 .5rem 0;
 	font-size: 1rem;
 	border: none;
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
-.tags {
-	padding: .5rem 0;
-}
-
 .tag {
 	display: flex;
 	align-items: center;
 
 	.include {
-		width: 1rem;
-		height: 1rem;
-		padding: .5rem .75rem .5rem 1rem;
-		fill: var(--darken-hint);
+		.icon {
+			width: 1rem;
+			height: 1rem;
+			padding: .5rem .75rem .5rem 1rem;
+			fill: var(--darken-hint);
+		}
+
+		.remove {
+			display: none;
+			fill: var(--alert);
+		}
 
 		&:hover {
 			cursor: pointer;
+
+			&.selected .add {
+				display: none;
+			}
+
+			&.selected .remove {
+				display: inline-block;
+			}
 		}
 	}
 
@@ -187,11 +215,32 @@ export default {
 		background: var(--darken-hint);
 	}
 
-	&.selected .include {
+	&.selected .include .add {
 		fill: var(--success);
 	}
 }
 
+.reset {
+	display: flex;
+	align-items: center;
+	padding: .25rem 0;
+	color: var(--text);
+	text-decoration: none;
+
+	.icon {
+		fill: var(--darken-weak);
+		padding: .5rem 1.5rem .5rem 1rem;
+	}
+
+	&:hover {
+		background: var(--darken-hint);
+
+		.icon {
+			fill: var(--alert);
+		}
+	}
+}
+
 @media(max-width: $breakpoint0) {
 	.applied {
 		display: none;