MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

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

This commit is contained in:
Konstantinos Triantafyllou 2022-10-31 13:32:27 +02:00
parent b7e97785bd
commit 3e34af709b
5 changed files with 74 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/about/how-it-works.component.ts
View File

@ -21,29 +21,33 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
</div> </div>
<div class="uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk-scrollspy-class> <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> <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 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 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. trends for your organization and make data-driven decisions. Here's how it works.
</div> </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> <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-padding"></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>
<div class="uk-container uk-section uk-section-small"> <div class="uk-section uk-section-small">
<div class="uk-width-1-1"> <div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null"
<div class="uk-sticky uk-blur-background uk-visible@l" uk-sticky [attr.offset]="offset"> [attr.offset]="offset">
<div class="uk-container">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content"> <slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab> [tabId]="section"></slider-tab>
</slider-tabs> </slider-tabs>
</div> </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-tabs flexPosition="center">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section" <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab> [tabId]="section"></slider-tab>
@ -323,6 +327,7 @@ export class HowItWorksComponent {
public activeSection: string = StakeholderEntities.FUNDERS; public activeSection: string = StakeholderEntities.FUNDERS;
public offset: number; public offset: number;
public stakeholderEntities = StakeholderEntities; public stakeholderEntities = StakeholderEntities;
public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
constructor( constructor(
@ -350,6 +355,7 @@ export class HowItWorksComponent {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.cdr.detectChanges(); 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) { private updateDescription(description: string) {
this._meta.updateTag({content: description}, "name='description'"); this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'"); this._meta.updateTag({content: description}, "property='og:description'");

64
src/app/about/you-we.component.ts
View File

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

2
src/app/app.component.ts
View File

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

2
src/app/openaireLibrary

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

2
src/assets/openaire-theme

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