From 51dffd48dc55eb8bf50e5eee99384d0e04ce3be3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Mar 2021 14:16:36 +0200
Subject: [PATCH] / Refactored btn component / icons and revamped list layout

---
 components/atoms/FSButton.vue                 | 39 ++++++++++++
 components/celestials/CelestialCardIcon.vue   | 10 ++--
 components/celestials/CelestialFilters.vue    | 59 ++++++++-----------
 components/celestials/CelestialsList.vue      |  7 ++-
 ...rs-in-a-cloud-white.svg => moon-white.svg} |  0
 ...moon-and-stars-in-a-cloud.svg => moon.svg} |  0
 ...anets-white.svg => planet-moons-white.svg} |  0
 ...and-other-planets.svg => planet-moons.svg} |  0
 ...lanet-shape-white.svg => planet-white.svg} |  0
 .../{saturn-planet-shape.svg => planet.svg}   |  0
 ...{stars-group-white.svg => stars-white.svg} |  0
 static/icons/{stars-group.svg => stars.svg}   |  0
 .../{sun-shape-white.svg => sun-white.svg}    |  0
 static/icons/{sun-shape.svg => sun.svg}       |  0
 14 files changed, 71 insertions(+), 44 deletions(-)
 rename static/icons/{moon-and-stars-in-a-cloud-white.svg => moon-white.svg} (100%)
 rename static/icons/{moon-and-stars-in-a-cloud.svg => moon.svg} (100%)
 rename static/icons/{saturn-and-other-planets-white.svg => planet-moons-white.svg} (100%)
 rename static/icons/{saturn-and-other-planets.svg => planet-moons.svg} (100%)
 rename static/icons/{saturn-planet-shape-white.svg => planet-white.svg} (100%)
 rename static/icons/{saturn-planet-shape.svg => planet.svg} (100%)
 rename static/icons/{stars-group-white.svg => stars-white.svg} (100%)
 rename static/icons/{stars-group.svg => stars.svg} (100%)
 rename static/icons/{sun-shape-white.svg => sun-white.svg} (100%)
 rename static/icons/{sun-shape.svg => sun.svg} (100%)

diff --git a/components/atoms/FSButton.vue b/components/atoms/FSButton.vue
index e69de29..c706754 100644
--- a/components/atoms/FSButton.vue
+++ b/components/atoms/FSButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <button
+    class="btn btn-primary"
+    :class="[
+      icon ? 'btn-icon' : ''
+    ]"
+  >
+    <slot />
+    <span v-if="icon">
+      <img
+        :src="
+          white ? `/icons/${icon}.svg` : `/icons/${icon}-white.svg`
+        "
+        alt=""
+        class="fs-icon icon-sm"
+      >
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'FSButton',
+  props: {
+    icon: {
+      type: String,
+      default: () => { return '' }
+    },
+    white: {
+      type: Boolean,
+      default: () => { return false }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/components/celestials/CelestialCardIcon.vue b/components/celestials/CelestialCardIcon.vue
index 1f98f90..92a15a4 100644
--- a/components/celestials/CelestialCardIcon.vue
+++ b/components/celestials/CelestialCardIcon.vue
@@ -2,31 +2,31 @@
   <div class="card-icon">
     <img
       v-if="type === 'planète à lunes'"
-      src="/icons/saturn-and-other-planets.svg"
+      src="/icons/planet-moons.svg"
       class="fs-icon"
       alt="planet icon"
     >
     <img
       v-else-if="type === 'planète'"
-      src="/icons/saturn-planet-shape.svg"
+      src="/icons/planet.svg"
       class="fs-icon"
       alt="planet icon"
     >
     <img
       v-else-if="type === 'lune'"
-      src="/icons/moon-and-stars-in-a-cloud.svg"
+      src="/icons/moon.svg"
       class="fs-icon"
       alt="moon icon"
     >
     <img
       v-else-if="type === 'étoile'"
-      src="/icons/sun-shape.svg"
+      src="/icons/sun.svg"
       class="fs-icon"
       alt="moon icon"
     >
     <img
       v-else
-      src="/icons/stars-group.svg"
+      src="/icons/stars.svg"
       alt="moon icon"
       class="fs-icon"
     >
diff --git a/components/celestials/CelestialFilters.vue b/components/celestials/CelestialFilters.vue
index 5168d94..67f531d 100644
--- a/components/celestials/CelestialFilters.vue
+++ b/components/celestials/CelestialFilters.vue
@@ -2,57 +2,44 @@
   <div class="celestial-filters">
     <ul class="no-style">
       <li>
-        <button
-          class="btn btn-primary"
+        <AtomsFSButton
           :class="[filters.all ? 'active' : '']"
-          @click="emitFilter('all')"
+          @click.native="emitFilter('all')"
         >
           Tous
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.planets ? 'active' : '']"
-          @click="emitFilter('planets')"
+          icon="planet"
+          inverted
+          @click.native="emitFilter('planets')"
         >
           Planètes
-          <img
-            src="icons/saturn-planet-shape-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.moons ? 'active' : '']"
-          @click="emitFilter('moons')"
+          icon="moon"
+          inverted
+          @click.native="emitFilter('moons')"
         >
           Lunes
-          <img
-            src="icons/moon-and-stars-in-a-cloud-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.stars ? 'active' : '']"
-          @click="emitFilter('stars')"
+          icon="sun"
+          inverted
+          @click.native="emitFilter('stars')"
         >
           Etoiles
-          <img src="icons/sun-shape-white.svg" alt="" class="fs-icon icon-sm">
-        </button>
-        <button
-          class="btn btn-primary btn-icon"
+        </AtomsFSButton>
+        <AtomsFSButton
           :class="[filters.others ? 'active' : '']"
-          @click="emitFilter('others')"
+          icon="stars"
+          inverted
+          @click.native="emitFilter('others')"
         >
           Autres
-          <img
-            src="icons/stars-group-white.svg"
-            alt=""
-            class="fs-icon icon-sm"
-          >
-        </button>
+        </AtomsFSButton>
       </li>
     </ul>
   </div>
diff --git a/components/celestials/CelestialsList.vue b/components/celestials/CelestialsList.vue
index 26e17e0..01726c5 100644
--- a/components/celestials/CelestialsList.vue
+++ b/components/celestials/CelestialsList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="celestial-list-wrapper">
-    <div v-if="celestials && celestials.length > 1">
+    <div v-if="celestials != undefined">
       <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
 
       <ul v-if="celestials" class="celestial-list grid no-style">
@@ -84,11 +84,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 .celestial-list {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: stretch;
   flex-flow: row wrap;
   .celestial-item {
-    width: calc(33% - 15px);
+    width: calc(33% - 20px);
+    margin-right: 20px;
     margin-bottom: 20px;
   }
 }
diff --git a/static/icons/moon-and-stars-in-a-cloud-white.svg b/static/icons/moon-white.svg
similarity index 100%
rename from static/icons/moon-and-stars-in-a-cloud-white.svg
rename to static/icons/moon-white.svg
diff --git a/static/icons/moon-and-stars-in-a-cloud.svg b/static/icons/moon.svg
similarity index 100%
rename from static/icons/moon-and-stars-in-a-cloud.svg
rename to static/icons/moon.svg
diff --git a/static/icons/saturn-and-other-planets-white.svg b/static/icons/planet-moons-white.svg
similarity index 100%
rename from static/icons/saturn-and-other-planets-white.svg
rename to static/icons/planet-moons-white.svg
diff --git a/static/icons/saturn-and-other-planets.svg b/static/icons/planet-moons.svg
similarity index 100%
rename from static/icons/saturn-and-other-planets.svg
rename to static/icons/planet-moons.svg
diff --git a/static/icons/saturn-planet-shape-white.svg b/static/icons/planet-white.svg
similarity index 100%
rename from static/icons/saturn-planet-shape-white.svg
rename to static/icons/planet-white.svg
diff --git a/static/icons/saturn-planet-shape.svg b/static/icons/planet.svg
similarity index 100%
rename from static/icons/saturn-planet-shape.svg
rename to static/icons/planet.svg
diff --git a/static/icons/stars-group-white.svg b/static/icons/stars-white.svg
similarity index 100%
rename from static/icons/stars-group-white.svg
rename to static/icons/stars-white.svg
diff --git a/static/icons/stars-group.svg b/static/icons/stars.svg
similarity index 100%
rename from static/icons/stars-group.svg
rename to static/icons/stars.svg
diff --git a/static/icons/sun-shape-white.svg b/static/icons/sun-white.svg
similarity index 100%
rename from static/icons/sun-shape-white.svg
rename to static/icons/sun-white.svg
diff --git a/static/icons/sun-shape.svg b/static/icons/sun.svg
similarity index 100%
rename from static/icons/sun-shape.svg
rename to static/icons/sun.svg