Added boob and country aggregation to actors page.

components/actors/tile.vue

@@ -37,7 +37,7 @@
 			>
 				{{ actor.birthCountry.alpha2 }}
 				<img
-					:src="`/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
+					:src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
 					class="flag"
 				>
 			</span>

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>

components/form/range.vue

@@ -119,7 +119,7 @@ async function setNearest(event) {
 
 		range.value[closestSlider] = closestValue;
 
-		emit('change', [minValue.value, maxValue.value]);
+		set('change');
 	}
 }
 
@@ -133,7 +133,7 @@ async function setRange(prop, value) {
 	if (!props.disabled) {
 		range.value[prop] = value;
 
-		emit('change', [minValue.value, maxValue.value]);
+		set('change');
 	}
 }
 </script>
@@ -161,7 +161,7 @@ async function setRange(prop, value) {
 	border-radius: .625rem;
 
 	&.disabled {
-		--slider-range: var(--shadow-weak-10);
+		--slider-range: var(--shadow-weak-30);
 		--slider-thumb: var(--grey-dark-10);
 	}
 }

components/tooltip/tooltip.vue

@@ -0,0 +1,5 @@
+<template>
+	<div class="tooltip">
+		<slot name="tooltip" />
+	</div>
+</template>