diff --git a/src/app/app.component.html b/src/app/app.component.html index 2c46db2..160d3b2 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ -
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7a54d51..0629a54 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; 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 {User} from './openaireLibrary/login/utils/helper.class'; import {UserManagementService} from './openaireLibrary/services/user-management.service'; @@ -22,9 +22,16 @@ export class AppComponent implements OnInit { properties: EnvProperties = properties; showMenu: boolean = false; user: User; + isHome: boolean = true; constructor(private route: ActivatedRoute, + private router: Router, private userManagementService: UserManagementService) { + this.router.events.subscribe(event => { + if(event instanceof NavigationStart) { + //this.isHome = event.url === '/'; + } + }) } ngOnInit() { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f14d19b..ef5e2c5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import {EnvironmentSpecificService} from "./openaireLibrary/utils/properties/env imports: [ AppRoutingModule, BrowserModule, + BrowserAnimationsModule, HttpClientModule, NavigationBarModule, CookieLawModule, diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css new file mode 100644 index 0000000..fb5403b --- /dev/null +++ b/src/app/home/home.component.css @@ -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; +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index ae69b52..3c769e1 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1,31 @@ -
- test + +
+
+
+
+

OpenAIRE Usage Statistics Service

+
+ 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. +
+ Learn More +
+
+
+
+
+ + + + + + +
+
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 91e17bf..96dfa1d 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,9 +1,76 @@ import {Component} from "@angular/core"; +import {animate, state, style, transition, trigger} from "@angular/animations"; @Component({ 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 { - + + 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; + } + } + } } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 341d128..2c2fa0e 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -2,13 +2,15 @@ import {NgModule} from "@angular/core"; import {HomeComponent} from "./home.component"; import {CommonModule} from "@angular/common"; import {RouterModule} from "@angular/router"; +import {FullPageSliderModule} from "../openaireLibrary/utils/full-page-slider/full-page-slider.module"; @NgModule({ imports: [ CommonModule, RouterModule.forChild([{ - path: '', component: HomeComponent - }]) + path: '', component: HomeComponent + }]), + FullPageSliderModule ], declarations: [HomeComponent], exports: [HomeComponent] diff --git a/src/assets/usage-statistics-assets/home/1.svg b/src/assets/usage-statistics-assets/home/1.svg new file mode 100644 index 0000000..6cb02a2 --- /dev/null +++ b/src/assets/usage-statistics-assets/home/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 3cc3ba7..914291a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -7,5 +7,16 @@ --portal-main-color: #e95420; --portal-main-contrast: white; --portal-dark-color: #a0462c; - +} + +body, html { + height: 100%; +} + +body { + background-color: #F9FBFC; + color: #333333; + min-height: 100vh; + font-size: 16px; + line-height: 21px; }