Skip to content

Commit f453159

Browse files
mugetsumugetsu
committed
Updated style
1 parent dbb4da3 commit f453159

File tree

3 files changed

+262
-91
lines changed

3 files changed

+262
-91
lines changed

‎components/Results/index.vue‎

Lines changed: 51 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,50 @@
11
<template>
22
<div class="results">
3-
<div
4-
v-if="showChart"
5-
class="chart-wrapper">
6-
<client-only>
7-
<LineChart
8-
:chart-data="logarithmicData"
9-
:options="chartOptions" />
10-
</client-only>
11-
</div>
123
<div class="cases-wrapper">
13-
<p
4+
<div
145
v-for="(item, index) in items"
156
:key="index"
167
class="cases">
17-
{{ item.label }}
8+
<div
9+
v-if="item.label === 'Confirmed'"
10+
class="case-icon">
11+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
12+
width="26" height="26"
13+
viewBox="0 0 172 172"
14+
style=" fill:#000000;"><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"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><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"></path></g></g></svg>
15+
</div>
16+
<div
17+
v-if="item.label === 'Recovered'"
18+
class="case-icon">
19+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
20+
width="24" height="24"
21+
viewBox="0 0 172 172"
22+
style=" fill:#000000;"><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"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><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"></path></g></g></svg>
23+
</div>
24+
<div
25+
v-if="item.label === 'Dead'"
26+
class="case-icon">
27+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
28+
width="24" height="24"
29+
viewBox="0 0 172 172"
30+
style=" fill:#000000;"><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"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><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"></path></g></g></svg>
31+
</div>
1832
<AnimatedNumber
1933
v-if="showValue"
20-
:value="item.value"
34+
:value="item.value || 0"
2135
:formatValue="formatNumber"
2236
:duration="duration"
2337
:style="`color: ${item.color}`" />
24-
</p>
38+
</div>
39+
</div>
40+
<div
41+
v-if="showChart"
42+
class="chart-wrapper">
43+
<client-only>
44+
<LineChart
45+
:chart-data="logarithmicData"
46+
:options="chartOptions" />
47+
</client-only>
2548
</div>
2649
</div>
2750
</template>
@@ -95,6 +118,7 @@ export default {
95118
}
96119
}],
97120
yAxes: [{
121+
position: 'right',
98122
ticks: {
99123
type: 'logarithmic',
100124
fontColor: '#ffffff'
@@ -116,34 +140,27 @@ export default {
116140
<style lang="scss" scoped>
117141
.results {
118142
143+
.cases-wrapper,
119144
.chart-wrapper {
120145
position: relative;
146+
display: block;
147+
margin-bottom: 12px;
148+
}
149+
150+
.cases {
121151
display: inline-block;
122-
margin-bottom: 24px;
123-
width: 100%;
124152
vertical-align: top;
153+
margin-left: 24px;
125154
126-
@media only screen and (min-width: 768px) {
127-
margin-right: 24px;
128-
width: 50%;
129-
130-
& ~ .cases-wrapper {
131-
display: inline-block;
132-
margin-top: 0;
133-
vertical-align: top;
134-
}
155+
&:first-child {
156+
margin-left: 0;
135157
}
136-
}
137158
138-
.cases-wrapper {
139-
margin-top: 16px;
140-
141-
.cases {
142-
margin-bottom: 12px;
143-
144-
span {
145-
font-weight: 700;
146-
}
159+
.case-icon {
160+
display: inline-block;
161+
vertical-align: top;
162+
width: 24px;
163+
height: 24px;
147164
}
148165
}
149166
}

‎components/Search/index.vue‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
<div
4141
v-if="hasSelected && hasSearched && !isEmpty(country_case)"
4242
class="search-results">
43-
<p>Cases <span>({{ country_case.last_update }})</span></p>
43+
<p>Cases</p>
44+
<span>last update {{ country_case.last_update }}</span>
4445
<Results
4546
:items="results"
4647
:duration="duration"
@@ -115,17 +116,17 @@ export default {
115116
const cases = this.country_case
116117
return [
117118
{
118-
label: 'Confirmed / ',
119+
label: 'Confirmed',
119120
value: cases.confirmed_count,
120121
color: '#ffa500'
121122
},
122123
{
123-
label: 'Recovered / ',
124+
label: 'Recovered',
124125
value: cases.recovered_count,
125126
color: '#66a266'
126127
},
127128
{
128-
label: 'Deaths / ',
129+
label: 'Dead',
129130
value: cases.dead_count,
130131
color: '#b20000'
131132
}
@@ -322,24 +323,30 @@ export default {
322323
}
323324
324325
.search-results {
325-
font-size: 24px;
326+
text-align: right;
327+
328+
@media only screen and (min-width: 768px) {
329+
margin: 0 auto;
330+
max-width: 512px;
331+
text-align: center;
332+
}
326333
327-
& > p{
328-
display: table;
334+
& > p {
329335
margin-top: 24px;
330-
margin-bottom: 12px;
336+
margin-bottom: 6px;
331337
font-weight: 700;
338+
font-size: 32px;
332339
letter-spacing: 1px;
333340
color: #ffffff;
334341
text-transform: uppercase;
342+
width: 100%;
343+
}
335344
336-
span {
337-
display: table-cell;
338-
padding-left: 8px;
339-
font-size: 16px;
340-
color: #f2f2f2;
341-
vertical-align: middle;
342-
}
345+
& > span {
346+
display: block;
347+
margin-bottom: 12px;
348+
font-size: 16px;
349+
color: #dddddd;
343350
}
344351
}
345352
}

0 commit comments

Comments
 (0)