Skip to content

Commit 3fd9d0b

Browse files
mugetsumugetsu
committed
Updated Search
1 parent 1a23b4c commit 3fd9d0b

File tree

6 files changed

+94
-176
lines changed

6 files changed

+94
-176
lines changed

‎components/Latest/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ $color-recovered: #66a266;
7979
width: 32px;
8080
height: 32px;
8181
text-align: center;
82+
box-shadow: 0px 4px 2px -1px rgba(0, 0, 0, 0.2);
8283
8384
svg {
8485
display: inline-block;

‎components/Search/index.vue‎

Lines changed: 84 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="search"
44
:class="{
5-
'open': openSuggestion
5+
'is-open': openSuggestion
66
}">
77
<div class="search-container">
88
<div class="countries-wrapper">
@@ -26,7 +26,7 @@
2626
ref="provinces"
2727
@change="onChange">
2828
<option
29-
label="Province"
29+
label="Select State"
3030
value=""
3131
selected
3232
disabled />
@@ -37,27 +37,23 @@
3737
:value="province" />
3838
</select>
3939
</div>
40-
<div
41-
v-if="hasSelected && hasSearched && !isEmpty(country_case)"
42-
class="search-results">
43-
<p>Cases</p>
44-
<span>last update {{ country_case.last_update }}</span>
45-
<Results
46-
:items="results"
47-
:duration="duration"
48-
:show-value="!isEmpty(country_case)"
49-
:show-chart="true"
50-
:chart-data="country_case" />
51-
</div>
5240
<button
41+
ref="search"
42+
:class="{ 'is-disabled': !hasSelected }"
5343
:disabled="!hasSelected"
54-
@click="onSearch">Search</button>
44+
@click="onSearch">
45+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
46+
width="30" height="30"
47+
viewBox="0 0 172 172"
48+
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="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g>
49+
</svg>
50+
</button>
5551
</div>
5652
<ul class="dropdown-menu">
5753
<li
5854
v-for="(suggestion, index) in matches"
5955
:key="index"
60-
v-bind:class="{'active': isActive(index)}"
56+
v-bind:class="{ 'is-active': isActive(index) }"
6157
@click="suggestionClick(index)"
6258
>
6359
<span>{{ suggestion }}</span>
@@ -77,31 +73,21 @@ export default {
7773
Results,
7874
AnimatedNumber
7975
},
80-
props: {
81-
suggestions: {
82-
type: Object,
83-
required: true
84-
},
85-
selection: {
86-
type: String,
87-
required: true
88-
}
89-
},
9076
computed: {
9177
...mapGetters([
92-
'country_case'
78+
'countries'
9379
]),
9480
setSelection: {
9581
get() {
9682
return this.selection
9783
},
9884
set(newSelect) {
9985
this.country = newSelect
100-
this.provinces = this.suggestions[newSelect].filter(_ => _)
86+
this.provinces = this.countries[newSelect].filter(_ => _)
10187
}
10288
},
10389
matches() {
104-
const countries = Object.keys(this.suggestions)
90+
const countries = Object.keys(this.countries)
10591
const lowerCased = this.country.toLowerCase()
10692
return countries.filter(str => {
10793
return str.toLowerCase().indexOf(lowerCased) >= 0
@@ -111,38 +97,18 @@ export default {
11197
return (
11298
this.country !== '' && this.matches.length != 0 && this.open
11399
)
114-
},
115-
results() {
116-
const cases = this.country_case
117-
return [
118-
{
119-
label: 'Confirmed',
120-
value: cases.confirmed_count,
121-
color: '#ffa500'
122-
},
123-
{
124-
label: 'Recovered',
125-
value: cases.recovered_count,
126-
color: '#66a266'
127-
},
128-
{
129-
label: 'Dead',
130-
value: cases.dead_count,
131-
color: '#b20000'
132-
}
133-
]
134100
}
135101
},
136102
data() {
137103
return {
138104
open: false,
139105
current: 0,
106+
selection: '',
140107
country: '',
141108
provinces: [],
142109
tempValue: null,
143110
hasSelected: false,
144-
hasSearched: false,
145-
duration: 1000
111+
hasSearched: false
146112
}
147113
},
148114
methods: {
@@ -202,22 +168,23 @@ export default {
202168
})
203169
},
204170
onSearch() {
205-
this.$store
206-
.dispatch('getCasesByCountry', {
207-
country: this.country,
208-
province: this.$refs.provinces.value
209-
})
210-
.then(_ => {
211-
this.hasSearched = true
212-
this.$gtag('event', 'click', {
213-
event_category: 'search',
214-
event_label: 'search click',
215-
value: `${this.country}${this.$refs.provinces.value ? ', ' + this.$refs.provinces.value : ''}`
216-
})
217-
})
171+
// this.$store
172+
// .dispatch('getCasesByCountry', {
173+
// country: this.country,
174+
// province: this.$refs.provinces.value
175+
// })
176+
// .then(_ => {
177+
// this.hasSearched = true
178+
// this.$gtag('event', 'click', {
179+
// event_category: 'search',
180+
// event_label: 'search click',
181+
// value: `${this.country}${this.$refs.provinces.value ? ', ' + this.$refs.provinces.value : ''}`
182+
// })
183+
// })
218184
},
219185
onChange() {
220186
this.hasSearched = false
187+
this.$refs.search.focus()
221188
}
222189
}
223190
}
@@ -226,128 +193,94 @@ export default {
226193

227194
<style lang="scss" scoped>
228195
.search {
229-
position: relative;
196+
position: absolute;
197+
left: 50%;
198+
bottom: 56px;
199+
z-index: 2;
200+
padding: 0;
201+
width: calc(100% - 48px);
202+
transform: translateX(-50%);
230203
231-
&.open {
204+
&.is-open {
205+
206+
.countries-wrapper {
207+
border-radius: 0 0 4px 4px;
208+
}
232209
233210
.dropdown-menu {
234211
display: block;
212+
border-radius: 4px 4px 0 0;
235213
}
236214
}
237215
238-
.countries-wrapper {
239-
display: block;
240-
241-
input {
242-
margin: 0;
243-
padding: 12px 16px 14px;
244-
border: 1px solid #ffffff;
245-
border-radius: 4px;
246-
width: calc(100% - 32px);
247-
font-size: 24px;
248-
color: #ffffff;
249-
background-color: transparent;
216+
button {
217+
position:relative;
218+
top: 0px;
219+
border: none;
220+
color: #f2f2f2;
221+
border-radius: 4px;
222+
padding: 8px 16px;
223+
width: 100%;
224+
font-size: 18px;
225+
background-color: #3232ff;
226+
box-shadow: 0px 6px 2px -1px rgba(0, 0, 0, 0.2);
227+
opacity: 1;
228+
transition: 0.5s ease;
250229
251-
&::placeholder {
252-
color: #cccccc;
253-
}
230+
&.is-disabled {
231+
opacity: 0.2;
232+
box-shadow: none;
233+
cursor: not-allowed;
254234
}
255235
}
256236
237+
.countries-wrapper,
257238
.provinces-wrapper {
258-
position: relative;
259-
display: none;
260-
margin-top: 16px;
261-
262-
&:after {
263-
content: "";
264-
width: 0;
265-
height: 0;
266-
border: 4px solid transparent;
267-
border-color: #fff transparent transparent transparent;
268-
position: absolute;
269-
top: 50%;
270-
right: 10px;
271-
}
272-
273-
&.is-show {
274-
display: block;
275-
}
239+
border-radius: 4px;
240+
margin: 0 auto 12px;
241+
padding: 12px 16px;
242+
background-color: #ffffff;
243+
box-shadow: 0px 6px 2px -1px rgba(0, 0, 0, 0.2);
276244
245+
input,
277246
select {
278-
padding: 12px 16px 14px;
279-
border: 1px solid #ffffff;
280-
border-radius: 4px;
247+
border: 0;
248+
padding: 0;
249+
display: block;
281250
font-size: 24px;
282-
color: #ffffff;
283251
width: 100%;
284252
background-color: transparent;
285-
appearance: none;
286253
}
287254
}
288255
289-
button {
290-
border-radius: 4px;
291-
margin-top: 16px;
292-
margin-bottom: 16px;
293-
padding: 12px 16px 14px;
294-
font-size: 24px;
295-
width: 100%;
296-
background-color: #ffffff;
297-
cursor: pointer;
256+
.provinces-wrapper {
257+
display: none;
258+
259+
&.is-show {
260+
display: block;
261+
}
298262
}
299263
300264
.dropdown-menu {
301265
position: absolute;
302-
top: 60px;
303-
display: none;
304-
border-radius: 4px;
305-
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
266+
top: -1px;
306267
margin: 0;
307268
padding: 0;
308-
max-height: 24vh;
269+
display: none;
270+
max-height: 240px;
309271
width: 100%;
310272
overflow: auto;
273+
transform: translateY(-100%);
311274
background-color: #ffffff;
312275
313276
li {
314-
display: block;
315-
padding: 12px 8px;
316-
font-size: 18px;
317-
color: #343332;
277+
padding: 8px;
278+
font-size: 20px;
318279
319-
&.active {
280+
&.is-active {
320281
background-color: #dddddd;
321282
}
322283
}
323284
}
324-
325-
.search-results {
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-
}
333-
334-
& > p {
335-
margin-top: 24px;
336-
margin-bottom: 6px;
337-
font-weight: 700;
338-
font-size: 32px;
339-
letter-spacing: 1px;
340-
color: #ffffff;
341-
text-transform: uppercase;
342-
width: 100%;
343-
}
344-
345-
& > span {
346-
display: block;
347-
margin-bottom: 12px;
348-
font-size: 16px;
349-
color: #dddddd;
350-
}
351-
}
352285
}
353286
</style>

0 commit comments

Comments
 (0)