Added boob and country aggregation to actors page.

components/filters/countries.vue

@@ -0,0 +1,86 @@
+<template>
+	<ul class="countries nolist">
+		<li
+			v-for="country in countries"
+			:key="country.alpha2"
+			:title="country.name"
+			:class="{ selected: selectedCountry === country.alpha2 }"
+			class="country"
+			@click="updateValue('country', country.alpha2, true)"
+		>
+			<img
+				:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
+				class="flag"
+			>
+
+			<span class="country-name">{{ country.alias || country.name }}</span>
+
+			<Icon
+				v-if="selectedCountry === country.alpha2"
+				icon="cross2"
+				@click.native.stop="updateValue('country', null, true)"
+			/>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+defineProps({
+	countries: {
+		type: Array,
+		default: () => [],
+	},
+	selectedCountry: {
+		type: String,
+		default: null,
+	},
+	updateValue: {
+		type: Function,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.countries:not(:last-child) {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.country {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+
+	.flag {
+		width: 2rem;
+		padding: .25rem .5rem;
+	}
+
+	.icon {
+		padding: .25rem .5rem;;
+		fill: var(--shadow);
+
+		&:hover {
+			fill: var(--shadow-strong-10);
+		}
+	}
+
+	&:hover {
+		background: var(--shadow-weak-30);
+		cursor: pointer;
+	}
+
+	&.selected {
+		font-weight: bold;
+	}
+}
+
+.country-name {
+	flex-grow: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: .25rem .5rem;
+}
+</style>

components/filters/range.vue

@@ -77,132 +77,4 @@ const emit = defineEmits(['change', 'input', 'enable']);
 </script>
 
 <style scoped>
-.filter-section {
-	width: 15rem;
-	max-width: 100%;
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-.filter-label {
-	display: flex;
-	justify-content: space-between;
-	padding: .75rem .5rem .5rem .5rem;
-	color: var(--shadow);
-	font-weight: bold;
-	font-size: .9rem;
-
-	.label {
-		display: inline-flex;
-		align-items: center;
-		text-transform: capitalize;
-	}
-
-	.checkbox {
-		margin: 0 .75rem 0 0;
-	}
-
-	.icon {
-		margin: 0 .5rem 0 0;
-	}
-}
-
-.label-values {
-	font-weight: normal;
-}
-
-.filter-split {
-	display: flex;
-	align-items: center;
-}
-
-.toggle-container,
-.range-container {
-	display: flex;
-	flex-grow: 1;
-	align-items: center;
-	padding: .5rem 0;
-
-	&.on {
-		.toggle-label.on {
-			color: var(--enabled);
-
-			.icon {
-				fill: var(--enabled);
-			}
-		}
-
-		.toggle {
-			background-color: var(--enabled-background);
-
-			&::-webkit-slider-thumb {
-				background: var(--enabled);
-			}
-
-			&::-moz-range-thumb {
-				background: var(--enabled);
-			}
-		}
-	}
-
-	&.off {
-		.toggle-label.off {
-			color: var(--disabled);
-
-			.icon {
-				fill: var(--disabled);
-			}
-		}
-
-		.toggle {
-			background-color: var(--disabled-background);
-
-			&::-webkit-slider-thumb {
-				background: var(--disabled);
-			}
-
-			&::-moz-range-thumb {
-				background: var(--disabled);
-			}
-		}
-	}
-}
-
-.toggle-label {
-	display: inline-flex;
-	justify-content: center;
-	min-width: 1.5rem;
-	flex-shrink: 0;
-	padding: 0 .5rem;
-	color: var(--shadow);
-	font-weight: bold;
-	font-size: .9rem;
-
-	&.on {
-		text-align: right;
-	}
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		&.on {
-			color: var(--enabled);
-
-			.icon {
-				fill: var(--enabled);
-			}
-		}
-
-		&.off {
-			color: var(--disabled);
-
-			.icon {
-				fill: var(--disabled);
-			}
-		}
-	}
-}
 </style>