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

progress on mobile pages, update submodules

This commit is contained in:
Alex Martzios 2022-12-06 09:38:08 +02:00
parent 44999ab06d
commit 2ea6834f50
10 changed files with 97 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -328,9 +328,9 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
</div>
</div>
</div>
<div class="uk-position-relative uk-height-medium uk-overflow-hidden">
<img class="uk-width-4-5 uk-position-absolute" src="assets/monitor-assets/about/hero.svg" loading="lazy"
style="bottom: -40px; right: -60px;">
<div class="uk-position-relative uk-height-medium" style="overflow-x: clip;">
<img class="uk-width-large uk-position-absolute" src="assets/monitor-assets/about/hero.svg" loading="lazy"
style="bottom: -70px; right: -80px;">
</div>
<!-- style="transform: translate(60px, 40px);" -->
</div>

8
src/app/get-started/get-started.component.html
View File

@ -79,12 +79,14 @@
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-bottom" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small uk-position-relative">
<img class="uk-position-absolute number-step number-step-1" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div>
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding-small uk-position-relative">
<img class="uk-position-absolute number-step number-step-2" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-background"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact you</span>
@ -104,7 +106,7 @@
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-text-center uk-padding uk-padding-remove-vertical">
<div class="uk-flex uk-flex-column uk-flex-middle uk-text-center uk-padding uk-padding-remove-vertical">
<h2>Need more information?<br>View details on the process<span class="uk-text-primary">.</span></h2>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-large-top uk-margin-large-bottom"
routerLinkActive="router-link-active" routerLink="/about/learn-how">

14
src/app/get-started/get-started.component.less Normal file
View File

@ -0,0 +1,14 @@
.number-step {
height: 70px;
opacity: 0.1;
top: 50%;
transform: translateY(-50%) rotate(20deg);
}
.number-step-1 {
right: 10%;
}
.number-step-2 {
left: 10%;
}

3
src/app/get-started/get-started.component.ts
View File

@ -17,7 +17,8 @@ import {StakeholderEntities} from '../openaireLibrary/monitor/entities/stakehold
@Component({
selector: 'get-started',
templateUrl: './get-started.component.html'
templateUrl: './get-started.component.html',
styleUrls: ['./get-started.component.less']
})
export class GetStartedComponent implements OnInit {
public url: string = null;

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

@ -54,8 +54,8 @@
<div class="uk-height-viewport monitor-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid" uk-grid style="height: 100vh;">
<div class="uk-width-expand uk-first-column uk-position-relative uk-height-1-1">
<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; -->
<div class="monitor-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center" 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: 75vh;">
@ -289,43 +289,40 @@
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" uk-scrollspy-class>
<div>Discover, track and understand trends and impact</div>
<div>pathways for your organization.</div>
<div>Discover, track and understand trends and impact pathways for your organization.</div>
<div>Make informed decisions.</div>
</div>
</div>
</div>
<div class="uk-container uk-padding-remove-right uk-height-medium uk-child-width-1-2 uk-flex">
<div class="uk-container uk-padding-remove-right uk-height-medium uk-position-relative">
<img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%; padding: 1px;" src="assets/monitor-assets/home/monitor.jpg" uk-parallax="y: 100">
<img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%;" src="assets/monitor-assets/home/mask.svg">
<div>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
</div>
<div class="uk-position-relative">
<img style="padding: 1px;" src="assets/monitor-assets/home/monitor.jpg">
<img class="uk-position-cover" src="assets/monitor-assets/home/mask.svg">
</div>
</div>
</div>
<ng-template #scrolling_text_mobile let-position_class="position_class">
<div #scrolling_element_mobile [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<!-- <ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 0vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand.
</h3>
<p class="uk-text-large">Track your organization’s research output in a comprehensive manner. Identify research pathways across key dimensions with granular and timely indicators.</p>
</div>
<div #scrolling_element_mobile [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Enhance</span> open science uptake<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">Work with the Open Science expert community for open and transparent metrics. Discover Open Science costs and trends for your organization. See how you fare in the European Open Science Cloud.</p>
</div>
<div #scrolling_element_mobile [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
<div #scrolling_element [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 data into <span class="uk-text-primary">actionable insights.</span>
</h3>
<p class="uk-text-large">See what works and what not, reveal hidden potential. Measure research impact, discover trends, connections and collaborations to improve and optimize your future actions.</p>
</div>
</ng-template>
<!-- <div class="uk-section uk-section-secondary">
<div class="uk-section uk-section-large uk-section-secondary">
<div class="uk-container uk-container-large">
<div>
<span class="uk-text-large uk-text-primary">Funders. Research Institutions. Research Initiatives.</span>
@ -334,13 +331,15 @@
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div>
<div class="uk-inline" style="height: 50vh;">
<div class="" style="height: 85vh;">
<div uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<img src="assets/monitor-assets/home/ipad.png" alt="ipad" loading="lazy">
<div class="uk-padding-large">
<img src="assets/monitor-assets/home/ipad-mobile.png" alt="ipad" loading="lazy">
</div>
</div>
</div>
<div class="uk-inline">
<ng-container *ngTemplateOutlet="scrolling_text_mobile; context: {position_class: 'uk-position-top-center'}"></ng-container>
<div class="">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-bottom-center'}"></ng-container>
</div>
</div>
</div>
@ -352,25 +351,29 @@
style="width: 200px; top: -80px; left: -80px;">
<img class="uk-position-absolute" src="assets/monitor-assets/home/graph.svg" alt="OpenAIRE Graph" loading="lazy"
style="width: 200px; top: 60px; right: -145px; transform: rotate(-25deg)">
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-flex uk-flex-column uk-flex-middle">
<h2 class="uk-h1 uk-text-center uk-padding uk-padding-remove-vertical uk-margin-top">
Tap into the OpenAIRE Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-text-center uk-margin-top">
The OpenAIRE Research Graph is one of the largest open scholarly record collections
worldwide, key in fostering Open Science and establishing its practices in the daily
research activities. Conceived as a public and transparent good, populated out of data
sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and
assessment of science back in the hands of the scientific community.
</div>
</div>
<div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom">
<div class="uk-container uk-container-large uk-section uk-section-large uk-padding-remove-bottom">
<div class="uk-flex uk-flex-column uk-flex-middle">
<h2 class="uk-h1 uk-text-center uk-padding uk-padding-remove-vertical uk-margin-top">
Tap into the OpenAIRE Research Graph<span class="uk-text-primary">.</span>
</h2>
<div class="uk-text-center">
The OpenAIRE Research Graph is one of the largest open scholarly record collections
worldwide, key in fostering Open Science and establishing its practices in the daily
research activities. Conceived as a public and transparent good, populated out of data
sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and
assessment of science back in the hands of the scientific community.
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-position-relative uk-overflow-hidden">
<img class="uk-position-absolute" src="assets/monitor-assets/home/graph.svg" alt="OpenAIRE Graph" loading="lazy"
style="width: 200px; top: 35%; right: -170px; transform: rotate(-100deg);">
<div class="uk-flex uk-flex-center uk-margin-medium-top uk-margin-medium-bottom">
<div class="uk-width-1-1 uk-flex-center uk-grid uk-child-width-1-2" uk-grid uk-height-match="target: .targetName;" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-template #numberCardMobile let-numberSize="numberSize" let-name="name" let-url="url">
<a class="uk-position-relative uk-display-block uk-link-reset"
[href]="url" target="_blank" uk-scrollspy-class>
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column uk-margin-auto">
<div class="uk-flex uk-flex-center uk-flex-column uk-margin-auto uk-margin-top">
<div class="uk-text-center">
<div class="uk-text-background uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
<div class="uk-margin-small-top uk-text-bold targetName">{{name}}</div>
@ -496,8 +499,8 @@
<loading></loading>
</div>
<ng-container *ngIf="!loading">
<div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs position="horizontal" connect="#tabs-content">
<div>
<slider-tabs position="horizontal">
<slider-tab tabId="all" tabTitle="All"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.FUNDERS}}" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.RIS}}" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
@ -506,24 +509,47 @@
</div>
<ul id="tabs-content" class="uk-switcher">
<li id="all">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let stakeholder of stakeholders" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li id="{{stakeholderEntities.FUNDERS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.funders}"></ng-container>
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let funder of funders" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="funder"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li id="{{stakeholderEntities.RIS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides:stakeholdersSlider.ris}"></ng-container>
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let ri of ris" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="ri"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li id="{{stakeholderEntities.ORGANIZATIONS}}">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.organizations}"></ng-container>
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let organization of organizations" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="organization"></browse-stakeholder>
</div>
</div>
</div>
</li>
</ul>
</ng-container>
<!-- Slider Template for Tab Content -->
<ng-template #sliderTemplateMobile let-slides="slides">
<!-- <ng-template #sliderTemplateMobile let-slides="slides">
<div uk-slider class="uk-slider uk-margin-medium-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<!-- Margin right -->
<li *ngFor="let slide of slides; let i=index" class="">
<div class="uk-padding-small uk-padding-remove-right">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
@ -543,7 +569,7 @@
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
</div>
</ng-template>
</ng-template> -->
</div>
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
<div class="uk-position-relative">

4
src/app/home/home.component.less
View File

@ -59,11 +59,11 @@
transform: matrix(1, 0.07, -0.07, 1, 0, 0);
&.contact-image-left {
top: 0;
right: 25%;
right: 15%;
}
&.contact-image-right {
bottom: 50%;
right: 5%;
right: 2%;
}
}

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 095e3340c0c157cc490c276d4725f9559da0f89d
Subproject commit 9b6281219586773ed0cb297aef4b6700e0dcbf79

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 6e71e0fc524cba542d746f749baede4be800a86f
Subproject commit 9141b4c9c3363ceb8a690a361d483268eb7eabe4

BIN
src/assets/monitor-assets/home/ipad-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 401bf13ae2385e262dd0d43363fd8b73984a4fab
Subproject commit 09073af6b6b9d7a779d0fd48fd2161724dca9574