Updated Map View

2026-06-20 22:21:17 +10:00
parent 6fad966b7e
commit 05ca994253
52 changed files with 2038 additions and 803 deletions
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import Distance from "@/Components/Distance.vue";
+import {DistanceUnit} from "@/Types/types";
+
+defineProps<{
+    primary?: number | null
+    unit?: string
+    upcoming?: number | null
+    upcomingLabel?: string
+    showUpcomingBadge?: boolean
+    sub?: string
+    isDistance?: boolean
+    distanceUnit?: DistanceUnit
+}>()
+</script>
+
+<template>
+    <div class="stat">
+        <template v-if="primary">
+            <div class="stat-primary">
+                <span class="stat-num">
+                    <Distance v-if="isDistance" :unit="distanceUnit" includeSpace :value="primary" />
+                    <template v-else>{{ primary.toLocaleString() }}</template>
+                </span>
+                <span v-if="unit && !isDistance" class="unit">{{ unit }}</span>
+            </div>
+        </template>
+
+        <template v-if="upcoming">
+            <div :class="primary ? 'stat-upcoming' : 'stat-primary'">
+                <span :class="primary ? 'stat-upcoming-num' : 'stat-num'">
+                    <Distance v-if="isDistance" :unit="distanceUnit" includeSpace :value="upcoming" />
+                    <template v-else>{{ upcoming.toLocaleString() }}</template>
+                    {{ ' ' }}<span
+                    v-if="upcomingLabel"
+                    :class="primary ? 'stat-upcoming-lbl' : 'unit'"
+                >{{ upcomingLabel }}</span>
+                </span>
+                <span v-if="!primary && showUpcomingBadge" class="upcoming-badge">upcoming</span>
+            </div>
+            <div v-if="sub && !primary" class="stat-sub">{{ sub }}</div>
+        </template>
+    </div>
+</template>
+
+<style scoped>
+.stat {
+    padding: 18px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.stat-primary {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.stat-num {
+    font-size: 26px;
+    font-weight: 500;
+    color: #e0e6f0;
+    letter-spacing: -0.5px;
+    line-height: 1;
+}
+
+.unit {
+    font-size: 13px;
+    font-weight: 400;
+    color: #3a5566;
+}
+
+.stat-sub {
+    font-size: 11px;
+    color: #334455;
+    margin-top: 1px;
+}
+
+.stat-upcoming {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+    margin-top: 5px;
+    padding-top: 5px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.stat-upcoming-num {
+    font-size: 13px;
+    font-weight: 500;
+    color: #4a8fa8;
+}
+
+.stat-upcoming-lbl {
+    font-size: 12px;
+    color: #335566;
+}
+
+.upcoming-badge {
+    font-size: 10px;
+    font-weight: 500;
+    color: #4a8fa8;
+    background: rgba(74, 143, 168, 0.12);
+    border: 1px solid rgba(74, 143, 168, 0.2);
+    border-radius: 4px;
+    padding: 1px 6px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    align-self: center;
+}
+
+@media (max-width: 1024px) {
+    .stat { padding: 14px 16px; }
+}
+
+@media (max-width: 640px) {
+    .stat { padding: 12px 14px; }
+    .stat-num { font-size: 22px; }
+}
+</style>