MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 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>
<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.

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

@ -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>

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

@ -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;

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

@ -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">

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;
}
.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;
}
}

2
src/assets/openaire-theme

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