How it works: Release tabs when reach bottom. Remove divider from you-we while it is sticky. Align tabs with main-content

src/app/about/how-it-works.component.ts

@@ -21,29 +21,33 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
           </div>
           <div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class>
             <h1 class="uk-margin-medium-top" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
-            <div class="uk-text-large uk-width-2-5@l uk-width-2-3" uk-scrollspy-class>
+            <div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
               Join the OpenAIRE Monitor service and we will create for you a dashboard to track and understand and
               position your organization's research activities and their impact, discover and evaluate Open Science
               trends for your organization and make data-driven decisions. Here's how it works.
             </div>
-            <div class="uk-margin-medium-top uk-margin-large-bottom" uk-scrollspy-class>
+            <div class="uk-margin-medium-top uk-margin-small-bottom" uk-scrollspy-class>
               <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
             </div>
           </div>
         </div>
       </div>
       <div class="uk-padding"></div>
-      <img class="uk-visible@l uk-position-bottom-right" src="assets/monitor-assets/about/hero.svg" loading="lazy">
+      <img class="uk-visible@l uk-position-bottom-right uk-width-1-3@xl uk-width-1-2@l"
+           src="assets/monitor-assets/about/hero.svg" loading="lazy">
     </div>
-    <div class="uk-container uk-section uk-section-small">
-      <div class="uk-width-1-1">
-        <div class="uk-sticky uk-blur-background uk-visible@l" uk-sticky [attr.offset]="offset">
+    <div class="uk-section uk-section-small">
+      <div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null"
+           [attr.offset]="offset">
+        <div class="uk-container">
           <slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
             <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
                         [tabId]="section"></slider-tab>
           </slider-tabs>
         </div>
-        <div class="uk-sticky uk-blur-background uk-hidden@l" uk-sticky>
+      </div>
+      <div class="uk-sticky uk-blur-background uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
+        <div class="uk-container">
           <slider-tabs flexPosition="center">
             <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
                         [tabId]="section"></slider-tab>
@@ -323,6 +327,7 @@ export class HowItWorksComponent {
   public activeSection: string = StakeholderEntities.FUNDERS;
   public offset: number;
   public stakeholderEntities = StakeholderEntities;
+  public shouldSticky: boolean = true;
   subscriptions = [];
   
   constructor(
@@ -350,6 +355,7 @@ export class HowItWorksComponent {
     if (typeof document !== 'undefined') {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
       this.cdr.detectChanges();
+      this.observeBottom();
     }
   }
   
@@ -361,6 +367,20 @@ export class HowItWorksComponent {
     });
   }
   
+  private observeBottom() {
+    let bottom = document.getElementById('bottom');
+    if (bottom) {
+      let bottomObs = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          this.shouldSticky = !entry.isIntersecting;
+          this.cdr.detectChanges();
+        })
+      });
+      this.subscriptions.push(bottomObs);
+      bottomObs.observe(bottom);
+    }
+  }
+  
   private updateDescription(description: string) {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");

src/app/about/you-we.component.ts

@@ -9,29 +9,46 @@ import {
 } from "@angular/core";
 import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder";
 
+declare var UIkit;
+
 @Component({
   selector: 'you-we',
   template: `
     <div>
-      <h2 class="uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span class="uk-text-primary">{{type}}?</span></h2>
-      <div #sticky class="uk-container uk-background-default uk-blur-background uk-sticky uk-visible@l"
-           uk-sticky="animation: uk-animation-slide-bottom" [attr.bottom]="'#' + id" [attr.top]="'100vh -' + height + 'px'" [attr.offset]="offset">
-        <div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l">
-          <span class="uk-h3 uk-text-center uk-first-column">You</span>
-          <span class="uk-h3 uk-text-center">We</span>
-        </div>
+      <div class="uk-container">
+        <h2 class="uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span
+            class="uk-text-primary">{{type}}?</span></h2>
       </div>
-      <div [id]="id" class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid uk-height-match="target: .uk-card">
-        <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
-          <div class="uk-margin-top uk-margin-xlarge-bottom">
-            <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
-            <ng-content select="[you]"></ng-content>
+      <div [id]="'sticky-' + id" #sticky class="uk-background-default uk-blur-background uk-sticky uk-visible@l"
+           uk-sticky="animation: uk-animation-slide-bottom" [attr.bottom]="'#' + id"
+           [attr.top]="'100vh -' + height + 'px'" [attr.offset]="offset">
+        <div class="uk-container">
+          <div class="uk-grid uk-grid-large uk-child-width-1-2@l" [class.uk-grid-divider]="!isSticky">
+            <div class="uk-text-center uk-first-column">
+              <h3 class="uk-margin-remove uk-margin-small-top uk-margin-small-bottom">You</h3>
+            </div>
+            <div class="uk-text-center">
+              <h3 class="uk-margin-remove uk-margin-small-top uk-margin-small-bottom">We</h3>
+            </div>
           </div>
         </div>
-        <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
-          <div class="uk-margin-top uk-margin-xlarge-bottom">
-            <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
-            <ng-content select="[we]"></ng-content>
+      </div>
+      <div [id]="id" class="uk-container">
+        <div class="uk-padding-small uk-padding-remove-vertical">
+          <div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid
+               uk-height-match="target: .uk-card">
+            <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
+              <div class="uk-margin-top uk-margin-xlarge-bottom">
+                <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
+                <ng-content select="[you]"></ng-content>
+              </div>
+            </div>
+            <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
+              <div class="uk-margin-top uk-margin-xlarge-bottom">
+                <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
+                <ng-content select="[we]"></ng-content>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -44,6 +61,7 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes
   @Input()
   public id;
   @ViewChild('sticky') sticky: ElementRef;
+  public isSticky: boolean = false;
   public offset: number
   public height: number;
   private subscriptions: any[] = [];
@@ -52,20 +70,20 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes
   }
   
   ngAfterViewInit() {
-    if(this.sticky) {
+    if (this.sticky) {
       this.observeSticky();
     }
   }
   
   ngAfterContentChecked() {
-    if(this.sticky && typeof document !== 'undefined') {
+    if (this.sticky && typeof document !== 'undefined') {
       this.offset = this.calcOffset(this.sticky.nativeElement);
     }
   }
   
   ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
-       if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
+      if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
         subscription.disconnect();
       }
     });
@@ -82,10 +100,16 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes
     });
     this.subscriptions.push(resizeObs);
     resizeObs.observe(this.sticky.nativeElement);
+    this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => {
+      this.isSticky = true;
+    }));
+    this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => {
+      this.isSticky = false;
+    }));
   }
   
   calcOffset(element) {
     this.height = element.offsetHeight;
-    return window.innerHeight-this.height;
+    return window.innerHeight - this.height;
   }
 }

src/app/app.component.ts

@@ -60,7 +60,7 @@ import {ResourcesService} from "./openaireLibrary/monitor/services/resources.ser
                                      points="7 4 13 10 7 16"></polyline></svg>
             </span></a>
       </cookie-law>
-      <bottom *ngIf="properties && showMenu" [grantAdvance]="false"
+      <bottom *ngIf="properties && showMenu" id="bottom" [grantAdvance]="false"
               [properties]="properties"></bottom>
       <quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
                      [contactForm]="contactForm" [sending]="sending" [images]="images" [contact]="'Help'"

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit ac58161c93b92a534341ecda3cc1540292b2eeab
+Subproject commit 7b89e369a397279eaebff50f4c2843c85b01b8ae

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 1866a893c6b467f5e26a9659e37acaf4071a7f6c
+Subproject commit 3b874be6dfb7041f358c2ba86d3e1ec4e58f388b