Skip to content

Commit 7755927

Browse files
author
aafomin
committed
fix weather style
1 parent 36f4872 commit 7755927

File tree

4 files changed

+52
-66
lines changed

4 files changed

+52
-66
lines changed

‎src/components/Weather/card-detail.vue‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
<v-layout column class="detail">
33
<div class="detail__date">{{ cityItem.date }}</div>
44
<div
5-
class="detail__day_icon"
5+
class="detail__day-icon"
66
:style="{backgroundImage: `url(${require(`@/assets/weather-icons/${cityItem.dayIcon}.png`)})`}"
77
></div>
8-
<div class="detail__day_temp">Днём:</div>
9-
<div class="detail__day_temp_value">{{ cityItem.tempDay }}</div>
8+
<div class="detail__day-temp">Днём:</div>
9+
<div class="detail__day-value">{{ cityItem.tempDay }}</div>
1010
<div
11-
class="detail__night_icon"
11+
class="detail__night-icon"
1212
:style="{backgroundImage: `url(${require(`@/assets/weather-icons/${cityItem.nightIcon}.png`)})`}"
1313
></div>
14-
<div class="detail__night_temp">Ночью:</div>
15-
<div class="detail__night_temp_value">{{ cityItem.tempNight }}</div>
16-
<div class="detail__day_text">{{ cityItem.dayIconText }}</div>
14+
<div class="detail__night-temp">Ночью:</div>
15+
<div class="detail__night-value">{{ cityItem.tempNight }}</div>
16+
<div class="detail__text">{{ cityItem.dayIconText }}</div>
1717
</v-layout>
1818
</template>
1919
<script>
@@ -29,19 +29,14 @@ export default {
2929
required: true
3030
}
3131
},
32-
data: () => ({}),
33-
computed: {},
34-
created() {},
35-
mounted() {},
36-
methods: {}
3732
};
3833
</script>
3934
<style lang="scss" scoped>
4035
.detail {
36+
margin: 5px;
4137
width: 90px;
4238
height: 250px;
4339
min-height: 240px;
44-
margin: 5px;
4540
border-radius: 1em;
4641
text-align: center;
4742
&:hover {
@@ -50,44 +45,44 @@ export default {
5045
.detail__date {
5146
color: white;
5247
}
53-
.detail__day_icon {
48+
.detail__day-icon {
5449
width: 80px;
5550
height: 50px;
5651
min-height: 50px;
5752
background-size: contain;
5853
background-position: center;
5954
background-repeat: no-repeat;
6055
}
61-
.detail__day_temp {
56+
.detail__day-temp {
6257
color: lightgray;
6358
}
64-
.detail__day_temp_value {
59+
.detail__day-value {
60+
color: white;
6561
font-weight: 400;
6662
font-size: 1.5rem;
67-
color: white;
63+
6864
}
69-
.detail__night_icon {
65+
.detail__night-icon {
7066
width: 80px;
7167
height: 50px;
7268
min-height: 50px;
7369
background-size: contain;
7470
background-position: center;
7571
background-repeat: no-repeat;
7672
}
77-
.detail__night_temp {
73+
.detail__night-temp {
7874
color: lightgray;
7975
}
80-
.detail__night_temp_value {
81-
font-weight: 400;
82-
font-size: 1rem;
76+
.detail__night-value {
8377
color: white;
78+
font-size: 1rem;
79+
font-weight: 400;
8480
}
85-
.detail__day_text {
81+
.detail__text {
8682
font-size: 0.75rem;
87-
// overflow-wrap: break-word;
8883
word-break: normal;
89-
white-space: normal;
9084
color: lightgray;
85+
white-space: normal;
9186
}
9287
}
9388
@media screen and (max-width: 800px) {
@@ -97,19 +92,17 @@ export default {
9792
color: white;
9893
font-size: 3vw;
9994
}
100-
.detail__day_icon {
95+
.detail__day-icon {
10196
width: 15vw;
10297
}
103-
.detail__day_temp {
104-
}
105-
.detail__day_temp_value {
98+
.detail__day-value {
10699
font-size: 1.25rem;
107100
}
108-
.detail__night_icon {
101+
.detail__night-icon {
109102
width: 15vw;
110103
display: none;
111104
}
112-
.detail__day_text {
105+
.detail__text {
113106
word-break: break-all;
114107
font-size: 3vw;
115108
}

‎src/components/Weather/card-weather.vue‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,44 @@
66
:style="{backgroundImage:`url(${require(`@/assets/weather-icons/${dayTime}.jpg`)})`}"
77
>
88
<v-layout column class="card__title">
9-
<div class="card__title_time text-md-center">{{city.time}}</div>
10-
<div class="card__title_location text-md-center">{{city.country}}, {{city.city}}</div>
9+
<div class="title__time text-md-center">{{city.time}}</div>
10+
<div class="title__location text-md-center">{{city.country}}, {{city.city}}</div>
1111
</v-layout>
1212
<v-layout row class="card__center" align-center>
1313
<v-flex xs4>
14-
<p class="card__center_temp text-md-center">{{city.temp}}</p>
15-
<div class="text-md-center card__center_tempreal_text">
14+
<p class="center__temp text-md-center">{{city.temp}}</p>
15+
<div class="center__tempreal-text text-md-center">
1616
Ощущается как:
17-
<span class="card__center_tempreal">{{city.realFeelTemperature}}</span>
17+
<span class="center__tempreal">{{city.realFeelTemperature}}</span>
1818
</div>
19-
<div class="card__center_pressure text-md-center">{{city.pressure}}</div>
19+
<div class="center__pressure text-md-center">{{city.pressure}}</div>
2020
</v-flex>
2121
<v-flex xs4>
2222
<div
2323
v-show="city.WeatherIcon"
24-
class="card__center_icon"
24+
class="center__icon"
2525
:style="{backgroundImage: `url(${require(`@/assets/weather-icons/${city.WeatherIcon}.png`)})`}"
2626
></div>
2727
</v-flex>
28-
<v-flex xs4 class="card__center_wind">
28+
<v-flex xs4 class="center__wind">
2929
<div class="text-md-center">
3030
Направление ветра:
31-
<span class="card__center_wind_direct">{{city.windDirect}}</span>
31+
<span class="center__wind-direct">{{city.windDirect}}</span>
3232
</div>
3333
<div class="text-md-center">
3434
Скорость ветра:
35-
<span class="card__center_wind_speed">{{city.windSpeed}}</span>
35+
<span class="center__wind-speed">{{city.windSpeed}}</span>
3636
</div>
3737
</v-flex>
3838
</v-layout>
3939
<v-layout row class="card__footer">
4040
<v-btn flat small color="white" @click="saveToLS" v-if="!save">Сохранить</v-btn>
4141
<v-btn flat small color="white" @click="deleteToLS" v-if="save">Удалить</v-btn>
42-
<v-flex xs12 offset-sm1 class="card__footer_text">
42+
<v-flex xs12 offset-sm1 class="card__footer-text">
4343
<div>{{city.weatherText}}</div>
4444
<div>Видимость {{city.visibility}}</div>
4545
</v-flex>
46-
<v-btn flat small color="white" class="card__footer_more" @click="GetWeatherForecast">5 дней</v-btn>
46+
<v-btn flat small color="white" class="card__footer-more" @click="GetWeatherForecast">5 дней</v-btn>
4747
</v-layout>
4848
</v-layout>
4949
<transition name="fade" mode="out-in">
@@ -132,51 +132,49 @@ export default {
132132
font-weight: 400;
133133
text-align: center;
134134
font-size: 1.125rem;
135-
.card__title_time {
135+
.title__time {
136136
color: wheat;
137137
font-size: 1rem;
138138
font-weight: 200;
139139
}
140-
// .card__title_location {
141-
// }
142140
}
143141
.card__center {
144-
.card__center_temp {
142+
.center__temp {
145143
font-weight: 400;
146144
line-height: 2rem;
147145
font-size: 2.125rem;
148146
color: whitesmoke;
149147
}
150-
.card__center_tempreal_text {
148+
.center__tempreal-text {
151149
color: lightgray;
152-
.card__center_tempreal {
150+
.center_tempreal {
153151
color: white;
154152
font-weight: 400;
155153
font-size: 1.125rem;
156154
line-height: 1.5rem;
157155
}
158156
}
159-
.card__center_pressure {
157+
.center__pressure {
160158
color: lightgray;
161159
}
162-
.card__center_icon {
160+
.center__icon {
163161
width: 190px;
164162
height: 135px;
165163
background-size: contain;
166164
background-position: top;
167165
background-repeat: no-repeat;
168166
}
169-
.card__center_wind {
167+
.center__wind {
170168
color: lightgray;
171-
.card__center_wind_speed,
172-
.card__center_wind_direct {
169+
.center__wind-speed,
170+
.center__wind-direct {
173171
color: white;
174172
}
175173
}
176174
}
177175
.card__footer {
178176
color: lightgray;
179-
.card__footer_text {
177+
.card__footer-text {
180178
text-align: center;
181179
}
182180
}
@@ -208,7 +206,7 @@ export default {
208206
margin: auto;
209207
.card__center {
210208
font-size: 0.75rem;
211-
.card__center_icon {
209+
.center__icon {
212210
width: 32vw;
213211
height: 20vh;
214212
background-position: center;
@@ -218,7 +216,7 @@ export default {
218216
display: flex;
219217
justify-content: space-around;
220218
align-items: center;
221-
.card__footer_text {
219+
.card__footer-text {
222220
font-size: 0.75rem;
223221
text-align: center;
224222
background-size: cover;

‎src/components/Weather/search-list.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<v-expand-transition>
3-
<v-list class="lighten-3 weather__searchList">
3+
<v-list class="lighten-3 search-list">
44
<v-list-tile v-for="(item, i) in items" :key="i">
5-
<v-list-tile-content class="weather__searchList_item" @click="selectItem(item)">
5+
<v-list-tile-content class="search-list__item" @click="selectItem(item)">
66
<v-list-tile-title v-text="item.city"></v-list-tile-title>
77
<v-list-tile-sub-title v-text="item.country"></v-list-tile-sub-title>
88
<v-divider inset></v-divider>
@@ -21,10 +21,6 @@ export default {
2121
required: true
2222
}
2323
},
24-
data: () => ({}),
25-
computed: {},
26-
created() {},
27-
mounted() {},
2824
methods: {
2925
selectItem(item) {
3026
this.$emit('selectItem', item)
@@ -33,7 +29,7 @@ export default {
3329
};
3430
</script>
3531
<style lang="scss" scoped>
36-
.weather__searchList {
32+
.search-list {
3733
cursor: pointer;
3834
position: absolute;
3935
max-height: 55vh;
@@ -43,7 +39,7 @@ export default {
4339
z-index: 1;
4440
}
4541
@media screen and (max-width: 800px) {
46-
.weather__searchList {
42+
.search-list {
4743
width: 55%;
4844
}
4945

‎src/components/Weather/weather.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export default {
5252
created() {
5353
this.INIT_STATE;
5454
},
55-
mounted() {},
5655
methods: {
5756
searchCity() {
5857
this.SEARCH_CITY;

0 commit comments

Comments
 (0)