Improved city card

src/components/City.vue

@@ -1,20 +1,32 @@
 <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-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 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>