[Explore & Library & common-assets | new-theme]: No animation in sticky tabs | Tabs stop being sticky when bottom component is in viewport | Updates in powered by bottom message | Updates in statistics in datasource landing.

1. landing-utils.css: Commented transition ease-out in #main-tabs-div.
2. app.component.ts: Added id="bottom" in <bottom>.
3. newSearchPage.component.html: Updated "Powered by OpenAIRE Research Graph" to make the link underlined on hover.
4. metrics.component.ts: Add classes "uk-text-small uk-text-meta" in "Powered by".
5. resultLanding.component.html & project.component.html & dataProvider.component.html:
   a. Updated "Powered by OpenAIRE Research Graph" to make the link underlined on hover.
   b. Add uk-sticky attribute in id="main-tabs-div" only if shouldSticky is true (bottom is not in the viewport).
6. resultLanding.component.ts & project.component.ts & dataProvider.component.ts: Added fields shouldSticky and observer, check in ngAfterViewInit() if bottom is intersecting and kill the observer in ngOnDestroy().
7. statisticsTab.component.ts: Added customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply" in <i-frame>.
8. showAuthors.component.ts: [Bug fix] In "View less authors" make only the link clickable, not the whole row.

landingPages/dataProvider/dataProvider.component.html

@@ -49,8 +49,8 @@
               <!-- Last Index Info-->
               <div class="uk-width-2-3@m uk-width-1-2 graph">
                 <icon name="graph" customClass="uk-text-primary"></icon>
-                <span class="uk-margin-small-left uk-text-baseline uk-text-meta">
+                <span class="uk-margin-small-left uk-text-baseline">
-                Powered by <a href="https://graph.openaire.eu" target="_blank" class="uk-text-primary">OpenAIRE Research Graph</a>
+                  <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
                 </span>
                 <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
                 . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
@@ -125,7 +125,7 @@
           </div>
 
           <div id="main-tabs-div"
-               uk-sticky="bottom: true; media: @m"  [attr.offset]="offset"
+               [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
                cls-active="active">
             <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
               <showTitle *ngIf="stickyHeader" [titleName]="dataProviderInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>

landingPages/dataProvider/dataProvider.component.ts

@@ -124,6 +124,9 @@ export class DataProviderComponent {
   public graph_offset: number = 0;
   @ViewChild("graph_and_feedback") graph_and_feedback;
 
+  public shouldSticky: boolean = true;
+  private observer: IntersectionObserver;
+
   subscriptions = [];
   properties: EnvProperties = properties;
   public openaireEntities = OpenaireEntities;
@@ -185,6 +188,15 @@ export class DataProviderComponent {
   ngAfterViewInit() {
     if (typeof document !== 'undefined') {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
+      let bottom = document.getElementById('bottom');
+      if(bottom) {
+        this.observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            this.shouldSticky = !entry.isIntersecting;
+          })
+        });
+        this.observer.observe(bottom);
+      }
     }
   }
 
@@ -242,6 +254,10 @@ export class DataProviderComponent {
     this.fetchPublications.clearSubscriptions();
     this.fetchDataproviders.clearSubscriptions();
     this.fetchProjects.clearSubscriptions();
+
+    if(this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   private getDataProviderInfo(id: string) {

landingPages/dataProvider/dataProvider.service.ts

@@ -153,8 +153,6 @@ export class DataProviderService {
               }
             }
 
-            console.log(this.dataProviderInfo.provenance);
-
             this.dataProviderInfo.subjects = [];
             length = Array.isArray(data[0]['subjects']) ? data[0]['subjects'].length : 1;
             for(let i=0; i<length; i++) {

landingPages/dataProvider/statisticsTab.component.ts

@@ -20,13 +20,15 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
         <div class="uk-padding uk-padding-remove-top">
           <div class="uk-card uk-card-default uk-card-body">
             <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">Produced {{openaireEntities.RESULTS}} per year</div>
-            <i-frame  [url]=docsTimelineUrl ></i-frame>
+            <i-frame  [url]=docsTimelineUrl
+                      customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
           </div>
         </div>
         <div class="uk-padding uk-padding-remove-top">
           <div class="uk-card uk-card-default uk-card-body">
             <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">{{openaireEntities.RESULTS}} Types</div>
-            <i-frame [url]=docsTypesUrl ></i-frame>
+            <i-frame [url]=docsTypesUrl
+                     customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
           </div>
         </div>
 <!--      </ng-container>-->
@@ -36,7 +38,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
         <div class="uk-padding uk-padding-remove-top">
           <div class="uk-card uk-card-default uk-card-body">
             <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">{{openaireEntities.RESULTS}} per funder</div>
-            <i-frame  [url]=docsFunderUrl ></i-frame>
+            <i-frame  [url]=docsFunderUrl
+                      customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
           </div>
         </div>
 
@@ -44,7 +47,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
             class="uk-padding uk-padding-remove-top">
         <div class="uk-card uk-card-default uk-card-body">
           <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">{{openaireEntities.PROJECTS}} with most {{openaireEntities.PUBLICATIONS}}</div>
-          <i-frame [url]=pubsProjectsUrl ></i-frame>
+          <i-frame [url]=pubsProjectsUrl
+                   customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
         </div>
       </div>
 
@@ -52,7 +56,8 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
             class="uk-padding uk-padding-remove-top">
         <div class="uk-card uk-card-default uk-card-body">
           <div *ngIf=" properties && !properties.useNewStatistisTool" class="uk-text-center uk-text-large">{{openaireEntities.PROJECTS}} with most {{openaireEntities.DATASETS}}</div>
-          <i-frame  [url]=dataProjectsUrl></i-frame>
+          <i-frame  [url]=dataProjectsUrl
+                    customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
         </div>
       </div>
       </div>

landingPages/landing-utils/metrics/metrics.component.ts

@@ -116,7 +116,7 @@ import {OpenaireEntities} from "../../../utils/properties/searchFields";
             </div>
           </div>
           <div class="uk-flex uk-flex-center uk-flex-middle">
-            <span class="uk-margin-small-right">Powered by</span>
+            <span class="uk-margin-small-right uk-text-small uk-text-meta">Powered by</span>
             <a href="https://usagecounts.openaire.eu" target="_blank">
               <img width="120" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="usage counts">
             </a>

landingPages/project/project.component.html

@@ -88,8 +88,8 @@
               <!-- Last Index Info-->
               <div class="uk-width-2-3@m uk-width-1-2 graph">
                 <icon name="graph" customClass="uk-text-primary"></icon>
-                <span class="uk-margin-small-left uk-text-baseline uk-text-meta">
+                <span class="uk-margin-small-left uk-text-baseline">
-                Powered by <a href="https://graph.openaire.eu" target="_blank" class="uk-text-primary">OpenAIRE Research Graph</a>
+                  <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
                 </span>
                 <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
                 . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
@@ -235,7 +235,7 @@
           </div>
 
           <div id="main-tabs-div"
-               uk-sticky="bottom: true; media: @m"  [attr.offset]="offset"
+               [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
                cls-active="active">
             <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
               <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>

landingPages/project/project.component.ts

@@ -151,6 +151,9 @@ export class ProjectComponent {
   public graph_offset: number = 0;
   @ViewChild("graph_and_feedback") graph_and_feedback;
 
+  public shouldSticky: boolean = true;
+  private observer: IntersectionObserver;
+
   subscriptions = [];
   properties: EnvProperties;
   public openaireEntities = OpenaireEntities;
@@ -227,6 +230,15 @@ export class ProjectComponent {
   ngAfterViewInit() {
     if (typeof document !== 'undefined') {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
+      let bottom = document.getElementById('bottom');
+      if(bottom) {
+        this.observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            this.shouldSticky = !entry.isIntersecting;
+          })
+        });
+        this.observer.observe(bottom);
+      }
     }
   }
 
@@ -314,6 +326,10 @@ export class ProjectComponent {
     this.fetchSoftware.clearSubscriptions();
     this.fetchOrps.clearSubscriptions();
     this.fetchDmps.clearSubscriptions();
+
+    if(this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   private createClipboard() {

landingPages/result/resultLanding.component.html

@@ -78,8 +78,8 @@
               <!-- Last Index Info-->
               <div class="uk-width-2-3@m uk-width-1-2 graph">
                 <icon name="graph" customClass="uk-text-primary"></icon>
-                <span class="uk-margin-small-left uk-text-baseline uk-text-meta">
+                <span class="uk-margin-small-left uk-text-baseline">
-                Powered by <a href="https://graph.openaire.eu" target="_blank" class="uk-text-primary">OpenAIRE Research Graph</a>
+                  <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
                 </span>
                 <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta">
                 . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
@@ -160,7 +160,7 @@
           </div>
 
           <div id="main-tabs-div"
-               uk-sticky="bottom: true; media: @m"  [attr.offset]="offset"
+               [attr.uk-sticky]="shouldSticky ? 'bottom: true; media: @m': null" [attr.offset]="offset"
                cls-active="active">
             <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
               <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>

landingPages/result/resultLanding.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 
@@ -129,6 +129,9 @@ export class ResultLandingComponent {
   public graph_offset: number = 0;
   @ViewChild("graph_and_feedback") graph_and_feedback;
 
+  public shouldSticky: boolean = true;
+  private observer: IntersectionObserver;
+
   public viewAll: string = "";
   public noCommunities: boolean = false;
 
@@ -219,6 +222,15 @@ export class ResultLandingComponent {
   ngAfterViewInit() {
     if (typeof document !== 'undefined') {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
+      let bottom = document.getElementById('bottom');
+      if(bottom) {
+        this.observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            this.shouldSticky = !entry.isIntersecting;
+          })
+        });
+        this.observer.observe(bottom);
+      }
     }
   }
 
@@ -290,6 +302,9 @@ export class ResultLandingComponent {
       }
     });
     this._vocabulariesService.clearSubscriptions();
+    if(this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   public pidInit(event) {

searchPages/searchUtils/newSearchPage.component.html

@@ -340,8 +340,9 @@
                 <!-- Last Index Info-->
                 <div class="graph">
                   <icon name="graph" customClass="uk-text-primary"></icon>
-                  <span class="uk-margin-small-left uk-text-baseline uk-text-muted">
+                  <span class="uk-margin-small-left uk-text-baseline">
-                    Powered by <a href="https://graph.openaire.eu" class="uk-link">OpenAIRE Research Graph</a></span>
+                    <span class="uk-text-meta">Powered by </span><a href="https://graph.openaire.eu" target="_blank">OpenAIRE Research Graph</a>
+                  </span>
                 </div>
                 <div class="uk-text-right">
                   <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">

utils/authors/showAuthors.component.ts

@@ -85,8 +85,8 @@ import {properties} from "../../../../environments/environment";
         </a>
       </span>
     </div>
-    <div *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="uk-width-1-1 uk-text-right uk-text-small">
+    <div *ngIf="viewAll && lessBtn" class="uk-width-1-1 uk-text-right uk-text-small">
-      <a>View less authors</a>
+      <a (click)="viewAll = !viewAll; lessBtn=false;">View less authors</a>
     </div>
 
     <modal-alert #authorsModal>