Updated Map View

resources/js/Components/FlightsGoneBy/AchievementCard.vue

@@ -50,6 +50,7 @@ const unlocked = computed(() => {
         :class="{ locked: !unlocked && !inProgress }"
         rounded="lg"
         elevation="2"
+        :id = "achievement.internal_name"
     >
         <v-card-text class="cardLayout">
             <div class="achievement-inner">

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -14,7 +14,7 @@
         </div>
         <div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }">
             <button class="map-legend__toggle" @click="legendOpen = !legendOpen">
-                <span class="mdi mdi-map-legend" />
+                <span class="mdi mdi-format-list-bulleted" />
                 <span class="map-legend__toggle-label">Legend</span>
                 <span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" />
             </button>
@@ -894,14 +894,14 @@ export default defineComponent({
     display:        flex;
     flex-direction: column;
     gap:            6px;
-    padding:        0 10px 10px;
+    padding:        0 10px 0;
     max-height:     0;
     overflow:       hidden;
     transition:     max-height 0.2s ease, padding 0.2s ease;
 }
 .map-legend--open .map-legend__body {
     max-height: 200px;
-    padding-top: 2px;
+    padding: 2px 10px 10px;
 }
 
 .map-legend__row {

resources/js/Components/FlightsGoneBy/FlightToolTip.vue

@@ -9,6 +9,7 @@ import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
 import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
 import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
 import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
+import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
 
 defineProps<{
     flight: Flight
@@ -23,6 +24,7 @@ defineProps<{
             </div>
         </template>
 
+        <template #default="{ isActive }">
             <ToolTipHeader>
             <span class="designator">
                 <AirlineLogo hideTooltip :airline="flight.airline" size="24" />
@@ -36,13 +38,12 @@ defineProps<{
                 <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
             </ToolTipName>
 
-        <ToolTipDivider />
 
-        <ToolTipRows v-if="flight.livery_url">
-            <LiveryImage :flight="flight" />
+            <ToolTipRows  v-if="isActive.value">
+                <FlightMap :flights="[flight]" :showLegend="false" />
             </ToolTipRows>
 
-        <ToolTipDivider v-if="flight.livery_url" />
+            <ToolTipDivider />
 
             <ToolTipRows>
                 <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
@@ -51,6 +52,12 @@ defineProps<{
                 <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
                 <ToolTipRow label="Date" :value="flight.departure_date_display" />
             </ToolTipRows>
+            <ToolTipDivider v-if="flight.livery_url" />
+            <ToolTipRows v-if="flight.livery_url">
+                <LiveryImage :flight="flight" />
+            </ToolTipRows>
+
+        </template>
     </GlassTooltip>
 </template>
 

resources/js/Components/FlightsGoneBy/GlassTooltip.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import {Anchor} from "vuetify";
+import {Ref} from "vue";
 
 defineProps<{
     location?: Anchor;
     openDelay?: number;
 }>();
+
+defineSlots<{
+    activator(props: any): any;
+    default(props: { isActive: Ref<boolean> }): any;
+}>();
 </script>
 
 <template>
@@ -13,9 +19,9 @@ defineProps<{
             <slot name="activator" v-bind="activatorScope" />
         </template>
 
-        <template #default>
+        <template #default="tooltipScope">
             <div class="glass-tooltip glass glass-border">
-                <slot />
+                <slot v-bind="tooltipScope" />
             </div>
         </template>
     </v-tooltip>

resources/js/Pages/Profile/UserAchievement.vue

@@ -70,7 +70,7 @@ const difficultyVariant = computed(() => {
     <ProfileLayout :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
         <Head :title="`${achievement.name}`" />
         <div class="innerLayout">
-            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`"  :href="route('profile.achievements', { user: user.name })" />
+            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`"  :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />
 
 
             <VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">