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

44
src/components/City.vue
View File

@@ -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) => {