Skip to content

Commit 9dbd719

Browse files
mugetsumugetsu
committed
Fix styles
1 parent 28a8a3a commit 9dbd719

File tree

8 files changed

+88
-39
lines changed

8 files changed

+88
-39
lines changed

‎components/Map/index.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ export default {
5656
'circle-color': [
5757
'step',
5858
['get', 'point_count'],
59-
'#ffdb99',
59+
'#ffedcc',
6060
2,
61-
'#ffc04c',
61+
'#ffc966',
6262
4,
6363
'#ffa500'
6464
],
@@ -92,10 +92,10 @@ export default {
9292
source: 'covid',
9393
filter: ['!', ['has', 'point_count']],
9494
paint: {
95-
'circle-color': '#ffa500',
95+
'circle-color': '#ffe4b2',
9696
'circle-radius': 7,
9797
'circle-stroke-width': 1,
98-
'circle-stroke-color': '#ffa500'
98+
'circle-stroke-color': '#ffe4b2'
9999
}
100100
})
101101
}
@@ -144,7 +144,7 @@ export default {
144144
.setLngLat(coordinates)
145145
.setHTML(`
146146
<div class="popup">
147-
<p class="popup_title">Case / ${title}</p>
147+
<p class="popup_title">${title}</p>
148148
<div class="popup_item item_confirmed">
149149
<span>Confirmed</span>
150150
<span>${cc}</span>
@@ -190,8 +190,16 @@ export default {
190190
}
191191
192192
/deep/ .popup {
193+
margin: 0 16px 0 8px;
194+
&_title {
195+
margin-top: 4px;
196+
margin-bottom: 8px;
197+
font-size: 16px;
198+
}
193199
&_item {
194200
span {
201+
font-weight: 700;
202+
font-size: 14px;
195203
&:first-child {
196204
font-weight: 300;
197205
}

‎components/Search/index.vue‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
:class="{
2323
'is-show': hasSelected && provinces && provinces.length
2424
}">
25-
<select ref="provinces">
25+
<select
26+
ref="provinces"
27+
@change="onChange">
2628
<option
2729
label="Province"
2830
value=""
@@ -50,7 +52,7 @@
5052
</li>
5153
</ul>
5254
<div
53-
v-if="hasSelected && country_case.length"
55+
v-if="hasSelected && hasSearched && country_case.length"
5456
class="search-results">
5557
<p class="">Cases</p>
5658
<Results
@@ -136,6 +138,7 @@ export default {
136138
provinces: [],
137139
tempValue: null,
138140
hasSelected: false,
141+
hasSearched: false,
139142
duration: 1000
140143
}
141144
},
@@ -145,14 +148,15 @@ export default {
145148
this.tempValue = this.country
146149
this.open = false
147150
this.hasSelected = true
148-
this.$nextTick(_ => {
149-
if (this.$refs.provinces) this.$refs.provinces.focus()
150-
})
151+
this.hasSearched = false
151152
this.$gtag('event', 'enter', {
152153
event_category: 'input',
153154
event_label: 'input enter',
154155
value: this.country
155156
})
157+
this.$nextTick(_ => {
158+
if (this.$refs.provinces) this.$refs.provinces.focus()
159+
})
156160
},
157161
up() {
158162
if (this.current > 0) this.current--
@@ -173,13 +177,15 @@ export default {
173177
if (this.tempValue === null) {
174178
this.provinces = []
175179
this.hasSelected = false
180+
this.hasSearched = false
176181
}
177182
},
178183
suggestionClick(index) {
179184
this.setSelection = this.matches[index]
180185
this.tempValue = this.country
181186
this.open = false
182187
this.hasSelected = true
188+
this.hasSearched = false
183189
this.$nextTick(_ => {
184190
if (this.$refs.provinces) this.$refs.provinces.focus()
185191
})
@@ -190,15 +196,22 @@ export default {
190196
})
191197
},
192198
onSearch() {
193-
this.$store.dispatch('getCasesByCountry', {
194-
country: this.country,
195-
province: this.$refs.provinces.value
196-
})
197-
this.$gtag('event', 'click', {
198-
event_category: 'search',
199-
event_label: 'search click',
200-
value: `${this.country}${this.$refs.provinces.value ? ', ' + this.$refs.provinces.value : ''}`
201-
})
199+
this.$store
200+
.dispatch('getCasesByCountry', {
201+
country: this.country,
202+
province: this.$refs.provinces.value
203+
})
204+
.then(_ => {
205+
this.hasSearched = true
206+
this.$gtag('event', 'click', {
207+
event_category: 'search',
208+
event_label: 'search click',
209+
value: `${this.country}${this.$refs.provinces.value ? ', ' + this.$refs.provinces.value : ''}`
210+
})
211+
})
212+
},
213+
onChange() {
214+
this.hasSearched = false
202215
}
203216
}
204217
}

‎pages/index.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="covid-map">
88
<Map :data="data" />
99
<p class="reference">
10-
Data Provided by <a href="https://github.com/CSSEGISandData/COVID-19" target="_BLANK">JHU CSSE</a>
10+
Data provided by <a href="https://github.com/CSSEGISandData/COVID-19" target="_BLANK">JHU CSSE</a>
1111
</p>
1212
</div>
1313
<div class="overview">
@@ -58,7 +58,8 @@ export default {
5858
...mapGetters([
5959
'data',
6060
'latest',
61-
'countries'
61+
'countries',
62+
'last_updated'
6263
]),
6364
results() {
6465
return [
@@ -142,6 +143,7 @@ export default {
142143
padding: 8px;
143144
font-size: 10px;
144145
font-weight: 300;
146+
text-align: right;
145147
text-transform: uppercase;
146148
color: #ffffff;
147149
@@ -150,6 +152,10 @@ export default {
150152
text-decoration: none;
151153
color: #ffffff;
152154
}
155+
156+
span {
157+
display: block;
158+
}
153159
}
154160
}
155161

‎static/data.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎store/actions.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default {
22
async nuxtServerInit({ commit }, ctx) {
33
await this.$axios.get(
4-
process.env.NODE_ENV !== 'production' ? 'covid.json' : '/all'
4+
process.env.NODE_ENV !== 'production' ? 'data.json' : '/all'
55
)
66
.then(res => {
77
if (res.status === 200) {
@@ -12,6 +12,7 @@ export default {
1212
commit('SET_DATA', res.data)
1313
commit('SET_LATEST', latest)
1414
commit('SET_COUNTRIES', confirmed)
15+
commit('SET_LAST_UPDATED', confirmed.last_updated)
1516
}
1617
})
1718
.catch(err => {

‎store/getters.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export default {
22
data: state => state.data,
33
latest: state => state.latest,
44
countries: state => state.countries,
5-
country_case: state => state.country_case
5+
country_case: state => state.country_case,
6+
last_updated: state => state.last_updated
67
}

‎store/mutations.js‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,27 @@ export default {
2222
) {
2323
dead_count = dead_locations.latest
2424
}
25-
dataCollection.features.push({
26-
type: 'Feature',
27-
properties: {
28-
country: location.country,
29-
country_code: location.country_code,
30-
confirmed_count: location.latest,
31-
recovered_count: recovered_count,
32-
dead_count: dead_count,
33-
province: location.province
34-
},
35-
geometry: {
36-
type: 'Point',
37-
coordinates: [ location.coordinates.long, location.coordinates.lat ]
38-
}
39-
})
25+
if (
26+
location.latest
27+
|| recovered_count
28+
|| dead_count
29+
) {
30+
dataCollection.features.push({
31+
type: 'Feature',
32+
properties: {
33+
country: location.country,
34+
country_code: location.country_code,
35+
confirmed_count: location.latest,
36+
recovered_count: recovered_count,
37+
dead_count: dead_count,
38+
province: location.province
39+
},
40+
geometry: {
41+
type: 'Point',
42+
coordinates: [ location.coordinates.long, location.coordinates.lat ]
43+
}
44+
})
45+
}
4046
})
4147
state.data = dataCollection
4248
},
@@ -54,5 +60,17 @@ export default {
5460
},
5561
SET_COUNTRY_CASE: (state, country_case) => {
5662
state.country_case = country_case
63+
},
64+
SET_LAST_UPDATED: (state, last_updated) => {
65+
const options = {
66+
weekday: 'long',
67+
year: 'numeric',
68+
month: 'long',
69+
day: 'numeric',
70+
hour: '2-digit',
71+
minute: '2-digit'
72+
}
73+
const d = new Date(last_updated)
74+
state.last_updated = d.toLocaleDateString('en-US', options)
5775
}
5876
}

‎store/state.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export default () => ({
22
data: {},
33
latest: {},
44
countries: [],
5-
country_case: []
5+
country_case: [],
6+
last_updated: ''
67
})

0 commit comments

Comments
 (0)