Skip to content

Commit 6cabc27

Browse files
mugetsumugetsu
committed
Styling fixes
1 parent 71e5909 commit 6cabc27

File tree

4 files changed

+65
-42
lines changed

4 files changed

+65
-42
lines changed

‎components/Latest/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ $color-recovered: #66a266;
9393
z-index: 2;
9494
font-size: 24px;
9595
color: #ffffff;
96-
width: 100%;
9796
9897
ul {
9998
margin: 24px;

‎components/Map/index.vue‎

Lines changed: 54 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default {
1616
const mapboxgl = require('mapbox-gl/dist/mapbox-gl')
1717
mapboxgl.accessToken = token
1818
19+
let popup
1920
let totals
2021
let markers = {}
2122
let markersOnScreen = {}
@@ -93,38 +94,15 @@ export default {
9394
})
9495
}
9596
96-
map.on('style.load', function() {
97-
addLayers(map)
98-
})
99-
100-
map.on('click', 'clusters', function(e) {
101-
var features = map.queryRenderedFeatures(e.point, {
102-
layers: ['clusters']
103-
})
104-
var clusterId = features[0].properties.cluster_id
105-
map
106-
.getSource('covid')
107-
.getClusterExpansionZoom(clusterId, function(err, zoom) {
108-
if (err) return
109-
110-
map.easeTo({
111-
center: features[0].geometry.coordinates,
112-
zoom: zoom
113-
})
114-
})
115-
116-
self.$gtag('event', 'click', {
117-
event_category: 'clustered',
118-
event_label: 'clustered click',
119-
value: clusterId
120-
})
121-
})
122-
123-
map.on('click', 'unclustered-point', function(e) {
124-
let coordinates = e.features[0].geometry.coordinates.slice()
97+
const getTitle = e => {
12598
const country = e.features[0].properties.country
12699
const province = e.features[0].properties.province
127100
const title = (province ? `${province}, ` : '') + country
101+
return title
102+
}
103+
104+
const showPopup = (title, e) => {
105+
let coordinates = e.features[0].geometry.coordinates.slice()
128106
const cc = e.features[0].properties.confirmed_count
129107
const rc = e.features[0].properties.recovered_count
130108
const dc = e.features[0].properties.dead_count
@@ -133,7 +111,7 @@ export default {
133111
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
134112
}
135113
136-
new mapboxgl.Popup()
114+
popup = new mapboxgl.Popup()
137115
.setLngLat(coordinates)
138116
.setHTML(`
139117
<div class="popup">
@@ -153,7 +131,36 @@ export default {
153131
</div>
154132
`)
155133
.addTo(map)
156-
134+
}
135+
136+
map.on('style.load', _ => addLayers(map))
137+
138+
map.on('click', 'clusters', e => {
139+
var features = map.queryRenderedFeatures(e.point, {
140+
layers: ['clusters']
141+
})
142+
var clusterId = features[0].properties.cluster_id
143+
map
144+
.getSource('covid')
145+
.getClusterExpansionZoom(clusterId, function(err, zoom) {
146+
if (err) return
147+
148+
map.easeTo({
149+
center: features[0].geometry.coordinates,
150+
zoom: zoom
151+
})
152+
})
153+
154+
self.$gtag('event', 'click', {
155+
event_category: 'clustered',
156+
event_label: 'clustered click',
157+
value: clusterId
158+
})
159+
})
160+
161+
map.on('click', 'unclustered-point', e => {
162+
const title = getTitle(e)
163+
showPopup(title, e)
157164
self.$gtag('event', 'click', {
158165
event_category: 'unclustered',
159166
event_label: 'unclustered click',
@@ -163,8 +170,22 @@ export default {
163170
164171
map.on('mouseenter', 'clusters', _ => map.getCanvas().style.cursor = 'pointer')
165172
map.on('mouseleave', 'clusters', _ => map.getCanvas().style.cursor = '')
166-
map.on('mouseenter', 'unclustered-point', _ => map.getCanvas().style.cursor = 'pointer')
167-
map.on('mouseleave', 'unclustered-point', _ => map.getCanvas().style.cursor = '')
173+
174+
map.on('mouseenter', 'unclustered-point', e => {
175+
const title = getTitle(e)
176+
showPopup(title, e)
177+
map.getCanvas().style.cursor = 'pointer'
178+
self.$gtag('event', 'mouseenter', {
179+
event_category: 'unclustered',
180+
event_label: 'unclustered mouseenter',
181+
value: title
182+
})
183+
})
184+
185+
map.on('mouseleave', 'unclustered-point', _ => {
186+
map.getCanvas().style.cursor = ''
187+
popup.remove()
188+
})
168189
}
169190
},
170191
mounted() {

‎components/Search/index.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ export default {
250250
z-index: 10;
251251
padding: 0;
252252
width: calc(100% - 48px);
253+
height: 52px;
253254
transform: translateX(-50%);
254255
255256
@media only screen and (min-width: 768px) {
@@ -263,12 +264,12 @@ export default {
263264
&.has-province {
264265
265266
.dropdown-menu {
266-
transform: translateY(calc(-100% - 100px));
267+
transform: translateY(calc(-100% - 104px));
267268
}
268269
}
269270
270271
.dropdown-menu {
271-
transform: translateY(calc(-100% - 48px));
272+
transform: translateY(calc(-100% - 52px));
272273
}
273274
}
274275
@@ -281,12 +282,12 @@ export default {
281282
282283
.countries-wrapper {
283284
border-radius: 4px 4px 0 0;
284-
transform: translateY(calc(100% + 2px));
285+
transform: translateY(-100%);
285286
}
286287
287288
.provinces-wrapper {
288289
box-shadow: none;
289-
transform: translateY(2px);
290+
transform: translateY(-200%);
290291
}
291292
292293
button {
@@ -298,13 +299,13 @@ export default {
298299
299300
.countries-wrapper {
300301
border-radius: 4px 4px 0 0;
301-
transform: translateY(2px);
302+
transform: translateY(-200%);
302303
}
303304
304305
.provinces-wrapper {
305306
border-radius: 4px 4px 0 0;
306307
box-shadow: 0px 6px 2px -1px rgba(0, 0, 0, 0.2);
307-
transform: translateY(0);
308+
transform: translateY(-200%);
308309
}
309310
}
310311
@@ -326,6 +327,7 @@ export default {
326327
box-shadow: 0px 6px 2px -1px rgba(0, 0, 0, 0.2);
327328
opacity: 1;
328329
cursor: pointer;
330+
transform: translateY(-200%);
329331
outline: none;
330332
331333
svg {
@@ -389,11 +391,11 @@ export default {
389391
390392
.countries-wrapper {
391393
box-shadow: 0px 6px 2px -1px rgba(0, 0, 0, 0.2);
392-
transform: translateY(calc(200%));
394+
transform: translateY(0);
393395
}
394396
395397
.provinces-wrapper {
396-
transform: translateY(calc(100%));
398+
transform: translateY(-100%);
397399
z-index: 8;
398400
}
399401

‎static/location-16.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"location":{"coordinates":{"latitude":"43","longitude":"12"},"country":"Italy","country_code":"IT","id":16,"last_updated":"2020-03-21T10:48:02.564699Z","latest":{"confirmed":47021,"deaths":4032,"recovered":4440},"province":"","timelines":{"confirmed":{"latest":47021,"timeline":{"2020-01-22T00:00:00Z":0,"2020-01-23T00:00:00Z":0,"2020-01-24T00:00:00Z":0,"2020-01-25T00:00:00Z":0,"2020-01-26T00:00:00Z":0,"2020-01-27T00:00:00Z":0,"2020-01-28T00:00:00Z":0,"2020-01-29T00:00:00Z":0,"2020-01-30T00:00:00Z":0,"2020-01-31T00:00:00Z":2,"2020-02-01T00:00:00Z":2,"2020-02-02T00:00:00Z":2,"2020-02-03T00:00:00Z":2,"2020-02-04T00:00:00Z":2,"2020-02-05T00:00:00Z":2,"2020-02-06T00:00:00Z":2,"2020-02-07T00:00:00Z":3,"2020-02-08T00:00:00Z":3,"2020-02-09T00:00:00Z":3,"2020-02-10T00:00:00Z":3,"2020-02-11T00:00:00Z":3,"2020-02-12T00:00:00Z":3,"2020-02-13T00:00:00Z":3,"2020-02-14T00:00:00Z":3,"2020-02-15T00:00:00Z":3,"2020-02-16T00:00:00Z":3,"2020-02-17T00:00:00Z":3,"2020-02-18T00:00:00Z":3,"2020-02-19T00:00:00Z":3,"2020-02-20T00:00:00Z":3,"2020-02-21T00:00:00Z":20,"2020-02-22T00:00:00Z":62,"2020-02-23T00:00:00Z":155,"2020-02-24T00:00:00Z":229,"2020-02-25T00:00:00Z":322,"2020-02-26T00:00:00Z":453,"2020-02-27T00:00:00Z":655,"2020-02-28T00:00:00Z":888,"2020-02-29T00:00:00Z":1128,"2020-03-01T00:00:00Z":1694,"2020-03-02T00:00:00Z":2036,"2020-03-03T00:00:00Z":2502,"2020-03-04T00:00:00Z":3089,"2020-03-05T00:00:00Z":3858,"2020-03-06T00:00:00Z":4636,"2020-03-07T00:00:00Z":5883,"2020-03-08T00:00:00Z":7375,"2020-03-09T00:00:00Z":9172,"2020-03-10T00:00:00Z":10149,"2020-03-11T00:00:00Z":12462,"2020-03-12T00:00:00Z":12462,"2020-03-13T00:00:00Z":17660,"2020-03-14T00:00:00Z":21157,"2020-03-15T00:00:00Z":24747,"2020-03-16T00:00:00Z":27980,"2020-03-17T00:00:00Z":31506,"2020-03-18T00:00:00Z":35713,"2020-03-19T00:00:00Z":41035,"2020-03-20T00:00:00Z":47021}},"deaths":{"latest":4032,"timeline":{"2020-01-22T00:00:00Z":0,"2020-01-23T00:00:00Z":0,"2020-01-24T00:00:00Z":0,"2020-01-25T00:00:00Z":0,"2020-01-26T00:00:00Z":0,"2020-01-27T00:00:00Z":0,"2020-01-28T00:00:00Z":0,"2020-01-29T00:00:00Z":0,"2020-01-30T00:00:00Z":0,"2020-01-31T00:00:00Z":0,"2020-02-01T00:00:00Z":0,"2020-02-02T00:00:00Z":0,"2020-02-03T00:00:00Z":0,"2020-02-04T00:00:00Z":0,"2020-02-05T00:00:00Z":0,"2020-02-06T00:00:00Z":0,"2020-02-07T00:00:00Z":0,"2020-02-08T00:00:00Z":0,"2020-02-09T00:00:00Z":0,"2020-02-10T00:00:00Z":0,"2020-02-11T00:00:00Z":0,"2020-02-12T00:00:00Z":0,"2020-02-13T00:00:00Z":0,"2020-02-14T00:00:00Z":0,"2020-02-15T00:00:00Z":0,"2020-02-16T00:00:00Z":0,"2020-02-17T00:00:00Z":0,"2020-02-18T00:00:00Z":0,"2020-02-19T00:00:00Z":0,"2020-02-20T00:00:00Z":0,"2020-02-21T00:00:00Z":1,"2020-02-22T00:00:00Z":2,"2020-02-23T00:00:00Z":3,"2020-02-24T00:00:00Z":7,"2020-02-25T00:00:00Z":10,"2020-02-26T00:00:00Z":12,"2020-02-27T00:00:00Z":17,"2020-02-28T00:00:00Z":21,"2020-02-29T00:00:00Z":29,"2020-03-01T00:00:00Z":34,"2020-03-02T00:00:00Z":52,"2020-03-03T00:00:00Z":79,"2020-03-04T00:00:00Z":107,"2020-03-05T00:00:00Z":148,"2020-03-06T00:00:00Z":197,"2020-03-07T00:00:00Z":233,"2020-03-08T00:00:00Z":366,"2020-03-09T00:00:00Z":463,"2020-03-10T00:00:00Z":631,"2020-03-11T00:00:00Z":827,"2020-03-12T00:00:00Z":827,"2020-03-13T00:00:00Z":1266,"2020-03-14T00:00:00Z":1441,"2020-03-15T00:00:00Z":1809,"2020-03-16T00:00:00Z":2158,"2020-03-17T00:00:00Z":2503,"2020-03-18T00:00:00Z":2978,"2020-03-19T00:00:00Z":3405,"2020-03-20T00:00:00Z":4032}},"recovered":{"latest":4440,"timeline":{"2020-01-22T00:00:00Z":0,"2020-01-23T00:00:00Z":0,"2020-01-24T00:00:00Z":0,"2020-01-25T00:00:00Z":0,"2020-01-26T00:00:00Z":0,"2020-01-27T00:00:00Z":0,"2020-01-28T00:00:00Z":0,"2020-01-29T00:00:00Z":0,"2020-01-30T00:00:00Z":0,"2020-01-31T00:00:00Z":0,"2020-02-01T00:00:00Z":0,"2020-02-02T00:00:00Z":0,"2020-02-03T00:00:00Z":0,"2020-02-04T00:00:00Z":0,"2020-02-05T00:00:00Z":0,"2020-02-06T00:00:00Z":0,"2020-02-07T00:00:00Z":0,"2020-02-08T00:00:00Z":0,"2020-02-09T00:00:00Z":0,"2020-02-10T00:00:00Z":0,"2020-02-11T00:00:00Z":0,"2020-02-12T00:00:00Z":0,"2020-02-13T00:00:00Z":0,"2020-02-14T00:00:00Z":0,"2020-02-15T00:00:00Z":0,"2020-02-16T00:00:00Z":0,"2020-02-17T00:00:00Z":0,"2020-02-18T00:00:00Z":0,"2020-02-19T00:00:00Z":0,"2020-02-20T00:00:00Z":0,"2020-02-21T00:00:00Z":0,"2020-02-22T00:00:00Z":1,"2020-02-23T00:00:00Z":2,"2020-02-24T00:00:00Z":1,"2020-02-25T00:00:00Z":1,"2020-02-26T00:00:00Z":3,"2020-02-27T00:00:00Z":45,"2020-02-28T00:00:00Z":46,"2020-02-29T00:00:00Z":46,"2020-03-01T00:00:00Z":83,"2020-03-02T00:00:00Z":149,"2020-03-03T00:00:00Z":160,"2020-03-04T00:00:00Z":276,"2020-03-05T00:00:00Z":414,"2020-03-06T00:00:00Z":523,"2020-03-07T00:00:00Z":589,"2020-03-08T00:00:00Z":622,"2020-03-09T00:00:00Z":724,"2020-03-10T00:00:00Z":724,"2020-03-11T00:00:00Z":1045,"2020-03-12T00:00:00Z":1045,"2020-03-13T00:00:00Z":1439,"2020-03-14T00:00:00Z":1966,"2020-03-15T00:00:00Z":2335,"2020-03-16T00:00:00Z":2749,"2020-03-17T00:00:00Z":2941,"2020-03-18T00:00:00Z":4025,"2020-03-19T00:00:00Z":4440,"2020-03-20T00:00:00Z":4440}}}}}

0 commit comments

Comments
 (0)