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

Add scrollspy in all pages except get-started

This commit is contained in:
Konstantinos Triantafyllou 2022-03-01 21:11:35 +02:00
parent 0bdeea2a25
commit ed8ddb54ed
7 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/contact/contact.component.html
View File

@ -1,19 +1,19 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
<div id="contact-us" <div id="contact-us" class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
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-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small"> <div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</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"> <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)"> [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> Contact us<span class="uk-text-primary">.</span>
</h1> </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 We would be happy to open a discussion with you to better understand your needs and share examples of how
OpenAIRE MONITOR OpenAIRE MONITOR
can help your organization in your open science needs. can help your organization in your open science needs.

52
src/app/home/home.component.html
View File

@ -1,22 +1,22 @@
<div> <div>
<div class="uk-section home-background"> <div class="uk-section home-background">
<div class="mask"></div> <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"> <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> A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
</h1> </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>Work together with us to view, understand and visualize</div>
<div>research statistics and indicators.</div> <div>research statistics and indicators.</div>
</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> <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div> </div>
</div> </div>
</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'"> [childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1"> <div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large"> <div class="top-content uk-container uk-container-large">
@ -25,7 +25,7 @@
class="uk-text-primary">.</span></h2> class="uk-text-primary">.</span></h2>
</div> </div>
</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"> <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"> <img id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div> </div>
@ -62,15 +62,15 @@
</div> </div>
</div> </div>
</section-scroll> </section-scroll>
<div class="uk-section uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom"> <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"> <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> Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
</h2> </h2>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom"> <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> <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"> <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" <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-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div class="uk-text-center"> <div class="uk-text-center">
<div <div
@ -112,7 +112,7 @@
<div class="uk-grid uk-grid-large" uk-grid> <div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3@m uk-width-1-1"> <div class="uk-width-1-3@m uk-width-1-1">
<span class="uk-h6 uk-text-primary">Features</span> <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> class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text" <a class="uk-display-inline-block uk-text-uppercase uk-button-text"
routerLinkActive="router-link-active" routerLink="/about/learn-how"> routerLinkActive="router-link-active" routerLink="/about/learn-how">
@ -121,8 +121,8 @@
</span> </span>
</a> </a>
</div> </div>
<div class="uk-width-expand uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-grid> <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 class=""> <div uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Global outlook"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
@ -135,7 +135,7 @@
resource from open initiatives around the world, of global interest. resource from open initiatives around the world, of global interest.
</div> </div>
</div> </div>
<div class=""> <div uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Minimum effort to join"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
@ -148,7 +148,7 @@
deliver a view of your world. As you see fit. deliver a view of your world. As you see fit.
</div> </div>
</div> </div>
<div class=""> <div uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Transparent methodology"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
@ -161,7 +161,7 @@
for every metric and indicator we publish. for every metric and indicator we publish.
</div> </div>
</div> </div>
<div class=""> <div uk-scrollspy-class>
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
<icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs" <icon name="done" [flex]="true" ratio="1.5" visuallyHidden="Customised to your needs"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
@ -212,12 +212,20 @@
<ng-template #sliderTemplate let-slides="slides"> <ng-template #sliderTemplate let-slides="slides">
<div uk-slider class="uk-margin-medium-top"> <div uk-slider class="uk-margin-medium-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false"> <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 class="uk-padding-small">
<div uk-grid class="uk-grid uk-child-width-1-3@l uk-child-width-1-2@m"> <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">
<div *ngFor="let stakeholder of slide"> <ng-container *ngIf="i === 0">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder> <div *ngFor="let stakeholder of slide" uk-scrollspy-class>
</div> <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>
</div> </div>
</li> </li>

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

@ -45,7 +45,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
public errorCodes: ErrorCodes; public errorCodes: ErrorCodes;
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
/* Section scroll Map */ /* 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 type: string = null;
public directLink: boolean = true; public directLink: boolean = true;
public publicationsSize: any = null; public publicationsSize: any = null;

10
src/app/learn-how/learn-how.component.html
View File

@ -5,11 +5,11 @@
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</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-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"> <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> <h1 uk-scrollspy-class>Learn the process<span class="uk-text-primary">.</span></h1>
<div class="uk-text-large uk-width-2-3@s"> <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. Use the Monitor Dashboard to view your research <br> results, open science.
</div> </div>
</div> </div>
@ -17,7 +17,7 @@
<img src="../../assets/monitor-assets/about/steps.svg" loading="lazy"> <img src="../../assets/monitor-assets/about/steps.svg" loading="lazy">
</div> </div>
</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>
<div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom"> <div class="uk-padding uk-padding-remove-left uk-padding-remove-bottom">
<div class="uk-icon-bg-shadow uk-margin-bottom"> <div class="uk-icon-bg-shadow uk-margin-bottom">
@ -99,7 +99,7 @@
</div> </div>
</div> </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> <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> <h2 class="uk-h1 uk-margin-remove-top uk-margin-medium-bottom">Simplify research <br> tracking & monitoring.</h2>
<div class="uk-padding-large"> <div class="uk-padding-large">

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit c2b6547b4c36415ff2e9b1050dcdabc80bb34973 Subproject commit 03c06830bec20d0a14f42ba3a0728fe9c1c048f1

12
src/assets/monitor-custom.css
View File

@ -59,11 +59,13 @@ main {
background: var(--monitor-contrast-color) !important; background: var(--monitor-contrast-color) !important;
} }
.monitor-dark-logo-background { @media only screen and (min-width: 960px){
background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg"); .monitor-dark-logo-background {
background-repeat: no-repeat; background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
background-position: left 97%; background-repeat: no-repeat;
background-size: contain; background-position: left 95%;
background-size: contain;
}
} }

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit fb13bcae2ffe56445eda67e2e48740dc5a1e12df Subproject commit 559ea1a77d57e2e94d8b72a1089704dbfe5889b2