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

Merge branch 'mobile' of code-repo.d4science.org:MaDgIK/monitor into mobile

This commit is contained in:
Konstantinos Triantafyllou 2022-12-07 16:58:22 +02:00
parent ffabb68501 2bcbfa2ac2
commit e5b7d4b5ba
7 changed files with 107 additions and 66 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;

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

@ -24,7 +24,7 @@
</div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class">
<!-- <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.
@ -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;">
@ -73,7 +73,7 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="uk-background-norepeat graph-background">
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
<div class="uk-flex uk-flex-column uk-flex-middle">
@ -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: 200">
<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">
<a class="uk-button uk-button-primary uk-text-uppercase uk-position-relative" routerLink="/get-started">Get Started</a>
</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,43 +331,47 @@
<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 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 style="height: 100vh;">
<div class="uk-text-center uk-padding" style="height: 45vh;" 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-mobile.png" alt="ipad" loading="lazy">
</div>
</div>
<div class="uk-inline">
<ng-container *ngTemplateOutlet="scrolling_text_mobile; context: {position_class: 'uk-position-top-center'}"></ng-container>
<div class="uk-position-relative" style="height: 55vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="uk-section uk-section-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: -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,34 +497,57 @@
<loading></loading>
</div>
<ng-container *ngIf="!loading">
<div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs position="horizontal" connect="#tabs-content">
<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>
<slider-tab tabId="{{stakeholderEntities.ORGANIZATIONS}}" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
<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>
<slider-tab [tabId]="'{{stakeholderEntities.ORGANIZATIONS}}'" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
</slider-tabs>
</div>
<ul id="tabs-content" class="uk-switcher">
<li id="all">
<ng-container *ngTemplateOutlet="sliderTemplateMobile; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
<ul id="tabs-content" class="uk-switcher uk-overflow-hidden">
<li [id]="'all'">
<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>
<li [id]="'{{stakeholderEntities.FUNDERS}}'">
<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>
<li [id]="'{{stakeholderEntities.RIS}}'">
<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>
<li [id]="'{{stakeholderEntities.ORGANIZATIONS}}'">
<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 +567,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%;
}
}

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