vetro/weather-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved city card

Browse Source
This commit is contained in:
Kamil Klecha
2021-10-18 20:24:52 +02:00
parent 761d51ca85
commit 3df6035642
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/City.vue
View File

@@ -1,22 +1,34 @@
<template> <template>
<div> <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 three-line>
<v-list-item-content> <v-list-item-content>
<div class="text-overline"> <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{ city.name }}</v-card-title>
{{ data.name }}, {{ data.sys.country }} <v-card-subtitle class="pb-0 px-0">{{ city.country }}</v-card-subtitle>
</div> <v-list-item-title class="text-h3 font-weight-thin"
<v-list-item-title class="text-h3 font-weight-thin">{{ Math.round(data.main.temp) }} °C</v-list-item-title> >{{ 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-subtitle>{{
data.weather[0].description
}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar <v-list-item-avatar tile size="80">
tile <v-img
size="80" :src="
> 'http://openweathermap.org/img/wn/' +
<v-img :src="'http://openweathermap.org/img/wn/' + data.weather[0].icon + '@2x.png'" height="75" width="75"></v-img> data.weather[0].icon +
</v-list-item-avatar> '@2x.png'
</v-list-item> "
height="75"
width="75"
></v-img>
</v-list-item-avatar>
</v-list-item>
</v-card> </v-card>
<v-skeleton-loader type="card" v-else></v-skeleton-loader> <v-skeleton-loader type="card" v-else></v-skeleton-loader>
</div> </div>