Added country and birthday filters to actors page.

components/actors/tile.vue

@@ -108,6 +108,7 @@ defineProps({
 	align-items: center;
 	position: absolute;
 	bottom: 0;
+	box-sizing: border-box;
 	padding: 0 .5rem;
 	color: var(--text-light);
 	background: var(--shadow);

components/filters/countries.vue

@@ -43,7 +43,7 @@ defineProps({
 
 <style scoped>
 .countries:not(:last-child) {
-	border-bottom: solid 1px var(--shadow-hint);
+	border-bottom: solid 1px var(--shadow-weak-30);
 }
 
 .country {
@@ -53,12 +53,12 @@ defineProps({
 	overflow: hidden;
 
 	.flag {
-		width: 2rem;
-		padding: .25rem .5rem;
+		width: 1.5rem;
+		padding: .25rem .25rem .25rem .5rem;
 	}
 
 	.icon {
-		padding: .25rem .5rem;;
+		padding: .25rem .6rem;
 		fill: var(--shadow);
 
 		&:hover {

components/header/header.vue

@@ -70,6 +70,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 	display: flex;
 	width: 8rem;
 	height: 3rem;
+	box-sizing: border-box;
 	padding: .75rem;
 	margin-right: 1rem;
 	fill: var(--primary);
@@ -82,6 +83,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 .nav-item .link {
 	font-size: .9rem;
 	color: var(--shadow-strong-10);
+	box-sizing: border-box;
 	padding: 1rem;
 	height: 100%;
 

components/tooltip/tooltip.vue

@@ -1,5 +1,137 @@
 <template>
-	<div class="tooltip">
-		<slot name="tooltip" />
+	<div class="tooltip-container">
+		<div
+			ref="handle"
+			class="tooltip-handle"
+			@click.stop="toggle"
+		>
+			<slot />
+		</div>
+
+		<div
+			v-show="opened"
+			class="tooltip-layer"
+		>
+			<div
+				ref="tooltip"
+				class="tooltip-wrapper"
+				:style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
+			>
+				<div
+					class="tooltip"
+					@click="close"
+				>
+					<slot
+						name="tooltip"
+						@click.stop
+					/>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
+
+<script setup>
+import {
+	ref,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from 'vue';
+
+// import { useFloating } from '@floating-ui/vue';
+import { computePosition, shift } from '@floating-ui/dom';
+
+import events from '#/src/events.js';
+
+const handle = ref(null);
+const tooltip = ref(null);
+const opened = ref(false);
+
+const position = ref({
+	x: 0,
+	y: 0,
+});
+
+const props = defineProps({
+	placement: {
+		type: String,
+		default: 'top',
+	},
+});
+
+async function open() {
+	events.emit('blur');
+	opened.value = true;
+
+	await nextTick();
+
+	console.log(handle.value);
+
+	/*
+	const { floatingStyles } = useFloating(handle, tooltip, {
+		placement: props.placement,
+	});
+
+	styles.value = floatingStyles.value;
+	*/
+
+	const { x, y } = await computePosition(handle.value, tooltip.value, {
+		placement: props.placement,
+		middleware: [shift()],
+	});
+
+	position.value.x = x;
+	position.value.y = y;
+
+	console.log(x, y);
+
+	console.log('open!');
+}
+
+function close() {
+	console.log('close!');
+	opened.value = false;
+}
+
+function toggle() {
+	if (opened.value) {
+		close();
+	} else {
+		open();
+	}
+}
+
+onMounted(() => {
+	events.on('blur', close);
+});
+
+onBeforeUnmount(() => {
+	events.off('blur', close);
+});
+</script>
+
+<style>
+.tooltip-layer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 10000;
+}
+
+.tooltip-wrapper {
+	width: max-content;
+	overflow: hidden;
+	box-sizing: border-box;
+	padding: .25rem;
+}
+
+.tooltip {
+	max-height: calc(100vh - .5rem);
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow);
+	overflow: hidden;
+}
+</style>