usage-counts/src/app/home/home.component.html

103 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<ng-template #first>
<div class="uk-section">
<div class="uk-container">
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<div class="uk-width-1-2@m">
<h1 class="uk-text-bold">OpenAIRE Usage Statistics Service</h1>
<div class="uk-margin-medium-top uk-margin-medium-bottom">
OpenAIREs Usage Statistic service contributes towards impact evaluation of usage activity in Open Access
Repositories.
This is realized by the generation of comparable, consistent, standards based usage statistics across
publishing platforms that
take into account different levels of scholarly information: the usage of data sources, the usage of
individual items in the
context of their resource type, the usage of individual web resources or files and the usage of resources
among different repositories.
</div>
<a routerLink="/about" class="uk-button portal-button">Learn More</a>
</div>
<div class="uk-width-expand first"></div>
</div>
</div>
</div>
</ng-template>
<ng-template #second>
<div class="uk-section uk-text-center">
<h3>Track Countries Usage Activity</h3>
<div class="second">
<div class="uk-container uk-container-small">
<div class="uk-flex uk-flex-middle uk-align-center uk-margin-large-bottom">
<input type="text" class="uk-width-4-5"
placeholder="SEARCH FOR A COUNTRY"
aria-label="Number"
[formControl]="countryFb"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of countries | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
<a class="uk-width-1-6 uk-margin-medium-left search" (click)="search()">
<img src="assets/usage-statistics-assets/home/search.svg">
<span class="uk-text-small uk-text-uppercase">search</span>
</a>
</div>
<div class="uk-text-bold uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div *ngIf="display" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-text-bold uk-grid-large" uk-grid>
<div *ngIf="display.total_repositories">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h3>
{{display.total_repositories | number}}
</h3>
<img src="assets/usage-statistics-assets/home/4.svg">
</div>
</div>
<div *ngIf="display.total_views">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h3>
{{display.total_views | number}}
</h3>
<img src="assets/usage-statistics-assets/home/5.svg">
</div>
</div>
<div *ngIf="display.total_downloads">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h3>
{{display.total_downloads | number}}
</h3>
<img src="assets/usage-statistics-assets/home/6.svg">
</div>
</div>
</div>
<div *ngIf="!display" class="card uk-text-bold">
No results found for that country
</div>
</div>
</div>
</div>
</ng-template>
<fp-slider class="uk-visible@m" [initSlide]="initSlide" logoURL="/assets/common-assets/logo-small-usage-statistics.png">
<slide>
<ng-container *ngTemplateOutlet="first"></ng-container>
</slide>
<slide>
<ng-container *ngTemplateOutlet="second"></ng-container>
</slide>
</fp-slider>
<div class="uk-hidden@m uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="first"></ng-container>
<ng-container *ngTemplateOutlet="second"></ng-container>
</div>