Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.

assets/components/header/filter-bar.vue

@@ -20,11 +20,6 @@
 			>New</router-link>
 		</span>
 
-		<Pagination
-			:items-total="itemsTotal"
-			:items-per-page="itemsPerPage"
-		/>
-
 		<span class="tags">
 			<Filters
 				class="filters-block"
@@ -50,7 +45,6 @@
 <script>
 import { mapState } from 'vuex';
 import Filters from './filters.vue';
-import Pagination from '../pagination/pagination.vue';
 
 function filter(state) {
 	return state.ui.filter;
@@ -85,7 +79,6 @@ async function setBatch(newBatch) {
 export default {
 	components: {
 		Filters,
-		Pagination,
 	},
 	props: {
 		fetchReleases: {
@@ -141,7 +134,6 @@ export default {
 .sort {
     display: flex;
     align-items: center;
-	margin: 0 0 -1px 0;
 }
 
 .filters-block {
@@ -160,6 +152,7 @@ export default {
     display: inline-block;
     padding: .75rem 1rem 1rem 1rem;
     border: none;
+	position: relative;
     font-size: .8rem;
     font-weight: bold;
     text-decoration: none;
@@ -175,6 +168,17 @@ export default {
         color: var(--primary);
 		background: var(--background-soft);
 		border-color: var(--crease);
+
+		&::after {
+			/* hide grey border for tab effect, negative margin shows grey crease on mobile */
+			content: '';
+			width: 100%;
+			height: 2px;
+			background: var(--background-soft);
+			position: absolute;
+			left: 0;
+			bottom: -1px;
+		}
     }
 }
 

assets/components/header/filters.vue

@@ -1,17 +1,17 @@
 <template>
 	<v-popover class="filters-container">
 		<div class="filters">
-			<Icon icon="filter" />
-
 			<div
 				v-if="selectedTags.length > 0"
 				class="applied"
-			>{{ selectedTags.join(', ') }}</div>
+			>{{ selectedTags.length }} selected</div>
 
 			<div
 				v-else
 				class="applied empty"
 			>Filter by tags</div>
+
+			<Icon icon="filter" />
 		</div>
 
 		<div slot="popover">
@@ -22,7 +22,7 @@
 					class="tag"
 					:class="{ selected: selectedTags.includes(tag) }"
 				>
-					<router-link :to="{ params: { tags: getNewRange(tag) } }">
+					<router-link :to="{ query: { ...getNewRange(tag) } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,7 +30,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all' : tag } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag) ? null : { tags: tag }) } }"
 						class="name"
 					>{{ tag }}</router-link>
 				</li>
@@ -55,18 +55,18 @@ const tags = [
 
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
-		if (this.selectedTags.length === 1) {
-			return 'all';
+		if (this.selectedTags.length > 1) {
+			return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') };
 		}
 
-		return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
+		return {};
 	}
 
-	return this.selectedTags.concat(tag).join('+');
+	return { tags: this.selectedTags.concat(tag).join(',') };
 }
 
 function selectedTags() {
-	return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all');
+	return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
 }
 
 export default {
@@ -108,14 +108,13 @@ export default {
 }
 
 .applied {
-	width: 12rem;
-	background: var(--background);
-	padding: .5rem;
-	border: solid 1px var(--shadow-hint);
+	flex-grow: 1;
+	padding: .75rem .5rem;
 	font-size: 1rem;
 	white-space: nowrap;
-	overflow-x: hidden;
+	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: right;
 
 	&.empty {
 		color: var(--shadow);