Change search to close on blur and let the label stay on search close
This commit is contained in:
parent
638ca3395f
commit
366835e39b
|
@ -4,9 +4,11 @@
|
|||
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
|
||||
<div class="uk-width-3-5">
|
||||
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
||||
<input #input type="text" class="uk-animation-slide-right-medium uk-width-1-1"
|
||||
[class.uk-hidden]="!showSearch || country"
|
||||
<input #input type="text" class="uk-width-1-1"
|
||||
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
|
||||
[class.uk-hidden]="!showSearch || (!showSearch && country)"
|
||||
placeholder="SEARCH FOR A COUNTRY"
|
||||
(blur)="closeSearch()"
|
||||
aria-label="Number"
|
||||
formControlName="country"
|
||||
[matAutocomplete]="auto">
|
||||
|
@ -17,8 +19,8 @@
|
|||
</mat-autocomplete>
|
||||
</form>
|
||||
<div class="uk-flex uk-flex-left">
|
||||
<span *ngIf="country" class="uk-flex uk-flex-middle">
|
||||
<span>{{country}}</span>
|
||||
<span *ngIf="countryFb.get('country').value && !showSearch" class="uk-flex uk-flex-middle">
|
||||
<span (click)="toggle()">{{countryFb.get('country').value}}</span>
|
||||
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
||||
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
|
||||
|
@ -28,7 +30,7 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (click)="toggle()">
|
||||
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (mousedown)="$event.preventDefault()" (click)="toggle()">
|
||||
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
||||
<span class="uk-text-uppercase space">search</span>
|
||||
</button>
|
||||
|
|
|
@ -47,6 +47,7 @@ export class AnalyticsComponent implements OnInit {
|
|||
|
||||
public search() {
|
||||
this.country = this.countryFb.value.country;
|
||||
this.showSearch = false;
|
||||
this.loading = true;
|
||||
this.clearTimeouts();
|
||||
if (this.country && this.country.length > 0) {
|
||||
|
@ -100,6 +101,10 @@ export class AnalyticsComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
closeSearch() {
|
||||
this.showSearch = false;
|
||||
}
|
||||
|
||||
clearTimeouts() {
|
||||
this.timeouts.forEach(timeout => {
|
||||
clearTimeout(timeout);
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
existing citation mechanisms and assists institutional repository managers, research communities, research
|
||||
organizations, funders and policy makers track and evaluate research from an early stage.
|
||||
</div>
|
||||
<a routerLink="/about" class="uk-button portal-button">Learn More</a>
|
||||
<a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
|
||||
</div>
|
||||
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1">
|
||||
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
|
||||
|
|
Loading…
Reference in New Issue