[Usage statistics | Trunk]: Add first section on home page
This commit is contained in:
parent
58c6417c53
commit
6522f2c99f
|
@ -1,4 +1,4 @@
|
||||||
<navbar *ngIf= "showMenu" portal="usage-statistics" [onlyTop]=false [userMenu]=true
|
<navbar *ngIf= "showMenu" portal="usage-statistics" [onlyTop]="false" [userMenu]="false"
|
||||||
[user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
|
[user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [properties]=properties></navbar>
|
||||||
<div class="custom-main-content">
|
<div class="custom-main-content">
|
||||||
<main>
|
<main>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {Component, OnInit} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {MenuItem, RootMenuItem, SideMenuItem} from './openaireLibrary/sharedComponents/menu';
|
import {MenuItem, RootMenuItem, SideMenuItem} from './openaireLibrary/sharedComponents/menu';
|
||||||
import {ActivatedRoute, Router} from '@angular/router';
|
import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
|
||||||
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
|
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
|
||||||
import {User} from './openaireLibrary/login/utils/helper.class';
|
import {User} from './openaireLibrary/login/utils/helper.class';
|
||||||
import {UserManagementService} from './openaireLibrary/services/user-management.service';
|
import {UserManagementService} from './openaireLibrary/services/user-management.service';
|
||||||
|
@ -22,9 +22,16 @@ export class AppComponent implements OnInit {
|
||||||
properties: EnvProperties = properties;
|
properties: EnvProperties = properties;
|
||||||
showMenu: boolean = false;
|
showMenu: boolean = false;
|
||||||
user: User;
|
user: User;
|
||||||
|
isHome: boolean = true;
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
|
private router: Router,
|
||||||
private userManagementService: UserManagementService) {
|
private userManagementService: UserManagementService) {
|
||||||
|
this.router.events.subscribe(event => {
|
||||||
|
if(event instanceof NavigationStart) {
|
||||||
|
//this.isHome = event.url === '/';
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {EnvironmentSpecificService} from "./openaireLibrary/utils/properties/env
|
||||||
imports: [
|
imports: [
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
NavigationBarModule,
|
NavigationBarModule,
|
||||||
CookieLawModule,
|
CookieLawModule,
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
.first {
|
||||||
|
background-image: url("/assets/usage-statistics-assets/home/1.svg");
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
height: 336px;
|
||||||
|
}
|
|
@ -1,3 +1,31 @@
|
||||||
<div>
|
<ng-template #first>
|
||||||
test
|
<div class="uk-section">
|
||||||
|
<div class="uk-container uk-container-large">
|
||||||
|
<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">
|
||||||
|
OpenAIRE’s 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>
|
||||||
|
<fp-slider class="uk-visible@m">
|
||||||
|
<slide>
|
||||||
|
<ng-container *ngTemplateOutlet="first"></ng-container>
|
||||||
|
</slide>
|
||||||
|
</fp-slider>
|
||||||
|
<div class="uk-hidden@m uk-margin-left uk-margin-right">
|
||||||
|
<ng-container *ngTemplateOutlet="first"></ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,9 +1,76 @@
|
||||||
import {Component} from "@angular/core";
|
import {Component} from "@angular/core";
|
||||||
|
import {animate, state, style, transition, trigger} from "@angular/animations";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'home',
|
selector: 'home',
|
||||||
templateUrl: 'home.component.html'
|
templateUrl: 'home.component.html',
|
||||||
|
styleUrls: ['home.component.css'],
|
||||||
|
animations: [
|
||||||
|
trigger('1', [
|
||||||
|
state('1', style({
|
||||||
|
transform: 'translate(-50%, -50%)'
|
||||||
|
})),
|
||||||
|
state('2', style({
|
||||||
|
transform: 'translate(-50%, -250%)'
|
||||||
|
})),
|
||||||
|
state('3', style({
|
||||||
|
transform: 'translate(-50%, -450%)'
|
||||||
|
})),
|
||||||
|
transition('* => *', [
|
||||||
|
animate('1s')
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
trigger('2', [
|
||||||
|
state('1', style({
|
||||||
|
transform: 'translate(-50%, 150%)'
|
||||||
|
})),
|
||||||
|
state('2', style({
|
||||||
|
transform: 'translate(-50%, -50%)'
|
||||||
|
})),
|
||||||
|
state('3', style({
|
||||||
|
transform: 'translate(-50%, -250%)'
|
||||||
|
})),
|
||||||
|
transition('* => *', [
|
||||||
|
animate('1s')
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
trigger('3', [
|
||||||
|
state('1', style({
|
||||||
|
transform: 'translate(-50%, 250%)'
|
||||||
|
})),
|
||||||
|
state('2', style({
|
||||||
|
transform: 'translate(-50%, 150%)'
|
||||||
|
})),
|
||||||
|
state('3', style({
|
||||||
|
transform: 'translate(-50%, -50%)'
|
||||||
|
})),
|
||||||
|
transition('* => *', [
|
||||||
|
animate('1s')
|
||||||
|
])
|
||||||
|
])
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class HomeComponent {
|
export class HomeComponent {
|
||||||
|
|
||||||
|
public animate: boolean = false;
|
||||||
|
public slide = 1;
|
||||||
|
|
||||||
|
onWheel(event) {
|
||||||
|
if (!this.animate) {
|
||||||
|
this.animate = true;
|
||||||
|
if (event.deltaY > 0 && (this.slide < 3)) {
|
||||||
|
this.slide++;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animate = false;
|
||||||
|
}, 1000);
|
||||||
|
} else if (event.deltaY < 0 && (this.slide !== 1)) {
|
||||||
|
this.slide--;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animate = false;
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
this.animate = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,13 +2,15 @@ import {NgModule} from "@angular/core";
|
||||||
import {HomeComponent} from "./home.component";
|
import {HomeComponent} from "./home.component";
|
||||||
import {CommonModule} from "@angular/common";
|
import {CommonModule} from "@angular/common";
|
||||||
import {RouterModule} from "@angular/router";
|
import {RouterModule} from "@angular/router";
|
||||||
|
import {FullPageSliderModule} from "../openaireLibrary/utils/full-page-slider/full-page-slider.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
RouterModule.forChild([{
|
RouterModule.forChild([{
|
||||||
path: '', component: HomeComponent
|
path: '', component: HomeComponent
|
||||||
}])
|
}]),
|
||||||
|
FullPageSliderModule
|
||||||
],
|
],
|
||||||
declarations: [HomeComponent],
|
declarations: [HomeComponent],
|
||||||
exports: [HomeComponent]
|
exports: [HomeComponent]
|
||||||
|
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 110 KiB |
|
@ -7,5 +7,16 @@
|
||||||
--portal-main-color: #e95420;
|
--portal-main-color: #e95420;
|
||||||
--portal-main-contrast: white;
|
--portal-main-contrast: white;
|
||||||
--portal-dark-color: #a0462c;
|
--portal-dark-color: #a0462c;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #F9FBFC;
|
||||||
|
color: #333333;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 21px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue