Updated Map View

2026-06-16 11:16:32 +10:00
parent a270913931
commit 3aba428d2a
19 changed files with 790 additions and 654 deletions
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import {Country} from "@/Types/types";
+
+defineProps<{
+    country: Country | null | undefined
+}>()
+</script>
+
+<template>
+    <ToolTipRow label="Country" :value="country?.name ?? null" :countryCode="country?.code" />
+</template>
+
+<style scoped>
+
+</style>
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-divider"></div>
+</template>
+
+<style scoped>
+.tooltip-divider {
+    height: 1px;
+    background: var(--table-border, rgba(255,255,255,0.08));
+}
+</style>
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-header">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+</style>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-name">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-name {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 0.2rem;
+    line-height: 1.3;
+}
+</style>
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+    defineProps<{
+        label: string
+        value: string | null
+        countryCode?: string
+    }>()
+</script>
+
+<template>
+    <div class="tooltip-row">
+        <span class="tooltip-label">{{label}}</span>
+        <span v-if="!countryCode" class="tooltip-value">{{value}}</span>
+        <span v-if="countryCode" class="tooltip-value">
+            <span class="fi" :class="`fi-${countryCode.toLowerCase()}`" /> {{value}}
+        </span>
+    </div>
+</template>
+
+<style scoped>
+    .tooltip-row {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+
+    .tooltip-label {
+        font-family: 'Share Tech Mono', monospace;
+        font-size: 0.6rem;
+        letter-spacing: 0.15em;
+        color: var(--muted, #445566);
+        flex-shrink: 0;
+        text-transform: uppercase;
+    }
+
+    .tooltip-value {
+        font-size: 0.78rem;
+        color: var(--text, #c8cdd8);
+        text-align: right;
+    }
+
+    .fi{
+        font-size: 1rem;
+        padding: 0.25rem;
+    }
+</style>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="tooltip-rows">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.tooltip-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+</style>