Added tag filters to all URLs. Improved tag filter styling.

assets/components/header/filter-bar.vue

@@ -26,15 +26,11 @@
 		/>
 
 		<span class="tags">
-			<span class="filters-container">
-				<Icon icon="filter" />
-
-				<Filters
-					class="filters-block"
-					:filter="filter"
-					@set-filter="setFilter"
-				/>
-			</span>
+			<Filters
+				class="filters-block"
+				:filter="filter"
+				@set-filter="setFilter"
+			/>
 
 			<v-popover class="filters-compact">
 				<Icon icon="filter" />
@@ -148,10 +144,6 @@ export default {
 	margin: 0 0 -1px 0;
 }
 
-.filters-container {
-    display: inline-block;
-}
-
 .filters-block {
     display: inline-block;
 }
@@ -166,7 +158,7 @@ export default {
 .range-button {
     color: var(--shadow);
     display: inline-block;
-    padding: .75rem 1rem;
+    padding: .75rem 1rem 1rem 1rem;
     border: none;
     font-size: .8rem;
     font-weight: bold;

assets/components/header/filters.vue

@@ -1,6 +1,18 @@
 <template>
-	<v-popover class="filters">
-		<div class="applied">Anal</div>
+	<v-popover class="filters-container">
+		<div class="filters">
+			<Icon icon="filter" />
+
+			<div
+				v-if="selectedTags.length > 0"
+				class="applied"
+			>{{ selectedTags.join(', ') }}</div>
+
+			<div
+				v-else
+				class="applied empty"
+			>Filter by tags</div>
+		</div>
 
 		<div slot="popover">
 			<ul class="tags nolist">
@@ -8,9 +20,9 @@
 					v-for="tag in tags"
 					:key="`tag-${tag}`"
 					class="tag"
-					:class="{ selected: selectedTags.has(tag) }"
+					:class="{ selected: selectedTags.includes(tag) }"
 				>
-					<router-link :to="{ params: { range: getNewRange(tag) } }">
+					<router-link :to="{ params: { tags: getNewRange(tag) } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -18,7 +30,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ params: { range: tag } }"
+						:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all-tags' : tag } }"
 						class="name"
 					>{{ tag }}</router-link>
 				</li>
@@ -42,17 +54,19 @@ const tags = [
 ];
 
 function getNewRange(tag) {
-	const selected = new Set(this.selectedTags).add(tag);
+	if (this.selectedTags.includes(tag)) {
+		if (this.selectedTags.length === 1) {
+			return 'all-tags';
+		}
 
-	if (this.selectedTags.has(tag)) {
-		selected.delete(tag);
+		return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
 	}
 
-	return Array.from(selected).join('+');
+	return this.selectedTags.concat(tag).join('+');
 }
 
 function selectedTags() {
-	return new Set(this.$route.params.range.split('+'));
+	return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all-tags');
 }
 
 export default {
@@ -83,9 +97,29 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
+.filters {
+	display: inline-flex;
+	align-items: center;
+
+	.icon {
+		fill: var(--shadow);
+		margin: 0 .5rem 0 0;
+	}
+}
+
 .applied {
-	padding: .5rem 1rem;
+	width: 12rem;
+	background: var(--background);
+	padding: .5rem;
+	border: solid 1px var(--shadow-hint);
 	font-size: 1rem;
+	white-space: nowrap;
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+
+	&.empty {
+		color: var(--shadow);
+	}
 }
 
 .tags {
@@ -95,17 +129,11 @@ export default {
 .tag {
 	display: flex;
 	align-items: center;
-	padding: 0 .5rem;
 
-	.icon:hover,
-	.name:hover {
-		background: var(--darken-hint);
-	}
-
-	.icon {
+	.include {
 		width: 1rem;
 		height: 1rem;
-		padding: .5rem;
+		padding: .5rem .75rem .5rem 1rem;
 		fill: var(--darken-hint);
 
 		&:hover {
@@ -113,14 +141,11 @@ export default {
 		}
 	}
 
-	.include:hover,
-	&.selected .include {
-		fill: var(--success);
-	}
-
 	.name {
+		display: flex;
+		justify-content: space-between;
 		flex-grow: 1;
-		padding: .5rem;
+		padding: .5rem 1rem .5rem .75rem;
 		color: var(--text);
 		text-decoration: none;
 	}
@@ -129,5 +154,15 @@ export default {
 		background: var(--darken-hint);
 		cursor: pointer;
 	}
+
+	.include:hover,
+	.name:hover {
+		background: var(--darken-hint);
+	}
+
+	.include:hover,
+	&.selected .include {
+		fill: var(--success);
+	}
 }
 </style>