From c6fe4f9d98a25d434348ffbff6ccc816450ecff5 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Mar 2021 14:24:19 +0200
Subject: [PATCH] / Changed html / data display

---
 components/celestials/CelestialsList.vue |  4 +-
 pages/astres/_slug.vue                   | 76 ++++++++++++------------
 pages/astres/index.vue                   | 18 +++---
 pages/favoris/index.vue                  | 20 ++++---
 4 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/components/celestials/CelestialsList.vue b/components/celestials/CelestialsList.vue
index 01726c5..91ee501 100644
--- a/components/celestials/CelestialsList.vue
+++ b/components/celestials/CelestialsList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="celestial-list-wrapper">
-    <div v-if="celestials != undefined">
-      <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
+    <div v-if="celestials">
+      <celestial-filters v-if="hasFilters && celestials.length > 0" @filter:celestials="filterCelestials" />
 
       <ul v-if="celestials" class="celestial-list grid no-style">
         <li
diff --git a/pages/astres/_slug.vue b/pages/astres/_slug.vue
index b7f5c29..5c4a186 100644
--- a/pages/astres/_slug.vue
+++ b/pages/astres/_slug.vue
@@ -1,42 +1,44 @@
 <template>
   <section class="celestial bg-image">
-    <header>
-      <h1 class="heading-1">
-        <span>{{ celestial.name }}</span>
-        <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
-        <span class="txt-capitalize">- {{ celestial.type }}</span>
-      </h1>
-    </header>
-    <div class="section-content">
-      <main v-if="celestial" class="celestial-body">
-        <div>
-          <h3 class="heading-3">
-            Informations
-          </h3>
-          <p v-if="celestial.aroundPlanet">
-            Orbite autour de
-            <nuxt-link
-              :to="`/astres/${celestial.aroundPlanet.planet}`"
-              class="txt-capitalize"
-            >
-              {{ celestial.aroundPlanet.planet }}
-            </nuxt-link>
-          </p>
-          <p v-if="celestial.discoveredBy">
-            Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
-          </p>
-          <p>Facteur Gravité : {{ celestial.gravity }}</p>
-          <p>Facteur Densité : {{ celestial.density }}</p>
-          <p>Inclinaison : {{ celestial.inclination }}</p>
+    <main v-if="celestial">
+      <header>
+        <h1 class="heading-1">
+          <span>{{ celestial.name }}</span>
+          <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
+          <span class="txt-capitalize">- {{ celestial.type }}</span>
+        </h1>
+      </header>
+      <div class="section-content">
+        <div class="celestial-body">
+          <div>
+            <h3 class="heading-3">
+              Informations
+            </h3>
+            <p v-if="celestial.aroundPlanet">
+              Orbite autour de
+              <nuxt-link
+                :to="`/astres/${celestial.aroundPlanet.planet}`"
+                class="txt-capitalize"
+              >
+                {{ celestial.aroundPlanet.planet }}
+              </nuxt-link>
+            </p>
+            <p v-if="celestial.discoveredBy">
+              Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+            </p>
+            <p>Facteur Gravité : {{ celestial.gravity }}</p>
+            <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>
-        <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>
-      </main>
-    </div>
+      </div>
+    </main>
   </section>
 </template>
 
@@ -49,7 +51,7 @@ export default {
 
   data () {
     return {
-      celestial: {}
+      celestial: false
     }
   },
 
diff --git a/pages/astres/index.vue b/pages/astres/index.vue
index fc66741..09518d6 100644
--- a/pages/astres/index.vue
+++ b/pages/astres/index.vue
@@ -1,13 +1,15 @@
 <template>
   <section class="celestials bg-image">
-    <header>
-      <h1 class="heading-1">
-        Le système solaire
-      </h1>
-    </header>
-    <div class="section-content">
-      <celestials-list :celestials="celestials" />
-    </div>
+    <main>
+      <header>
+        <h1 class="heading-1">
+          Le système solaire
+        </h1>
+      </header>
+      <div class="section-content">
+        <celestials-list :celestials="celestials" />
+      </div>
+    </main>
   </section>
 </template>
 
diff --git a/pages/favoris/index.vue b/pages/favoris/index.vue
index 47d0037..09f6b33 100644
--- a/pages/favoris/index.vue
+++ b/pages/favoris/index.vue
@@ -1,13 +1,15 @@
 <template>
   <section class="favourites bg-image">
-    <header>
-      <h1 class="heading-1">
-        Mes favoris
-      </h1>
-    </header>
-    <div class="section-content">
-      <celestials-list :celestials="favourites" />
-    </div>
+    <main>
+      <header>
+        <h1 class="heading-1">
+          Mes favoris
+        </h1>
+      </header>
+      <div class="section-content">
+        <celestials-list :celestials="favourites" />
+      </div>
+    </main>
   </section>
 </template>
 
@@ -22,7 +24,7 @@ export default {
   },
 
   created () {
-    // const favourites = this.$store.state.user.favourites
+    console.log(this.$store.state.user.favourites)
   }
 }
 </script>