From ee3eca7d8f3a1e11479ced9566aa5669c347e55c Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 3 May 2020 11:17:46 +0200
Subject: [PATCH] refact meteo with tailwindcss

---
 resources/js/views/Meteo/OpenWeatherCard.vue | 32 ++++++++++++--------
 resources/sass/app.scss                      |  1 +
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/resources/js/views/Meteo/OpenWeatherCard.vue b/resources/js/views/Meteo/OpenWeatherCard.vue
index 1d61fd6..5a2912d 100644
--- a/resources/js/views/Meteo/OpenWeatherCard.vue
+++ b/resources/js/views/Meteo/OpenWeatherCard.vue
@@ -2,21 +2,27 @@
     <div class="my-2">
         <h2>Météo</h2>
         <p v-if="loading"></p>
-        <div v-else class="meteo card my-1">
-            <h3>{{ meteo.city.name }}</h3>
-            <div class="flex flex-end">
-                <div class="flex-1 flex-col flex-end">
-                    <div class="meteo-date">{{ dateFormat(meteo.list[0].dt_txt) }}</div>
-                    <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
-                    <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
-                    <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
-                </div>
-                <div class="flex-1 text-right">
-                    <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
-                    <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
+        <div v-else class="my-1">
+
+            <div class="flex flex-wrap -m-2 mt-2">
+                <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+                    <div class="bg-orange-300 rounded text-black m-2 p-2 flex flex-col">
+                        <h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
+                        <div class="flex">
+                            <div class="flex flex-col justify-end">
+                                <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
+                                <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
+                                <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
+                                <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
+                            </div>
+                            <div class="flex flex-col flex-1 justify-end items-end">
+                                <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
+                                <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-
         </div>
     </div>
 </template>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 0f0ded1..8e1625d 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -7,6 +7,7 @@
 @import "components/btn";
 @import "components/nav";
 @import "components/transitions";
+@import "components/owfont-regular";
 
 @import "pages/memos";