[Usage statistics | Trunk]: Add first section on home page

src/app/app.component.html

@@ -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>
 <div class="custom-main-content">
     <main>

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() {

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {EnvironmentSpecificService} from "./openaireLibrary/utils/properties/env
     imports: [
         AppRoutingModule,
         BrowserModule,
+        BrowserAnimationsModule,
         HttpClientModule,
         NavigationBarModule,
         CookieLawModule,

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;
+}

src/app/home/home.component.html

@@ -1,3 +1,31 @@
-<div>
-  test
+<ng-template #first>
+  <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>

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;
+      }
+    }
+  }
 }

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]

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;
 }