Added Notifications

resources/js/Components/FlightsGoneBy/AchievementCard.vue

@@ -11,6 +11,7 @@ import Distance from "@/Components/Distance.vue";
 const distanceAchievements = [
     'general_flying.circumference_of_the_earth',
     'general_flying.to_the_moon',
+    'general_flying.gigametre'
 ];
 
 const props = defineProps<{
@@ -29,6 +30,10 @@ const progress = computed(() => {
     }
 })
 
+const inProgress = computed(() =>
+    !unlocked.value && (props.userAchievement?.progress ?? 0) > 0
+)
+
 const unlocked = computed(() => {
     if (!props.userAchievement) return false
     if (props.achievement.progressive) return (progress.value?.percentage ?? 0) >= 100
@@ -52,11 +57,11 @@ const difficultyVariant = computed(() => {
 <template>
     <v-card
         class="achievement-card"
-        :class="{ locked: !unlocked }"
+        :class="{ locked: !unlocked && !inProgress }"
         rounded="lg"
         elevation="2"
     >
-        <v-card-text>
+        <v-card-text class="cardLayout">
             <div class="achievement-inner">
                 <div class="achievement-icon-wrap" :class="{ unlocked }">
                     <v-icon
@@ -110,7 +115,7 @@ const difficultyVariant = computed(() => {
                 </div>
 
             </div>
-            <br/>
+            <div class="button-spacer" />
             <ButtonLink
                 variant="outlined"
                 label="View Details"
@@ -122,15 +127,27 @@ const difficultyVariant = computed(() => {
 </template>
 
 <style scoped>
+.cardLayout {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    gap: 0.75rem;
+}
+
 .achievement-card {
     transition: opacity 0.2s ease, transform 0.2s ease;
+    border-radius: 0;
+}
+
+.button-spacer {
+    flex: 1;
 }
 
 .achievement-card.locked .achievement-inner {
     opacity: 0.45;
 }
 
-
 .achievement-card:hover .achievement-inner,
 .achievement-inner {
     display: flex;