From 03c7328bfbcf75f806d9729d5d16034ea2f9b881 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Mar 2021 15:15:50 +0200
Subject: [PATCH] + Added link to toast card

---
 assets/scss/_global.scss                |  7 +++++++
 components/celestials/CelestialCard.vue |  8 ++++++++
 components/toast/ToastCard.vue          | 17 +++++++++++++++++
 components/toast/ToastsList.vue         |  5 +++++
 pages/astres/_slug.vue                  | 16 +++++-----------
 5 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
index 77015e3..08f44e5 100644
--- a/assets/scss/_global.scss
+++ b/assets/scss/_global.scss
@@ -63,6 +63,13 @@ a {
     color: inherit;
     text-decoration: none;
   }
+  &.fs-link {
+    color: $primary-xxlight;
+    text-decoration: underline;
+    &:hover {
+      color: $primary-xlight;
+    }
+  }
 }
 
 button {
diff --git a/components/celestials/CelestialCard.vue b/components/celestials/CelestialCard.vue
index cc19086..4db7cfb 100644
--- a/components/celestials/CelestialCard.vue
+++ b/components/celestials/CelestialCard.vue
@@ -91,6 +91,10 @@ export default {
           id: uuidv4(),
           title: 'Favori ajouté',
           message: `${this.celestial.name} a été ajouté à la liste des favoris.`,
+          link: {
+            text: 'Consultez vos favoris.',
+            url: '/favoris'
+          },
           category: 'valid',
           timer: 3
         })
@@ -99,6 +103,10 @@ export default {
           id: uuidv4(),
           title: 'Favori retiré',
           message: `${this.celestial.name} a été retiré de la liste des favoris.`,
+          link: {
+            text: 'Consultez vos favoris.',
+            url: '/favoris'
+          },
           category: 'valid',
           timer: 3
         })
diff --git a/components/toast/ToastCard.vue b/components/toast/ToastCard.vue
index 528b67b..96f6d34 100644
--- a/components/toast/ToastCard.vue
+++ b/components/toast/ToastCard.vue
@@ -6,6 +6,9 @@
     <div class="toast-message">
       <slot name="message" />
     </div>
+    <div class="toast-link">
+      <slot name="link" />
+    </div>
   </div>
 </template>
 
@@ -62,11 +65,23 @@ export default defineComponent({
   animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
     slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
   overflow: hidden;
+
   .toast-title {
     margin-bottom: 5px;
     font-size: 16px;
     font-weight: $fw-bold;
   }
+
+  .toast-link {
+    a {
+      color: $primary-xxlight;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   &:after {
     position: absolute;
     display: block;
@@ -78,6 +93,7 @@ export default defineComponent({
     height: 6px;
     background: rgba($fs-black, 33%);
   }
+
   &.info {
     background-color: $info;
   }
@@ -91,6 +107,7 @@ export default defineComponent({
   &.danger {
     background-color: $danger;
   }
+
   &.closing {
     animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
       slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);
diff --git a/components/toast/ToastsList.vue b/components/toast/ToastsList.vue
index 32a3625..50577de 100644
--- a/components/toast/ToastsList.vue
+++ b/components/toast/ToastsList.vue
@@ -8,6 +8,11 @@
         <template #message>
           {{ toast.message }}
         </template>
+        <template #link>
+          <nuxt-link :to="toast.link.url">
+            {{ toast.link.text }}
+          </nuxt-link>
+        </template>
       </toast-card>
     </div>
   </div>
diff --git a/pages/astres/_slug.vue b/pages/astres/_slug.vue
index 5c4a186..d3349b0 100644
--- a/pages/astres/_slug.vue
+++ b/pages/astres/_slug.vue
@@ -8,6 +8,7 @@
           <span class="txt-capitalize">- {{ celestial.type }}</span>
         </h1>
       </header>
+
       <div class="section-content">
         <div class="celestial-body">
           <div>
@@ -18,11 +19,12 @@
               Orbite autour de
               <nuxt-link
                 :to="`/astres/${celestial.aroundPlanet.planet}`"
-                class="txt-capitalize"
+                class="txt-capitalize fs-link"
               >
                 {{ celestial.aroundPlanet.planet }}
               </nuxt-link>
             </p>
+
             <p v-if="celestial.discoveredBy">
               Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
             </p>
@@ -30,10 +32,12 @@
             <p>Facteur Densité : {{ celestial.density }}</p>
             <p>Inclinaison : {{ celestial.inclination }}</p>
           </div>
+
           <div v-if="celestial.moons" class="celestial-moons">
             <h2 class="heading-2">
               Astres orbitant {{ celestial.name }}
             </h2>
+
             <celestials-list :celestials="celestial.moons" :has-filters="false" />
           </div>
         </div>
@@ -78,15 +82,5 @@ export default {
   &:after {
     background-image: url("/celestials_bg-min.jpg");
   }
-
-  .celestial-body {
-    a {
-      color: $primary-xxlight;
-      text-decoration: underline;
-      &:hover {
-        color: $primary-xlight;
-      }
-    }
-  }
 }
 </style>