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

[Monitor | new-theme]: home.component.html: Removed usage of <section-scroll> component and use uikit sticky parallax classes only for the scrolling effect in the viewport. | monitor-custom.css: Commented background-size in monitor-dark-logo-background class.

This commit is contained in:
Konstantina Galouni 2022-03-30 18:53:39 +03:00
parent 9b9508d9a6
commit aa16938bbc
2 changed files with 73 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,52 +23,85 @@
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-secondary'" [map]="map"
[childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large">
<ng-template #scrolling_text let-position_class="position_class">
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
<h3 class="uk-h2">
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
</h3>
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the <a href="https://graph.openaire.eu/" target="_blank">OpenAIRE Research
Graph</a> to view your publications-data-code <br> and how they interconnect.</p>
</div>
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
<h3 class="uk-h2">
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large"> Work with the Open Science expert community <br> for open and transparent metrics.
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
</div>
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
<h3 class="uk-h2">
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Understand your needs for your community. Measure impact, <br> discover trends, connections and
collaborations <br> to improve and optimize your future actions.</p>
</div>
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
<div class="uk-width-1-1">
<span class="uk-h6 uk-text-primary">Funders. Universities. Research Institutions. Communities.</span>
<h2 class="uk-h1 uk-margin-remove-top">Simplify Open Science <br>tracking & monitoring<span
class="uk-text-primary">.</span></h2>
class="uk-text-primary">.</span></h2>
</div>
</div>
<div left class="uk-width-1-1 uk-width-1-2@m uk-background-secondary monitor-dark-logo-background uk-position-z-index">
<div class="imgContainer uk-flex uk-flex-middle uk-flex-center">
<img class="uk-animation-fade" id="ipad" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
</div>
<div scroll class="uk-width-expand">
<div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="1st">
<h3 class="uk-h2">
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
</h3>
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the <a href="https://graph.openaire.eu/" target="_blank">OpenAIRE Research
Graph</a> to view your publications-data-code <br> and how they interconnect.</p>
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-visible@m uk-height-viewport monitor-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div uk-grid>
<div class="uk-width-expand uk-first-column">
<div class="monitor-dark-logo-background"><!-- uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true"-->
<div uk-parallax="target: #js-sticky-parallax-images-all;"> <!-- y: 55vh, 45vh; -->
<img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"
style="height: 70vh">
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">-->
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/monitor.jpg" width="1800" height="1200" alt=""-->
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">-->
<!-- <img class="uk-position-center-left" src="assets/monitor-assets/home/ipad.png" width="1800" height="1200" alt=""-->
<!-- uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing:0">-->
</div>
</div>
</div>
<div class="uk-inline uk-width-expand">
<div class=""><!-- uk-sticky="bottom: #js-sticky-parallax-images-all"-->
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="2nd">
<h3 class="uk-h2">
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large"> Work with the Open Science expert community <br> for open and transparent metrics.
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
</div>
</div>
<div class="uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
<div id="3rd">
<h3 class="uk-h2">
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Understand your needs for your community. Measure impact, <br> discover trends, connections and
collaborations <br> to improve and optimize your future actions.</p>
<div class="uk-hidden@m uk-height-viewport monitor-dark-logo-background" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div class="uk-flex uk-flex-column">
<div class="monitor-dark-logo-background uk-inline uk-width-1-1" style="height: 50vh;">
<div class="uk-position-center uk-height-1-1" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img class="uk-height-1-1" src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
</div>
</div>
<div class="uk-inline uk-width-expand">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-top-center'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</section-scroll>
</div>
<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>

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

@ -64,7 +64,7 @@ main {
background-image: url("~src/assets/monitor-assets/home/monitor-dark-logo.svg");
background-repeat: no-repeat;
background-position: left 95%;
background-size: contain;
/*background-size: contain;*/
}
}