Added Notifications

resources/js/Components/FlightsGoneBy/AchievementCard.vue

@@ -5,6 +5,13 @@ import {computed} from "vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import {Link} from '@inertiajs/vue3'
+import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
+import Distance from "@/Components/Distance.vue";
+
+const distanceAchievements = [
+    'general_flying.circumference_of_the_earth',
+    'general_flying.to_the_moon',
+];
 
 const props = defineProps<{
     achievement: Achievement
@@ -85,13 +92,11 @@ const difficultyVariant = computed(() => {
                     </div>
 
                     <p class="achievement-description">{{ achievement.short_description }}</p>
-                    <Link v-if="achievement.has_page && user" :href="route('profile.achievement', { user: user.name, achievement: achievement.internal_name })">
-                        View Details
-                    </Link>
+
 
                     <template v-if="achievement.progressive && progress">
                         <div class="progress-label">
-                            <span>{{ Math.min(progress.current, progress.threshold) }} / {{ progress.threshold }}</span>
+                            <span><distance :showUnits="false" :value="Math.min(progress.current, progress.threshold)" /> /  <distance  :value="progress.threshold" :showUnits="distanceAchievements.includes(achievement.internal_name)" /></span>
                             <span>{{ progress.percentage }}%</span>
                         </div>
                         <v-progress-linear
@@ -102,11 +107,17 @@ const difficultyVariant = computed(() => {
                             bg-color="rgba(255,255,255,0.1)"
                         />
                     </template>
-
-
                 </div>
+
             </div>
+            <br/>
+            <ButtonLink
+                variant="outlined"
+                label="View Details"
+                icon="mdi-magnify"
+                v-if="achievement.has_page && user" :href="route('profile.achievement', { user: user.name, achievement: achievement.internal_name })" />
         </v-card-text>
+
     </v-card>
 </template>
 
@@ -115,19 +126,17 @@ const difficultyVariant = computed(() => {
     transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
-.achievement-card.locked {
+.achievement-card.locked .achievement-inner {
     opacity: 0.45;
 }
 
-.achievement-card:hover {
-    opacity: 1;
-    transform: translateY(-1px);
-}
 
+.achievement-card:hover .achievement-inner,
 .achievement-inner {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
+    opacity: 1;
 }
 
 .achievement-icon-wrap {