From ed8ddb54ed8b244c2e322ce1621be1f10c989e9f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 1 Mar 2022 21:11:35 +0200
Subject: [PATCH] Add scrollspy in all pages except get-started

---
 src/app/contact/contact.component.html     | 12 ++---
 src/app/home/home.component.html           | 52 +++++++++++++---------
 src/app/home/home.component.ts             |  2 +-
 src/app/learn-how/learn-how.component.html | 10 ++---
 src/app/openaireLibrary                    |  2 +-
 src/assets/monitor-custom.css              | 12 ++---
 src/assets/openaire-theme                  |  2 +-
 7 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 6df9b54..7c33160 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -1,19 +1,19 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
-<div id="contact-us"
-     class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
+<div id="contact-us" class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
   <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
     <div class="uk-padding-small">
       <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
     </div>
   </div>
-  <div class="uk-section uk-padding-remove-top uk-container uk-container-large">
+  <div class="uk-section uk-padding-remove-top uk-container uk-container-large"
+       uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
     <div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
-      <contact-us [organizationTypes]="organizationTypes" [sending]="sending"
+      <contact-us [organizationTypes]="organizationTypes" [sending]="sending" [scrollspy]="true"
                   [contactForm]="contactForm" (sendEmitter)="send($event)">
-        <h1 page-title class="uk-margin-auto">
+        <h1 page-title class="uk-margin-auto" uk-scrollspy-class>
           Contact us<span class="uk-text-primary">.</span>
         </h1>
-        <div page-description class="uk-text-large uk-width-2-3@s">
+        <div page-description class="uk-text-large uk-width-2-3@s" uk-scrollspy-class>
           We would be happy to open a discussion with you to better understand your needs and share examples of how
           OpenAIRE MONITOR
           can help your organization in your open science needs.
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index bfb59e2..766bef1 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,22 +1,22 @@
 <div>
   <div class="uk-section home-background">
     <div class="mask"></div>
-    <div class="uk-container uk-container-large">
+    <div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
       <div class="uk-width-1-2">
-        <h1 class="uk-heading-large">
+        <h1 class="uk-heading-large" uk-scrollspy-class>
           A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
         </h1>
-        <div class="uk-text-large uk-margin-medium-top">
+        <div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
           <div>Work together with us to view, understand and visualize</div>
           <div>research statistics and indicators.</div>
         </div>
-        <div class="uk-margin-medium-top" style="z-index: 1">
+        <div class="uk-margin-medium-top" uk-scrollspy-class>
           <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
         </div>
       </div>
     </div>
   </div>
-  <section-scroll [customClass]="'uk-section uk-section-primary'"
+  <section-scroll [customClass]="'uk-section uk-section-primary'" [map]="map"
                   [childrenCustomClass]="'uk-container uk-container-large'">
     <div top class="uk-width-1-1">
       <div class="top-content uk-container uk-container-large">
@@ -25,7 +25,7 @@
             class="uk-text-primary">.</span></h2>
       </div>
     </div>
-    <div left class="uk-width-1-1 uk-width-1-2@m uk-background-primary monitor-dark-logo-background">
+    <div left class="uk-width-1-1 uk-width-1-2@m uk-background-primary monitor-dark-logo-background uk-position-z-index">
       <div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
         <img id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
       </div>
@@ -62,15 +62,15 @@
       </div>
     </div>
   </section-scroll>
-  <div class="uk-section uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
-    <h2 class="uk-h1 uk-text-center">
+  <div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
+    <h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
       Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
     </h2>
-    <div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom">
-      <div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid>
+    <div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
+      <div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: false">
         <ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
           <a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
-             [href]="url" target="_blank">
+             [href]="url" target="_blank" uk-scrollspy-class>
             <div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
               <div class="uk-text-center">
                 <div
@@ -112,7 +112,7 @@
     <div class="uk-grid uk-grid-large" uk-grid>
       <div class="uk-width-1-3@m uk-width-1-1">
         <span class="uk-h6 uk-text-primary">Features</span>
-        <h2 class="uk-h1 uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
+        <h2 class="uk-margin-remove-top">Open data. <br> Open <br> methodologies<span
             class="uk-text-primary">.</span></h2>
         <a class="uk-display-inline-block uk-text-uppercase uk-button-text"
            routerLinkActive="router-link-active" routerLink="/about/learn-how">
@@ -121,8 +121,8 @@
 					</span>
         </a>
       </div>
-      <div class="uk-width-expand uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
-        <div class="">
+      <div class="uk-width-expand uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250" uk-grid>
+        <div uk-scrollspy-class>
           <div class="uk-icon-bg-shadow uk-margin-bottom">
             <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
                   customClass="uk-text-primary-gradient"></icon>
@@ -135,7 +135,7 @@
             resource from open initiatives around the world, of global interest.
           </div>
         </div>
-        <div class="">
+        <div uk-scrollspy-class>
           <div class="uk-icon-bg-shadow uk-margin-bottom">
             <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
                   customClass="uk-text-primary-gradient"></icon>
@@ -148,7 +148,7 @@
             deliver a view of your world. As you see fit.
           </div>
         </div>
-        <div class="">
+        <div uk-scrollspy-class>
           <div class="uk-icon-bg-shadow uk-margin-bottom">
             <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
                   customClass="uk-text-primary-gradient"></icon>
@@ -161,7 +161,7 @@
             for every metric and indicator we publish.
           </div>
         </div>
-        <div class="">
+        <div uk-scrollspy-class>
           <div class="uk-icon-bg-shadow uk-margin-bottom">
             <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
                   customClass="uk-text-primary-gradient"></icon>
@@ -212,12 +212,20 @@
       <ng-template #sliderTemplate let-slides="slides">
         <div uk-slider class="uk-margin-medium-top">
           <ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
-            <li *ngFor="let slide of slides" class="uk-width-1-1">
+            <!-- Margin right -->
+            <li *ngFor="let slide of slides; let i=index" class="uk-width-1-1">
               <div class="uk-padding-small">
-                <div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m">
-                  <div *ngFor="let stakeholder of slide">
-                    <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
-                  </div>
+                <div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: false">
+                  <ng-container *ngIf="i === 0">
+                    <div *ngFor="let stakeholder of slide" uk-scrollspy-class>
+                      <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
+                    </div>
+                  </ng-container>
+                  <ng-container *ngIf="i !== 0">
+                    <div *ngFor="let stakeholder of slide">
+                      <browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
+                    </div>
+                  </ng-container>
                 </div>
               </div>
             </li>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index e011e56..297ddfe 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -45,7 +45,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
   public errorCodes: ErrorCodes;
   public properties: EnvProperties = properties;
   /* Section scroll Map */
-  public map: Map<string, string> = new Map<string, string>([['1st', 'ipad-1'], ['2nd', 'ipad-2'], ['3rd', 'ipad-2']])
+  public map: Map<string, string> = new Map<string, string>([['1st', 'ipad'], ['2nd', 'ipad'], ['3rd', 'ipad']])
   public type: string = null;
   public directLink: boolean = true;
   public publicationsSize: any = null;
diff --git a/src/app/learn-how/learn-how.component.html b/src/app/learn-how/learn-how.component.html
index 427099d..f99aa5a 100644
--- a/src/app/learn-how/learn-how.component.html
+++ b/src/app/learn-how/learn-how.component.html
@@ -5,11 +5,11 @@
 			<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
 		</div>
 	</div>
-	<div class="uk-container uk-container-large">
+	<div class="uk-container uk-container-large"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
 		<div class="uk-grid uk-grid-medium uk-padding-small" uk-grid>
 			<div class="uk-width-2-3@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
-				<h1>Learn the process<span class="uk-text-primary">.</span></h1>
-				<div class="uk-text-large uk-width-2-3@s">
+				<h1 uk-scrollspy-class>Learn the process<span class="uk-text-primary">.</span></h1>
+				<div class="uk-text-large uk-width-2-3@s" uk-scrollspy-class>
 					Use the Monitor Dashboard to view your research <br> results, open science.
 				</div>
 			</div>
@@ -17,7 +17,7 @@
 				<img src="../../assets/monitor-assets/about/steps.svg" loading="lazy">
 			</div>
 		</div>
-		<div class="uk-grid uk-grid-medium uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s uk-padding-small" uk-grid>
+		<div class="uk-grid uk-grid-medium uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s uk-padding-small" uk-scrollspy-class uk-grid>
 			<div>
 				<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
 					<div class="uk-icon-bg-shadow uk-margin-bottom">
@@ -99,7 +99,7 @@
 		</div>
 	</div>
 </div>
-<div class="uk-section uk-margin-top uk-container uk-container-large">
+<div class="uk-section uk-margin-large-top uk-container uk-container-large">
 	<div class="uk-h6 uk-text-primary uk-margin-remove">Inclusion, transparency, quality, state of the art technology.</div>
 	<h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
 	<div class="uk-padding-large">
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index c2b6547..03c0683 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit c2b6547b4c36415ff2e9b1050dcdabc80bb34973
+Subproject commit 03c06830bec20d0a14f42ba3a0728fe9c1c048f1
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index e8a7c83..4455341 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -59,11 +59,13 @@ main {
   background: var(--monitor-contrast-color) !important;
 }
 
-.monitor-dark-logo-background {
-  background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
-  background-repeat: no-repeat;
-  background-position: left 97%;
-  background-size: contain;
+@media only screen and (min-width: 960px){
+  .monitor-dark-logo-background {
+    background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
+    background-repeat: no-repeat;
+    background-position: left 95%;
+    background-size: contain;
+  }
 }
 
 
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index fb13bca..559ea1a 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit fb13bcae2ffe56445eda67e2e48740dc5a1e12df
+Subproject commit 559ea1a77d57e2e94d8b72a1089704dbfe5889b2