Skip to content

Commit 1a23b4c

Browse files
mugetsumugetsu
committed
Updated layout
1 parent 993f222 commit 1a23b4c

File tree

11 files changed

+298
-475
lines changed

11 files changed

+298
-475
lines changed

‎components/Latest/index.vue‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<div class="latest">
3+
<ul>
4+
<li>
5+
<span class="icon icon--confirmed">
6+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0 0 172 172" style=" fill:#000000;" data-v-691393b9=""><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal" data-v-691393b9=""><path d="M0,172v-172h172v172z" fill="none" data-v-691393b9=""></path><g fill="#ffffff" data-v-691393b9=""><path d="M149.28546,31.29387l-11.86117,-8.0625c-3.28185,-2.22236 -7.77825,-1.36959 -9.97476,1.88642l-58.14303,85.74159l-26.71996,-26.71996c-2.79087,-2.79087 -7.33894,-2.79087 -10.12981,0l-10.15565,10.15565c-2.79087,2.79087 -2.79087,7.33894 0,10.15565l41.08774,41.08774c2.29988,2.29988 5.91767,4.05709 9.17368,4.05709c3.25601,0 6.53786,-2.04146 8.65685,-5.11658l69.97837,-103.23618c2.22235,-3.25601 1.36959,-7.72656 -1.91226,-9.94892z" data-v-691393b9=""></path></g></g></svg>
7+
</span>
8+
<span>
9+
<animated-number
10+
:value="latest.confirmed"
11+
:formatValue="formatNumber"
12+
:duration="duration"
13+
/>
14+
</span>
15+
</li>
16+
<li>
17+
<span class="icon icon--deaths">
18+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 172 172" style=" fill:#000000;" data-v-691393b9=""><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal" data-v-691393b9=""><path d="M0,172v-172h172v172z" fill="none" data-v-691393b9=""></path><g fill="#ffffff" data-v-691393b9=""><path d="M86,14.33333c-35.6255,0 -64.5,27.27633 -64.5,60.91667c0,10.01183 2.63017,19.42167 7.16667,27.74933v26.00067h28.66667v28.66667h57.33333v-28.66667h28.66667v-26.00067c4.5365,-8.32767 7.16667,-17.7375 7.16667,-27.74933c0,-33.64033 -28.8745,-60.91667 -64.5,-60.91667zM64.5,114.66667c-7.91917,0 -14.33333,-6.41417 -14.33333,-14.33333c0,-7.91917 6.41417,-14.33333 14.33333,-14.33333c7.91917,0 14.33333,6.41417 14.33333,14.33333c0,7.91917 -6.41417,14.33333 -14.33333,14.33333zM91.73333,136.16667c-3.58333,0 -5.01667,-2.86667 -5.73333,-5.01667c-0.71667,2.15 -2.86667,5.01667 -5.73333,5.01667c-1.43333,0 -3.58333,-1.43333 -3.58333,-3.58333c0,-5.01667 5.73333,-14.33333 9.31667,-15.05c3.58333,0.71667 9.31667,10.03333 9.31667,15.05c0,2.15 -1.43333,3.58333 -3.58333,3.58333zM107.5,114.66667c-7.91917,0 -14.33333,-6.41417 -14.33333,-14.33333c0,-7.91917 6.41417,-14.33333 14.33333,-14.33333c7.91917,0 14.33333,6.41417 14.33333,14.33333c0,7.91917 -6.41417,14.33333 -14.33333,14.33333z" data-v-691393b9=""></path></g></g></svg>
19+
</span>
20+
<span>
21+
<animated-number
22+
:value="latest.deaths"
23+
:formatValue="formatNumber"
24+
:duration="duration"
25+
/>
26+
</span>
27+
</li>
28+
<li>
29+
<span class="icon icon--recovered">
30+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 172 172" style=" fill:#000000;" data-v-691393b9=""><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal" data-v-691393b9=""><path d="M0,172v-172h172v172z" fill="none" data-v-691393b9=""></path><g fill="#ffffff" data-v-691393b9=""><path d="M86,103.30033l-33.7335,-33.7335l10.13367,-10.13367l23.59983,23.59983l54.58133,-54.58133c-6.34967,-4.37883 -14.03233,-6.95167 -22.33133,-6.95167c-20.7475,0 -32.25,14.97833 -32.25,14.97833c0,0 -11.5025,-14.97833 -32.25,-14.97833c-21.77233,0 -39.41667,17.64433 -39.41667,39.41667c0,29.89217 35.20267,58.85983 45.01383,68.01167c11.30183,10.535 26.65283,24.08 26.65283,24.08c0,0 15.351,-13.545 26.65283,-24.08c9.81117,-9.15183 45.01383,-38.1195 45.01383,-68.01167c0,-8.299 -2.57283,-15.98167 -6.95167,-22.33133z" data-v-691393b9=""></path></g></g></svg>
31+
</span>
32+
<span>
33+
<animated-number
34+
:value="latest.recovered"
35+
:formatValue="formatNumber"
36+
:duration="duration"
37+
/>
38+
</span>
39+
</li>
40+
</ul>
41+
</div>
42+
</template>
43+
44+
<script>
45+
import { mapGetters } from 'vuex'
46+
import AnimatedNumber from 'animated-number-vue'
47+
48+
export default {
49+
name: 'Latest',
50+
components: {
51+
AnimatedNumber
52+
},
53+
data() {
54+
return {
55+
duration: 1600
56+
}
57+
},
58+
computed: {
59+
...mapGetters([
60+
'latest'
61+
])
62+
},
63+
methods: {
64+
formatNumber(s) {
65+
return parseFloat(s.toFixed(0)).toLocaleString('en')
66+
}
67+
}
68+
}
69+
</script>
70+
71+
<style lang="scss" scoped>
72+
$color-confirmed: #ffa500;
73+
$color-deaths: #b20000;
74+
$color-recovered: #66a266;
75+
76+
.icon {
77+
display: inline-block;
78+
border-radius: 100%;
79+
width: 32px;
80+
height: 32px;
81+
text-align: center;
82+
83+
svg {
84+
display: inline-block;
85+
width: 24px;
86+
height: 24px;
87+
vertical-align: middle;
88+
}
89+
90+
&--confirmed {
91+
background-color: $color-confirmed;
92+
}
93+
94+
&--deaths {
95+
background-color: $color-deaths;
96+
}
97+
98+
&--recovered {
99+
background-color: $color-recovered;
100+
}
101+
}
102+
103+
.latest {
104+
position: absolute;
105+
top: 0;
106+
z-index: 2;
107+
padding: 24px 0;
108+
font-size: 32px;
109+
color: #ffffff;
110+
width: 100%;
111+
112+
ul {
113+
margin: 0 24px;
114+
padding: 0;
115+
text-align: left;
116+
117+
li {
118+
display: block;
119+
margin-top: 16px;
120+
line-height: 28px;
121+
122+
&:first-child {
123+
margin-top: 0;
124+
}
125+
126+
span {
127+
display: inline-block;
128+
vertical-align: middle;
129+
font-weight: 300;
130+
}
131+
}
132+
}
133+
134+
.reference {
135+
display: inline-block;
136+
margin: 0;
137+
padding: 8px;
138+
font-size: 10px;
139+
font-weight: 300;
140+
text-align: right;
141+
text-transform: uppercase;
142+
color: #ffffff;
143+
144+
a {
145+
font-weight: 400;
146+
text-decoration: none;
147+
color: #ffffff;
148+
}
149+
150+
span {
151+
display: block;
152+
}
153+
}
154+
}
155+
</style>

‎components/Map/index.vue‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@ export default {
1010
props: {
1111
data: Object
1212
},
13-
data() {
14-
return {}
15-
},
1613
methods: {
1714
createMap(token) {
1815
const self = this
@@ -133,7 +130,6 @@ export default {
133130
const cc = e.features[0].properties.confirmed_count
134131
const rc = e.features[0].properties.recovered_count
135132
const dc = e.features[0].properties.dead_count
136-
const last_update = e.features[0].properties.last_update
137133
138134
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
139135
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
@@ -156,7 +152,6 @@ export default {
156152
<span>Dead</span>
157153
<span class="value">${dc}</span>
158154
</div>
159-
<div class="popup_last-update">last update ${last_update}</div>
160155
</div>
161156
`)
162157
.addTo(map)
@@ -190,7 +185,20 @@ export default {
190185
191186
.mapboxgl-ctrl-top-right {
192187
.mapboxgl-ctrl {
193-
margin-top: 26px;
188+
margin-top: 24px;
189+
margin-right: 24px;
190+
}
191+
}
192+
193+
.mapboxgl-ctrl-bottom-left {
194+
.mapboxgl-ctrl {
195+
margin: 0 0 16px 24px;
196+
}
197+
}
198+
199+
.mapboxgl-ctrl-attrib {
200+
&.mapboxgl-compact {
201+
margin: 0 24px 14px 0;
194202
}
195203
}
196204
}
@@ -226,14 +234,5 @@ export default {
226234
}
227235
}
228236
}
229-
&_last-update {
230-
border-top: 1px solid #cccccc;
231-
margin-top: 5px;
232-
padding-top: 5px;
233-
234-
span {
235-
font-weight: 700;
236-
}
237-
}
238237
}
239238
</style>

‎nuxt.config.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,6 @@ module.exports = {
3434
]
3535
},
3636

37-
/*
38-
** Customize the progress-bar color
39-
*/
40-
loading: {
41-
color: '#ffa500',
42-
height: '2px'
43-
},
44-
4537
/*
4638
** Global CSS
4739
*/

0 commit comments

Comments
 (0)