From 3df6035642a41cf1462ed603763dbddbee145c54 Mon Sep 17 00:00:00 2001
From: Kamil Klecha <urlikodd@gmail.com>
Date: Mon, 18 Oct 2021 20:24:52 +0200
Subject: [PATCH] Improved city card

---
 src/components/City.vue | 44 ++++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/City.vue b/src/components/City.vue
index 170ce1e..cf73624 100644
--- a/src/components/City.vue
+++ b/src/components/City.vue
@@ -1,22 +1,34 @@
 <template>
   <div>
-    <v-card height="200" width="350" v-if="data !== undefined">
+    <v-card
+      height="200"
+      width="350"
+      v-if="data !== undefined"
+    >
       <v-list-item three-line>
-      <v-list-item-content>
-        <div class="text-overline">
-          {{ data.name }}, {{ data.sys.country }}
-        </div>
-        <v-list-item-title class="text-h3 font-weight-thin">{{ Math.round(data.main.temp) }} °C</v-list-item-title>
-        <v-list-item-subtitle>{{ data.weather[0].description }}</v-list-item-subtitle>
-      </v-list-item-content>
+        <v-list-item-content>
+          <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{ city.name }}</v-card-title>
+          <v-card-subtitle class="pb-0 px-0">{{ city.country }}</v-card-subtitle>
+          <v-list-item-title class="text-h3 font-weight-thin"
+            >{{ Math.round(data.main.temp) }} °C</v-list-item-title
+          >
+          <v-list-item-subtitle>{{
+            data.weather[0].description
+          }}</v-list-item-subtitle>
+        </v-list-item-content>
 
-      <v-list-item-avatar
-        tile
-        size="80"
-      >
-      <v-img :src="'http://openweathermap.org/img/wn/' + data.weather[0].icon + '@2x.png'" height="75" width="75"></v-img>
-      </v-list-item-avatar>
-    </v-list-item>
+        <v-list-item-avatar tile size="80">
+          <v-img
+            :src="
+              'http://openweathermap.org/img/wn/' +
+              data.weather[0].icon +
+              '@2x.png'
+            "
+            height="75"
+            width="75"
+          ></v-img>
+        </v-list-item-avatar>
+      </v-list-item>
     </v-card>
     <v-skeleton-loader type="card" v-else></v-skeleton-loader>
   </div>
@@ -60,7 +72,7 @@ export default class City extends Vue {
           id: this.city.id,
           units: "metric",
           lang: "pl",
-          appid: process.env.VUE_APP_OWM_API_KEY, 
+          appid: process.env.VUE_APP_OWM_API_KEY,
         },
       })
       .then((res) => {