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

[Usage Counts | Trunk]: Mobile changes

This commit is contained in:
k.triantafyllou 2020-11-30 17:32:50 +00:00
parent ff2abde0f5
commit e5d8cee127
5 changed files with 108 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/analytics/analytics.component.css
View File

@ -49,6 +49,17 @@
font-weight: 600;
}
@media only screen and (max-width: 980px) {
.countries input {
font-size: 14px;
}
.countries .search-mobile {
padding-bottom: 5px;
border-bottom: 2px solid var(--portal-main-color);
}
}
button.search, button.search:hover {
color: #333333;
font-weight: 700;

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

@ -12,12 +12,13 @@
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
<div class="uk-container uk-text-bold">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
<div class="uk-width-3-5@m">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile">
<div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()">
<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)"
[class.uk-hidden@m]="!showSearch"
[class.uk-hidden]="country"
placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number"
@ -29,40 +30,41 @@
</mat-option>
</mat-autocomplete>
</form>
<div class="uk-flex uk-flex-left">
<span *ngIf="country && !showSearch" class="uk-flex uk-flex-middle">
<span (click)="toggle()">{{country}}</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" stroke-width="1.06" d="M16,4 L4,16"></path>
</svg>
</span>
</span>
<div *ngIf="country && !showSearch" class="uk-flex uk-flex-left">
<span class="uk-flex uk-flex-middle">
<span>{{country}}</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" stroke-width="1.06" d="M16,4 L4,16"></path>
</svg>
</span>
</span>
</div>
</div>
<button [disabled]="loading" class="uk-width-1-6@m uk-margin-medium-left uk-visible@m search"
<button [disabled]="loading" class="search uk-margin-medium-left uk-visible@m"
(mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
<button [disabled]="loading" class="uk-width-1-5 uk-margin-small-left uk-hidden@m search"
(mousedown)="$event.preventDefault()" (click)="toggle()">
<button [disabled]="loading" class="search uk-hidden@m"
(mousedown)="$event.preventDefault()" (click)="search(false)">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
</div>
<div class="uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
<div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
uk-grid>
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Repositories
</div>
@ -73,7 +75,7 @@
</div>
</div>
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Repositories
</div>
@ -84,7 +86,7 @@
</div>
</div>
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Views
</div>
@ -95,7 +97,7 @@
</div>
</div>
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Views
</div>
@ -106,7 +108,7 @@
</div>
</div>
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Downloads
</div>
@ -117,7 +119,7 @@
</div>
</div>
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="card uk-margin-bottom">
<div class="uk-margin-medium-bottom">
Downloads
</div>

52
src/app/home/home.component.css
View File

@ -8,6 +8,42 @@
}
}
.third .first-column {
position: relative;
background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
background-repeat: no-repeat;
background-size: contain, auto;
background-position: top left, bottom center;
padding: 60px 0 40px 50px;
font-size: 14px;
}
.third .first-column .learn-more {
padding-right: 50px;
}
.third .second-column {
background-image: url("/assets/usage-statistics-assets/home/3.4.svg"), url("/assets/usage-statistics-assets/home/3.5.svg");
background-repeat: no-repeat;
background-size: auto, contain;
background-position: top center, bottom right;
font-size: 14px;
padding: 40px 40px 60px 40px;
}
@media only screen and (max-width: 959px) {
.third .first-column {
background-size: contain, 100% 15%;
}
.third .second-column {
background-image: url("/assets/usage-statistics-assets/home/3.5.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
}
}
@media only screen and (min-width: 960px) {
.second {
background-image: url("/assets/usage-statistics-assets/home/2.svg");
@ -17,16 +53,6 @@
padding-top: 50px;
}
.third .first-column {
background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
background-repeat: no-repeat;
background-size: contain, auto;
background-position: top left, bottom center;
font-size: 14px;
padding: 60px 0 40px 50px;
position: relative;
}
.third {
background-image: url("/assets/usage-statistics-assets/home/3.3.svg");
background-repeat: no-repeat;
@ -35,13 +61,7 @@
}
.third .second-column {
background-image: url("/assets/usage-statistics-assets/home/3.4.svg"), url("/assets/usage-statistics-assets/home/3.5.svg");
background-repeat: no-repeat;
background-size: auto, contain;
background-position: top center, bottom right;
font-size: 14px;
margin-top: 100px;
padding: 40px 40px 40px 40px;
}
.third .third-column {

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

@ -1,11 +1,14 @@
<ng-template #first let-small="small">
<div class="uk-container uk-section first">
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom">
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
</div>
<div class="uk-width-3-5@m">
<h1><span class="portal-color uk-text-bold">UsageCounts Service</span><br>
by OpenAIRE</h1>
<div [class.uk-margin-xlarge-right]="!small">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-margin-medium-bottom">
UsageCounts service collects usage data from Open Science content providers repositories, journals, and
other scientific data sources. Then, it aggregates them, delivering standardized activity reports about
research usage and uptake. It complements existing citation mechanisms and assists institutional repository
@ -14,14 +17,11 @@
</div>
<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 uk-margin-medium-top">
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #second>
<ng-template #second let-small="small">
<div class="second uk-container uk-container-large">
<div class="uk-container">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@ -41,7 +41,7 @@
</p>
</div>
</div>
<div class="uk-grid uk-child-width-1-2@m uk-margin-top uk-padding" uk-grid uk-height-match="target: li">
<div [class.uk-padding]="!small" class="uk-grid uk-child-width-1-2@m uk-margin-top" uk-grid uk-height-match="target: li">
<div>
<h4 class="uk-text-bold">Providers</h4>
<ul class="light-blue-triangle uk-margin-top">
@ -66,7 +66,7 @@
<ng-template #third>
<div class="uk-container uk-container-large third">
<div class="uk-grid uk-child-width-1-3@m" uk-grid>
<div class="uk-flex-last@m ">
<div class="uk-flex-last@m" >
<div class="third-column">
<h2 class="portal-color uk-text-bold">Who and why is it for?</h2>
<div>
@ -78,12 +78,12 @@
<div class="first-column">
<h5 class="uk-text-primary">For Open Science repository managers and Publishers</h5>
<div class="uk-margin-top">
Perform the prerequisites -register your content in OpenAIRE
Perform the prerequisites - register your content in OpenAIRE
<a href="http://provide.openaire.eu" target="_blank">PROVIDE</a>,
then share usage activity from your repository - and receive standardized statistics from aggregated usage
data from sources around the world.
</div>
<div class="uk-margin-medium-top uk-text-center">
<div class="uk-margin-medium-top uk-text-center learn-more">
<a class="uk-button uk-button-primary" routerLink="/resources">Learn More</a>
</div>
</div>
@ -145,17 +145,20 @@
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</slide>
</fp-slider>
<div class="uk-hidden@l uk-margin-left uk-margin-right">
<div class="uk-section">
<div class="uk-hidden@l">
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="first; context: {small: true}"></ng-container>
</div>
<div class="uk-section">
<ng-container *ngTemplateOutlet="second"></ng-container>
<hr>
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="second; context: {small: true}"></ng-container>
</div>
<hr>
<div class="uk-section">
<ng-container *ngTemplateOutlet="third"></ng-container>
</div>
<div class="uk-section">
<hr>
<div class="uk-section uk-margin-left uk-margin-right">
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</div>
</div>

25
src/styles.css
View File

@ -103,6 +103,7 @@ ul.light-blue-circle li:before {
ul.light-blue-triangle {
list-style: none;
padding-left: 40px;
}
ul.light-blue-triangle li {
@ -133,12 +134,6 @@ ul.portal-circle {
padding-left: 40px;
}
@media only screen and (max-width: 959px) {
ul.portal-circle {
padding-left: 20px;
}
}
ul.portal-circle li {
margin: 0 0 20px 0;
position: relative;
@ -242,3 +237,21 @@ contact .uk-text-danger {
navbar .uk-navbar-nav>li:hover>a, navbar.uk-navbar-nav>li>a.uk-open, navbar .uk-navbar-nav>li>a:focus, navbar .uk-navbar-nav>li.uk-active>a {
color: var(--portal-main-color);
}
.uk-hr, hr {
border-color: #dedede;
}
@media only screen and (max-width: 959px) {
ul.portal-circle {
padding-left: 20px;
}
ul.light-blue-triangle li {
margin: 0 0 20px 0;
}
ul.light-blue-circle.large li {
margin: 0 0 20px 0;
}
}