MaDgIK
/
usage-counts
13
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Change search to close on blur and let the label stay on search close

This commit is contained in:
k.triantafyllou 2020-09-22 13:55:50 +00:00
parent 638ca3395f
commit 366835e39b
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/analytics/analytics.component.html
View File

@ -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>

5
src/app/analytics/analytics.component.ts
View File

@ -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);

2
src/app/home/home.component.html
View File

@ -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"/>