[UsageCounts | Trunk]: Add mobilde rules
This commit is contained in:
parent
fb14b3e144
commit
5f409a74b1
|
@ -7,7 +7,6 @@
|
|||
|
||||
@media only screen and (max-width: 1199px) and (min-width: 960px) {
|
||||
.about > div:first-child {
|
||||
min-height: calc(50vh - 100px);
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<h3 class="uk-text-bold portal-color">Architecture functionalities</h3>
|
||||
<div class="uk-margin-large-left uk-margin-medium-top">
|
||||
<div [class.uk-margin-large-left]="large" class="uk-margin-medium-top">
|
||||
<ol class="light-blue">
|
||||
<li>Constant tracking of views and downloads of open science content providers registered on OpenAIRE
|
||||
PROVIDE.
|
||||
|
@ -81,7 +81,7 @@
|
|||
<span class="uk-text-normal portal-color">Push</span>
|
||||
Usage Statistics Tracking Workflow
|
||||
</h5>
|
||||
<ul class="light-blue-circle uk-margin-medium-top uk-margin-medium-left">
|
||||
<ul [class.uk-margin-medium-left]="large" class="light-blue-circle uk-margin-medium-top uk-margin-left">
|
||||
<li>An institutional repository is registered in OpenAIRE.</li>
|
||||
<li>Server side tracking: Plugins (Dspace) or patches (Eprints) using Matomo’s Web Analytics HTTP API.
|
||||
</li>
|
||||
|
@ -94,7 +94,7 @@
|
|||
<h5 class="uk-text-primary uk-text-bold uk-width-2-3@m">
|
||||
Collecting <span class="uk-text-normal portal-color">(Pull)</span> Consolidated Usage Statistics Reports
|
||||
</h5>
|
||||
<ul class="light-blue-circle uk-margin-medium-top uk-margin-medium-left">
|
||||
<ul [class.uk-margin-medium-left]="large" class="light-blue-circle uk-margin-medium-top uk-margin-left">
|
||||
<li>Gathering of consolidated statistics reports from aggregation services, such as IRUS-UK, using
|
||||
protocols such as SUSHI-Lite.
|
||||
</li>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {Component, HostListener, OnInit} from '@angular/core';
|
||||
import {faqs} from './faqs';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Meta, Title} from '@angular/platform-browser';
|
||||
|
@ -19,12 +19,23 @@ export class AboutComponent implements OnInit {
|
|||
description = "UsageCounts service is an OpenAIRE service built after the development of the Usage Statistics Service within OpenAIRE. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data retrieved by country, number of downloads, number of views, number of repositories and all derivative quantitative open metrics, in a comprehensive way for all stakeholders. Architecture. ";
|
||||
title = "OpenAIRE - UsageCounts | About";
|
||||
subs: Subscription[] = [];
|
||||
large: boolean = false;
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private _title: Title, private _piwikService: PiwikService,
|
||||
private _meta: Meta, private seoService: SEOService) {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
if(event.target.innerWidth > 959 && this.large === false) {
|
||||
this.large = true;
|
||||
} else if(event.target.innerWidth < 960 && this.large === true){
|
||||
this.large = false;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this._title.setTitle(this.title);
|
||||
this._meta.updateTag({content: this.description}, "name='description'");
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<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">
|
||||
<div class="uk-width-3-5@m">
|
||||
<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"
|
||||
|
@ -41,11 +41,15 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search"
|
||||
<button [disabled]="loading" class="uk-width-1-6@m uk-margin-medium-left uk-visible@m search"
|
||||
(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()">
|
||||
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
||||
</button>
|
||||
</div>
|
||||
<div class="uk-margin-medium-bottom">
|
||||
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
</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">
|
||||
<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>
|
||||
|
@ -107,7 +107,7 @@
|
|||
<ng-template #fourth>
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-flex-center" uk-grid>
|
||||
<div class="uk-width-expand@m uk-width-1-2 uk-flex uk-flex-right uk-flex-last@m">
|
||||
<div class="uk-width-expand@m uk-flex uk-flex-right uk-flex-last@m">
|
||||
<div class="features uk-width-4-5 uk-margin-auto">
|
||||
<h1 class="uk-text-bold portal-color">Features</h1>
|
||||
</div>
|
||||
|
@ -146,16 +146,16 @@
|
|||
</slide>
|
||||
</fp-slider>
|
||||
<div class="uk-hidden@l uk-margin-left uk-margin-right">
|
||||
<div class="uk-section uk-section-large">
|
||||
<div class="uk-section">
|
||||
<ng-container *ngTemplateOutlet="first; context: {small: true}"></ng-container>
|
||||
</div>
|
||||
<div class="uk-section uk-section-large">
|
||||
<div class="uk-section">
|
||||
<ng-container *ngTemplateOutlet="second"></ng-container>
|
||||
</div>
|
||||
<div class="uk-section uk-section-large">
|
||||
<div class="uk-section">
|
||||
<ng-container *ngTemplateOutlet="third"></ng-container>
|
||||
</div>
|
||||
<div class="uk-section uk-section-large">
|
||||
<div class="uk-section">
|
||||
<ng-container *ngTemplateOutlet="fourth"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -50,6 +50,13 @@
|
|||
fill: var(--portal-dark-color);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 960px) {
|
||||
.provide-definition {
|
||||
margin-left: 20px;
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.provide-definition {
|
||||
padding: 20px;
|
||||
background: #E7F0FA 0 0 no-repeat padding-box;
|
||||
|
@ -57,6 +64,4 @@
|
|||
border-radius: 5px;
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
width: 85%;
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<div class="uk-container uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<div class="uk-padding-small uk-padding-remove-vertical">
|
||||
<h2 class="uk-margin-remove-vertical uk-text-bold">OpenAIRE <span class="provide-color">PROVIDE</span></h2>
|
||||
<div class="uk-padding uk-width-3-4@l">
|
||||
<div [class.uk-padding]="large" class="uk-width-3-4@l">
|
||||
<p>
|
||||
The <span class="uk-text-bold">resources</span> of the OpenAIRE UsageCounts Service are
|
||||
available through the OpenAIRE PROVIDE product, which is serving the content providers.
|
||||
|
@ -50,10 +50,10 @@
|
|||
<div id="apis" class="uk-container uk-section">
|
||||
<div class="uk-padding-small uk-padding-remove-vertical">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<img src="assets/usage-statistics-assets/resources/2.svg">
|
||||
<h2 class="uk-text-bold uk-margin-medium-left uk-margin-remove-vertical">APIs and Reports</h2>
|
||||
<img class="uk-visible@m" src="assets/usage-statistics-assets/resources/2.svg">
|
||||
<h2 [class.uk-margin-medium-left]="large" class="uk-text-bold uk-margin-remove-vertical">APIs and Reports</h2>
|
||||
</div>
|
||||
<div class="uk-padding uk-margin-top uk-width-3-4@l">
|
||||
<div [class.uk-padding]="large" class="uk-margin-top uk-width-3-4@l">
|
||||
<p>
|
||||
A variety of reports generated via OpenAIRE UsageCounts Service are available via a SUSHI-Lite Endpoint. The
|
||||
reports comply with
|
||||
|
@ -103,10 +103,10 @@
|
|||
<div class="uk-container uk-section">
|
||||
<div class="uk-padding-small uk-padding-remove-vertical">
|
||||
<div class="uk-flex uk-flex-top">
|
||||
<img src="assets/usage-statistics-assets/resources/3.svg">
|
||||
<div class="uk-margin-medium-left">
|
||||
<img class="uk-visible@m" src="assets/usage-statistics-assets/resources/3.svg">
|
||||
<div [class.uk-margin-medium-left]="large">
|
||||
<h2 class="uk-text-bold">OpenAIRE UsageCounts Guidelines</h2>
|
||||
<div class="uk-padding uk-padding-remove-vertical uk-margin-top">
|
||||
<div [class.uk-padding]="large" class="uk-padding-remove-vertical uk-margin-top">
|
||||
<div class="uk-margin-small-bottom">Please read carefully the OpenAIRE usage statistics guidelines before
|
||||
submitting content.
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit} from '@angular/core';
|
||||
import {Component, HostListener, OnInit} from '@angular/core';
|
||||
import {Meta, Title} from '@angular/platform-browser';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
||||
|
@ -17,12 +17,23 @@ export class ResourcesComponent implements OnInit {
|
|||
description = "OpenAIRE Provide. The resources of the OpenAIRE UsageCounts Service are available through the OpenAIRE PROVIDE product, which is serving the content providers. APIs and Reports.";
|
||||
title = "OpenAIRE - UsageCounts | Resources";
|
||||
subs: Subscription[] = [];
|
||||
large: boolean = false;
|
||||
|
||||
constructor(private router: Router,
|
||||
private _title: Title, private _piwikService: PiwikService,
|
||||
private _meta: Meta, private seoService: SEOService,
|
||||
private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
if(event.target.innerWidth > 959 && this.large === false) {
|
||||
this.large = true;
|
||||
} else if(event.target.innerWidth < 960 && this.large === true){
|
||||
this.large = false;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this._title.setTitle(this.title);
|
||||
this._meta.updateTag({content: this.description}, "name='description'");
|
||||
|
|
|
@ -133,6 +133,12 @@ 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;
|
||||
|
|
Loading…
Reference in New Issue