Added channel filter.

assets/components/actors/actor.vue

@@ -296,6 +296,7 @@
 					:items-total="totalCount"
 					:items-per-page="limit"
 					:available-tags="actor.tags"
+					:available-channels="actor.channels"
 				/>
 
 				<Releases :releases="releases" />
@@ -312,7 +313,7 @@
 
 <script>
 import Pagination from '../pagination/pagination.vue';
-import FilterBar from '../header/filter-bar.vue';
+import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Photos from './photos.vue';
 import Expand from '../expand/expand.vue';
@@ -402,7 +403,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--highlight-extreme);
+    color: var(--lighten-extreme);
     background: var(--profile);
     padding: .75rem 1rem;
 }
@@ -429,7 +430,7 @@ export default {
 
 .profile {
     background: var(--profile);
-    color: var(--highlight-extreme);
+    color: var(--lighten-extreme);
     width: 100%;
     max-height: 18rem;
     display: flex;
@@ -486,7 +487,7 @@ export default {
     overflow: hidden;
 
     &:not(:last-of-type) {
-        border-bottom: solid 1px var(--highlight-hint);
+        border-bottom: solid 1px var(--lighten-hint);
     }
 }
 
@@ -497,14 +498,14 @@ export default {
 }
 
 .bio-label {
-    color: var(--highlight);
+    color: var(--lighten);
     margin: 0 1rem 0 0;
     flex-shrink: 0;
     font-style: normal;
     font-weight: 400;
 
     .icon {
-        fill: var(--highlight);
+        fill: var(--lighten);
         margin: -.25rem .5rem 0 0;
     }
 }
@@ -538,7 +539,7 @@ export default {
 .age {
     font-weight: bold;
     padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--highlight-weak);
+    border-left: solid 1px var(--lighten-weak);
     margin: 0 0 0 .5rem;
 }
 
@@ -554,7 +555,7 @@ export default {
 .height-imperial,
 .weight-imperial {
     padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--highlight-weak);
+    border-left: solid 1px var(--lighten-weak);
     margin: 0 0 0 .5rem;
 }
 
@@ -571,7 +572,7 @@ export default {
 }
 
 .scraped {
-    color: var(--highlight-weak);
+    color: var(--lighten-weak);
     font-size: .8rem;
 }
 

assets/components/entities/entity.vue

@@ -110,7 +110,7 @@
 <script>
 import Vue from 'vue';
 
-import FilterBar from '../header/filter-bar.vue';
+import FilterBar from '../filters/filter-bar.vue';
 import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
 import Children from './children.vue';

assets/components/filters/channel-filter.vue

@@ -0,0 +1,144 @@
+<template>
+	<v-popover class="filter-container">
+		<div class="filter">
+			<Icon icon="antenna" />
+
+			<div
+				v-if="selectedChannels.length > 0"
+				class="filter-applied"
+			>{{ selectedChannels.length }} {{ selectedChannels.length > 1 ? 'channels' : 'channel' }}</div>
+
+			<div
+				v-else
+				class="filter-applied empty"
+			>Channels</div>
+		</div>
+
+		<div slot="popover">
+			<router-link
+				class="filter-clear"
+				:to="{ query: { ...$route.query, channels: undefined } }"
+				:class="{ active: selectedChannels.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
+
+			<ul class="filter-items nolist">
+				<li
+					v-for="channel in channelsPerNetwork"
+					:key="`channel-${channel.id}`"
+					class="filter-item"
+					:class="{ [channel.type]: true, independent: channel.independent }"
+				>
+					<router-link
+						:to="{ query: { ...$route.query, channels: channel.slug, mode }, params: { pageNumber: 1 } }"
+						class="filter-name"
+					>
+						<img
+							v-if="channel.independent || !channel.parent"
+							:src="`/img/logos/${channel.slug}/favicon.png`"
+							class="favicon"
+						>
+
+						{{ channel.name }}
+					</router-link>
+
+					<router-link
+						:to="{ query: { ...$route.query, ...getNewRange(channel.slug), mode }, params: { pageNumber: 1 } }"
+						class="filter-include"
+						:class="{ selected: selectedChannels.includes(channel.slug) }"
+					>
+						<Icon
+							icon="checkmark"
+							class="filter-add"
+						/>
+
+						<Icon
+							icon="cross2"
+							class="filter-remove"
+						/>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+	</v-popover>
+</template>
+
+<script>
+function getNewRange(channel) {
+	if (this.selectedChannels.includes(channel)) {
+		return { channels: this.selectedChannels.filter(selectedTag => selectedTag !== channel).join(',') || undefined };
+	}
+
+	return { channels: this.selectedChannels.concat(channel).join(',') };
+}
+
+function selectedChannels() {
+	return this.$route.query.channels ? this.$route.query.channels.split(',') : [];
+}
+
+function channelsPerNetwork() {
+	const networks = this.availableChannels.reduce((acc, channel) => {
+		if (channel.independent || !channel.parent) {
+			acc[channel.slug] = { ...channel, children: [] };
+			return acc;
+		}
+
+		if (!acc[channel.parent.slug]) {
+			acc[channel.parent.slug] = { ...channel.parent, children: [] };
+		}
+
+		acc[channel.parent.slug].children.push(channel);
+
+		return acc;
+	}, {});
+
+	return Object.values(networks).reduce((acc, network) => [...acc, network, ...(network.children || [])], []);
+}
+
+export default {
+	props: {
+		filter: {
+			type: Array,
+			default: () => [],
+		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+		availableChannels: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			mode: this.$route.query.mode || 'all',
+		};
+	},
+	computed: {
+		channelsPerNetwork,
+		selectedChannels,
+	},
+	methods: {
+		getNewRange,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	padding: 0 .75rem 0 0;
+	filter: drop-shadow(0 0 1px var(--darken));
+}
+
+.network .filter-name,
+.independent .filter-name {
+	font-weight: bold;
+	padding: .5rem;
+}
+
+.channel:not(.independent) .filter-name {
+	padding: .5rem .5rem .5rem 2.25rem;
+}
+</style>

assets/components/filters/filter-bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="filter-bar noselect">
-		<span class="sort">
+		<div class="sort">
 			<router-link
 				:to="{ params: { range: 'latest', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'latest' || range === 'latest' }"
@@ -18,20 +18,28 @@
 				:class="{ active: $route.name === 'new' || range === 'new' }"
 				class="range-button"
 			>New</router-link>
-		</span>
+		</div>
 
-		<Filters
-			class="filters"
-			:filter="filter"
-			:available-tags="availableTags"
-			@set-filter="setFilter"
-		/>
+		<div class="filters">
+			<ChannelFilter
+				class="filter"
+				:filter="filter"
+				:available-channels="availableChannels"
+			/>
+
+			<TagFilter
+				class="filter"
+				:filter="filter"
+				:available-tags="availableTags"
+			/>
+		</div>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import Filters from './filters.vue';
+import ChannelFilter from './channel-filter.vue';
+import TagFilter from './tag-filter.vue';
 
 function filter(state) {
 	return state.ui.filter;
@@ -45,12 +53,6 @@ function batch(state) {
 	return state.ui.batch;
 }
 
-async function setFilter(newFilter) {
-	this.$store.dispatch('setFilter', newFilter);
-
-	await this.fetchReleases();
-}
-
 async function setRange(newRange) {
 	this.$store.dispatch('setRange', newRange);
 
@@ -65,7 +67,8 @@ async function setBatch(newBatch) {
 
 export default {
 	components: {
-		Filters,
+		ChannelFilter,
+		TagFilter,
 	},
 	props: {
 		fetchReleases: {
@@ -88,6 +91,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		availableChannels: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		...mapState({
@@ -97,13 +104,156 @@ export default {
 		}),
 	},
 	methods: {
-		setFilter,
 		setRange,
 		setBatch,
 	},
 };
 </script>
 
+<style lang="scss">
+@import 'breakpoints';
+
+.filter {
+	color: var(--shadow);
+	display: inline-flex;
+	align-items: center;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem 0 0 0;
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.applied {
+			color: var(--shadow-strong);
+		}
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
+}
+
+.filter-applied {
+	flex-grow: 1;
+	padding: .75rem .5rem;
+	font-size: 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: right;
+
+	&.empty {
+		color: var(--shadow);
+	}
+}
+
+.filter-mode {
+	width: 100%;
+	background: none;
+	padding: .75rem;
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.filter-clear {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: .5rem 1rem;
+	color: var(--darken-weak);
+	text-decoration: none;
+	cursor: default;
+
+	.icon {
+		fill: var(--darken-hint);
+		margin: 0 0 0 1rem;
+	}
+
+	&.active {
+		color: var(--darken);
+
+		.icon {
+			fill: var(--darken-weak);
+		}
+
+		&:hover {
+			color: var(--text);
+			background: var(--darken-hint);
+			cursor: pointer;
+
+			.icon {
+				fill: var(--alert);
+			}
+		}
+	}
+}
+
+.filter-items .filter-item {
+	display: flex;
+	align-items: center;
+
+	&:hover {
+		background: var(--darken-hint);
+		cursor: pointer;
+	}
+
+	&.selected .filter-include .filter-add {
+		fill: var(--success);
+	}
+}
+
+.filter-include {
+	.icon {
+		width: 1rem;
+		height: 1rem;
+		padding: .5rem 1rem;
+		fill: var(--darken-hint);
+	}
+
+	.filter-remove {
+		display: none;
+		fill: var(--alert);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.selected .filter-add {
+			display: none;
+		}
+
+		&.selected .filter-remove {
+			display: inline-block;
+		}
+	}
+}
+
+.filter-name {
+	min-width: 8rem;
+	display: flex;
+	flex-grow: 1;
+	padding: .5rem .75rem .5rem 1rem;
+	color: var(--text);
+	text-decoration: none;
+}
+
+.filter-include:hover,
+.filter-name:hover {
+	background: var(--darken-hint);
+}
+
+@media(max-width: $breakpoint-micro) {
+	.filter-applied {
+		display: none;
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -162,8 +312,12 @@ export default {
     }
 }
 
-.filters {
+.filter {
     display: inline-block;
 	flex-shrink: 0;
+
+	&:not(:last-child) {
+		margin: 0 1rem 0 0;
+	}
 }
 </style>

assets/components/filters/tag-filter.vue

@@ -0,0 +1,111 @@
+<template>
+	<v-popover class="filter-container">
+		<div class="filter">
+			<Icon icon="price-tag4" />
+
+			<div
+				v-if="selectedTags.length > 0"
+				class="filter-applied"
+			>{{ selectedTags.length }} {{ selectedTags.length > 1 ? 'tags' : 'tag' }}</div>
+
+			<div
+				v-else
+				class="filter-applied empty"
+			>Tags</div>
+		</div>
+
+		<div slot="popover">
+			<select
+				v-model="mode"
+				class="filter-mode"
+				@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
+			>
+				<option value="all">match all selected</option>
+				<option value="any">match any selected</option>
+			</select>
+
+			<router-link
+				class="filter-clear"
+				:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
+				:class="{ active: selectedTags.length > 0 }"
+			>clear all<Icon icon="cross2" /></router-link>
+
+			<ul class="filter-items nolist">
+				<li
+					v-for="tag in availableTags"
+					:key="`tag-${tag.id}`"
+					class="filter-item"
+					:class="{ selected: selectedTags.includes(tag.slug) }"
+				>
+					<router-link
+						:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
+						class="filter-name"
+					>{{ tag.name }}</router-link>
+
+					<router-link
+						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
+						class="filter-include"
+						:class="{ selected: selectedTags.includes(tag.slug) }"
+					>
+						<Icon
+							icon="checkmark"
+							class="filter-add"
+						/>
+
+						<Icon
+							icon="cross2"
+							class="filter-remove"
+						/>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+	</v-popover>
+</template>
+
+<script>
+function getNewRange(tag) {
+	if (this.selectedTags.includes(tag)) {
+		return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
+	}
+
+	return { tags: this.selectedTags.concat(tag).join(',') };
+}
+
+function selectedTags() {
+	return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
+}
+
+export default {
+	props: {
+		filter: {
+			type: Array,
+			default: () => [],
+		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+		availableTags: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			mode: this.$route.query.mode || 'all',
+		};
+	},
+	computed: {
+		selectedTags,
+	},
+	methods: {
+		getNewRange,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+</style>

assets/components/header/filters.vue

@@ -1,249 +0,0 @@
-<template>
-	<v-popover class="filters-container">
-		<div class="filters">
-			<Icon icon="price-tag4" />
-
-			<div
-				v-if="selectedTags.length > 0"
-				class="applied"
-			>{{ selectedTags.length }} tag filters</div>
-
-			<div
-				v-else
-				class="applied empty"
-			>Filter by tags</div>
-		</div>
-
-		<div slot="popover">
-			<select
-				v-model="mode"
-				class="mode"
-				@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
-			>
-				<option
-					value="all"
-					class="option"
-				>match all selected</option>
-				<option
-					value="any"
-					class="option"
-				>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"
-					:key="`tag-${tag.id}`"
-					class="tag"
-					:class="{ selected: selectedTags.includes(tag.slug) }"
-				>
-					<router-link
-						:to="{ query: { ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
-						class="include"
-						:class="{ selected: selectedTags.includes(tag.slug) }"
-					>
-						<Icon
-							icon="checkmark"
-							class="add"
-						/>
-
-						<Icon
-							icon="cross2"
-							class="remove"
-						/>
-					</router-link>
-
-					<router-link
-						:to="{ query: { tags: tag.slug, mode }, params: { pageNumber: 1 } }"
-						class="name"
-					>{{ tag.name }}</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
-</template>
-
-<script>
-function getNewRange(tag) {
-	if (this.selectedTags.includes(tag)) {
-		if (this.selectedTags.length > 1) {
-			return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') };
-		}
-
-		return {};
-	}
-
-	return { tags: this.selectedTags.concat(tag).join(',') };
-}
-
-function selectedTags() {
-	return this.$route.query.tags ? this.$route.query.tags.split(',') : [];
-}
-
-export default {
-	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
-		compact: {
-			type: Boolean,
-			default: false,
-		},
-		availableTags: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			mode: this.$route.query.mode || 'all',
-		};
-	},
-	computed: {
-		selectedTags,
-	},
-	methods: {
-		getNewRange,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.filters {
-	color: var(--shadow);
-	display: inline-flex;
-	align-items: center;
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem 0 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
-.applied {
-	flex-grow: 1;
-	padding: .75rem .5rem;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: right;
-
-	&.empty {
-		color: var(--shadow);
-	}
-}
-
-.mode {
-	width: 100%;
-	background: none;
-	padding: .75rem;
-	margin: 0 0 .5rem 0;
-	font-size: 1rem;
-	border: none;
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-.tag {
-	display: flex;
-	align-items: center;
-
-	.include {
-		.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;
-			}
-		}
-	}
-
-	.name {
-		min-width: 8rem;
-		display: flex;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: .5rem 1rem .5rem .75rem;
-		color: var(--text);
-		text-decoration: none;
-	}
-
-	&:hover {
-		background: var(--darken-hint);
-		cursor: pointer;
-	}
-
-	.include:hover,
-	.name:hover {
-		background: var(--darken-hint);
-	}
-
-	&.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;
-	}
-}
-</style>

assets/components/header/header.vue

@@ -4,13 +4,7 @@
 			<div
 				class="sidebar-toggle"
 				@click.stop="toggleSidebar"
-			>
-				<Icon icon="menu" />
-				<div
-					class="logo"
-					v-html="logo"
-				/>
-			</div>
+			><Icon icon="menu" /></div>
 
 			<router-link
 				to="/"
@@ -82,7 +76,7 @@
 				<Icon
 					v-show="sfw"
 					v-tooltip="'Hit N to disable safe mode'"
-					icon="evil2"
+					icon="fire"
 					class="toggle noselect"
 					@click.native="setSfw(false)"
 				/>
@@ -215,11 +209,6 @@ export default {
 	align-items: center;
 	height: 100%;
 
-	.logo {
-		fill: var(--primary);
-		padding: .5rem;
-	}
-
 	.icon {
 		display: inline-block;
 		fill: var(--shadow-modest);
@@ -354,14 +343,17 @@ export default {
 }
 
 @media(max-width: $breakpoint-micro) {
-    .nav,
-	.header-logo {
+	.nav {
         display: none;
     }
 
     .sidebar-toggle {
         display: flex;
     }
+
+	.header-logo {
+		padding: 0 0 0 .5rem;
+	}
 }
 
 @media(max-width: $breakpoint-nano) {

assets/components/home/home.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import FilterBar from '../header/filter-bar.vue';
+import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 

assets/components/sidebar/sidebar.vue

@@ -96,7 +96,7 @@
 					v-show="sfw"
 					class="toggle"
 					@click="setSfw(false)"
-				><Icon icon="evil2" />Disable safe mode</label>
+				><Icon icon="fire" />Disable safe mode</label>
 
 				<label
 					v-show="!sfw"

assets/components/tags/tag.vue

@@ -41,7 +41,7 @@ import { Converter } from 'showdown';
 
 import escapeHtml from '../../../src/utils/escape-html';
 
-import FilterBar from '../header/filter-bar.vue';
+import FilterBar from '../filters/filter-bar.vue';
 import Photos from './photos.vue';
 import Releases from '../releases/releases.vue';
 import Scroll from '../scroll/scroll.vue';

assets/components/tags/tags.vue

@@ -161,7 +161,7 @@ export default {
 	color: var(--primary);
 	padding: 0 .5rem;
 	margin: .5rem 0 1rem 0;
-    font-size: 1rem;
+    font-size: 1.2rem;
     text-transform: capitalize;
 }