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

changes for scrolling-text section in homepage

This commit is contained in:
Alex Martzios 2022-12-06 15:19:02 +02:00
parent 2ea6834f50
commit 2bcbfa2ac2
2 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
</div> </div>
</div> </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"> <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"> <h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand. Monitor, discover and understand.
@ -73,7 +73,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="uk-background-norepeat graph-background"> <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-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"> <div class="uk-flex uk-flex-column uk-flex-middle">
@ -295,14 +295,14 @@
</div> </div>
</div> </div>
<div class="uk-container uk-padding-remove-right uk-height-medium uk-position-relative"> <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%; 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"> <img class="uk-position-absolute" style="width: 250px; right: -10%; bottom:-35%;" src="assets/monitor-assets/home/mask.svg">
<div> <div>
<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 uk-position-relative" routerLink="/get-started">Get Started</a>
</div> </div>
</div> </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"> <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"> <h3 class="uk-h2 uk-text-primary">
Monitor, discover and understand. Monitor, discover and understand.
@ -331,21 +331,19 @@
<div id="js-sticky-parallax-images-all" style="min-height: 300vh"> <div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all"> <div class="uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all">
<div> <div>
<div class="" style="height: 85vh;"> <div style="height: 100vh;">
<div uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0"> <div class="uk-text-center uk-padding" style="height: 45vh;" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; opacity: 1; easing:0">
<div class="uk-padding-large"> <img class="uk-height-1-1" src="assets/monitor-assets/home/ipad-mobile.png" alt="ipad" loading="lazy">
<img src="assets/monitor-assets/home/ipad-mobile.png" alt="ipad" loading="lazy">
</div>
</div> </div>
</div> <div class="uk-position-relative" style="height: 55vh;">
<div class=""> <ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center'}"></ng-container>
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-bottom-center'}"></ng-container> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
<div class="uk-section uk-section-large uk-position-relative uk-overflow-hidden"> <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" <img class="uk-position-absolute" src="assets/monitor-assets/home/graph.svg" alt="OpenAIRE Graph" loading="lazy"
style="width: 200px; top: -80px; left: -80px;"> style="width: 200px; top: -80px; left: -80px;">
@ -501,14 +499,14 @@
<ng-container *ngIf="!loading"> <ng-container *ngIf="!loading">
<div> <div>
<slider-tabs position="horizontal"> <slider-tabs position="horizontal">
<slider-tab tabId="all" tabTitle="All"></slider-tab> <slider-tab [tabId]="'all'" tabTitle="All"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.FUNDERS}}" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></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.RIS}}'" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
<slider-tab tabId="{{stakeholderEntities.ORGANIZATIONS}}" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab> <slider-tab [tabId]="'{{stakeholderEntities.ORGANIZATIONS}}'" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
</slider-tabs> </slider-tabs>
</div> </div>
<ul id="tabs-content" class="uk-switcher"> <ul id="tabs-content" class="uk-switcher uk-overflow-hidden">
<li id="all"> <li [id]="'all'">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false"> <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 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> <div *ngFor="let stakeholder of stakeholders" uk-scrollspy-class>
@ -517,7 +515,7 @@
</div> </div>
</div> </div>
</li> </li>
<li id="{{stakeholderEntities.FUNDERS}}"> <li [id]="'{{stakeholderEntities.FUNDERS}}'">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false"> <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 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> <div *ngFor="let funder of funders" uk-scrollspy-class>
@ -526,7 +524,7 @@
</div> </div>
</div> </div>
</li> </li>
<li id="{{stakeholderEntities.RIS}}"> <li [id]="'{{stakeholderEntities.RIS}}'">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false"> <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 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> <div *ngFor="let ri of ris" uk-scrollspy-class>
@ -535,7 +533,7 @@
</div> </div>
</div> </div>
</li> </li>
<li id="{{stakeholderEntities.ORGANIZATIONS}}"> <li [id]="'{{stakeholderEntities.ORGANIZATIONS}}'">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false"> <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 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> <div *ngFor="let organization of organizations" uk-scrollspy-class>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 9b6281219586773ed0cb297aef4b6700e0dcbf79 Subproject commit 125820fa6827e075b4d9e11edef3b59e6cfd75df