MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

Change scroll-section with slider

This commit is contained in:
Konstantinos Triantafyllou 2023-10-06 14:50:22 +03:00
parent f443ca9a61
commit d97231ba92
6 changed files with 280 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
explore/src/app/home/home.component.html
View File

@ -8,7 +8,8 @@
<div>
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<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-flex-middle" uk-grid>
<div class="uk-width-3-5@m uk-margin-large-bottom">
<h1 class="uk-h2 uk-width-1-2@m" uk-scrollspy-class>
@ -28,7 +29,8 @@
[onChangeNavigate]="false" class="uk-width-2-5"></entities-selection> -->
<!-- <div class="uk-width-expand" input #input placeholder="Search in Explore" [searchable]="true" [hint]="'What are you looking for?'" [(value)]="keyword"></div>-->
<!-- </advanced-search-input>-->
<div search-input [(value)]="keyword" [placeholder]="'Search'+(portalName ? (' in '+portalName) : '')" (searchEmitter)="goTo()"
<div search-input [(value)]="keyword"
[placeholder]="'Search'+(portalName ? (' in '+portalName) : '')" (searchEmitter)="goTo()"
[searchInputClass]="'inner background'"></div>
<!-- <div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
@ -46,7 +48,8 @@
routerLinkActive="router-link-active" routerLink="/sdgs">
<span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/sdg/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span class="uk-text-lowercase">s</span>)</span>
<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span
class="uk-text-lowercase">s</span>)</span>
</span>
</a>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
@ -132,110 +135,74 @@
</ul>
</div>
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="icon: chevron-left; ratio: 2"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="icon: chevron-right; ratio: 2"></span></a>
<a class="uk-position-center-left-out" uk-slider-item="previous"><span
uk-icon="icon: chevron-left; ratio: 2"></span></a>
<a class="uk-position-center-right-out" uk-slider-item="next"><span
uk-icon="icon: chevron-right; ratio: 2"></span></a>
</div>
</div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class">
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 15%; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 99%,0">
<h3 class="uk-h2">
<span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large uk-width-3-4@m">
<div class="uk-section uk-section-secondary explore-dark-logo-background">
<div class="uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-width-1-1">
<h2 class="uk-h1 uk-margin-large-top">Share your research<span class="uk-text-primary">.</span></h2>
</div>
<slider-container [total]="2" [period]="6000" [navigation]="'progress'">
<slider-column type="slider">
<slider-item type="static">
<img class="uk-position-center uk-position-z-index" src="assets/explore-assets/home/tablet.png"
alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="0">
<img src="assets/explore-assets/home/1.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="0.5">
<img src="assets/explore-assets/home/2.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="1">
<img src="assets/explore-assets/home/3.png" alt="ipad" loading="lazy">
</slider-item>
<slider-item type="slide" [start]="1.5">
<img src="assets/explore-assets/home/4.png" alt="ipad" loading="lazy">
</slider-item>
</slider-column>
<slider-column type="nav">
<slider-nav-item [start]="0">
<h6>
<i class="uk-text-primary">Deposit</i> your research<span class="uk-text-primary">.</span>
</h6>
<div class="uk-margin-bottom">
Whether it’s publications, data or software,
select an <a href="" target="_blank">OpenAIRE compatible repository</a> and
share using community standards. Alternatively
use Zenodo, a catch-all repository hosted by CERN.
All results will be indexed, discoverable and accessible
via EXPLORE.
</p>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
</div>
<div class="uk-margin-top">
<a class="uk-button uk-button-text" routerLink="/participate/deposit/learn-how">Start
Deposit</a>
</div>
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 300vh; opacity: 0,1 20%" style="padding-top: 4vh;">
<h3 class="uk-h2">
<span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large uk-width-3-4@m">
</slider-nav-item>
<slider-nav-item [start]="1">
<h6>
<i class="uk-text-primary">Link</i> your work<span class="uk-text-primary">.</span>
</h6>
<div class="uk-margin-bottom">
Connect all your research. If you can't find your research
results in OpenAIRE, don't worry! Use our Link service,
that reaches out to many external sources via APIs, and
claim them to your Grant or ORCID. Use the service to provide
meaningful links between publications-datasets-software.
</p>
<div class="uk-margin-medium-top">
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/claim">Start Linking</a>
</div>
</div>
</ng-template>
<div class="uk-section uk-section-secondary">
<div class="uk-container uk-container-large">
<div class="uk-width-1-1">
<h2 class="uk-h1 uk-margin-large-top">Share your research<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 400vh">
<div class="uk-visible@m uk-height-viewport explore-dark-logo-background uk-sticky" uk-sticky="end: #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="explore-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<img class="uk-position-center uk-position-z-index" src="assets/explore-assets/home/tablet.png" alt="ipad" loading="lazy"
style="width: 100%;">
<img class="uk-position-center" src="assets/explore-assets/home/1.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0"
style="width: 100%;">
<img class="uk-position-center" src="assets/explore-assets/home/2.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 20%,1 99%,0; easing:0"
style="width: 100%;">
<img class="uk-position-center" src="assets/explore-assets/home/3.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 260vh; opacity: 0,1 20%,1 99%,0; easing:0"
style="width: 100%;">
<img class="uk-position-center" src="assets/explore-assets/home/4.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 310vh; opacity: 0,1 20%,1; easing:0"
style="width: 100%;">
</div>
</div>
</div>
<div class="uk-inline uk-width-expand uk-height-1-1 uk-margin-large-left">
<div>
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 40vh;">
<ng-container *ngTemplateOutlet="scrolling_text; context: {position_class: 'uk-position-center-left'}"></ng-container>
</div>
</div>
</div>
</div>
</div>
<div class="uk-hidden@m uk-height-viewport explore-dark-logo-background" uk-sticky="end: #js-sticky-parallax-images-all">
<div class="uk-flex uk-flex-column">
<div class="explore-dark-logo-background uk-inline uk-width-1-1" style="height: 40vh;">
<img class="uk-position-center uk-position-z-index" src="assets/explore-assets/home/tablet.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all;" style="width: 70%;">
<img class="uk-position-center" src="assets/explore-assets/home/1.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0"
style="width: 70%;">
<img class="uk-position-center" src="assets/explore-assets/home/2.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 20%,1 99%,0; easing:0"
style="width: 70%;">
<img class="uk-position-center" src="assets/explore-assets/home/3.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 260vh; opacity: 0,1 20%,1 99%,0; easing:0"
style="width: 70%;">
<img class="uk-position-center" src="assets/explore-assets/home/4.png" alt="ipad" loading="lazy"
uk-parallax="target: #js-sticky-parallax-images-all; start: 250vh; end: 100% + 100vh - 310vh; opacity: 0,1 20%,1; easing:0"
style="width: 70%;">
</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 class="uk-margin-top">
<a class="uk-button uk-button-text" routerLink="/participate/claim">Start Linking</a>
</div>
</slider-nav-item>
</slider-column>
</slider-container>
</div>
</div>
@ -260,7 +227,8 @@
<div style="max-width: 550px;">
<h2>Linked Open Research.</h2>
<div class="">
EXPLORE is built on the <a href="https://graph.openaire.eu/" target="_blank" class="graph">OpenAIRE Graph</a>, one of the largest
EXPLORE is built on the <a href="https://graph.openaire.eu/" target="_blank"
class="graph">OpenAIRE Graph</a>, one of the largest
open scholarly record collections worldwide. Conceived as a public and
transparent good, populated out of data sources trusted by scientists, the
OpenAIRE Graph brings discovery, monitoring, and assessment of science
@ -269,7 +237,8 @@
</div>
</div>
<div></div>
<img class="uk-visible@m uk-height-1-1 uk-position-top-right" src="assets/common-assets/common/graph-nodes.svg" alt="ipad" loading="lazy">
<img class="uk-visible@m uk-height-1-1 uk-position-top-right"
src="assets/common-assets/common/graph-nodes.svg" alt="ipad" loading="lazy">
</div>
</div>
</div>
@ -278,13 +247,19 @@
<div class="uk-container">
<div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
<div>
Within a constantly emerging scholarly communication environment, the OpenAIRE Graph is a moving target, continuously integrating new sources, new types or research objects, and embedding access measures. We therefore welcome the community to work with us to improve all its aspects: its <span class="uk-text-bold">coverage</span> (geographic and thematic), <span class="uk-text-bold">quality</span> (disambiguation and semantics) and <span class="uk-text-bold">access</span> (APIs).
Within a constantly emerging scholarly communication environment, the OpenAIRE Graph is a moving
target, continuously integrating new sources, new types or research objects, and embedding
access measures. We therefore welcome the community to work with us to improve all its aspects:
its <span class="uk-text-bold">coverage</span> (geographic and thematic), <span
class="uk-text-bold">quality</span> (disambiguation and semantics) and <span
class="uk-text-bold">access</span> (APIs).
</div>
<div class="uk-margin-top">
Find information about the OpenAIRE Graph, how to test it and contribute to improving it.
</div>
<div class="uk-margin-top">
<a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
<a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank"
class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
Learn more. Contribute
</a>
</div>
@ -302,17 +277,20 @@
you may
</h2>
<div class="uk-container">
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1 uk-grid-large" uk-grid uk-height-match=".link-title">
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-1 uk-grid-large" uk-grid
uk-height-match=".link-title">
<div>
<div class="uk-padding-small uk-padding-remove-horizontal custom-link">
<a href="https://provide.openaire.eu/home" target="_blank" class="uk-button uk-button-text uk-text-left uk-text-large">
<a href="https://provide.openaire.eu/home" target="_blank"
class="uk-button uk-button-text uk-text-left uk-text-large">
<span class="link-title">have your repository, Journal or CRIS system indexed in EXPLORE and take advantage of services for enriching metadata and counting usage?</span>
</a>
</div>
</div>
<div>
<div class="uk-padding-small uk-padding-remove-horizontal custom-link">
<a href="https://canada.explore.openaire.eu/" target="_blank" class="uk-button uk-button-text uk-text-left uk-text-large">
<a href="https://canada.explore.openaire.eu/" target="_blank"
class="uk-button uk-button-text uk-text-left uk-text-large">
<span class="link-title">use EXPLORE as an application platform as a service (aPaaS) and set up a national portal for Open Science, such as Canada.EXPLORE?</span>
</a>
</div>

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

@ -45,7 +45,7 @@
.explore-dark-logo-background {
background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");
background-repeat: no-repeat;
background-position: left 95%;
background-size: 65%;
background-position: -5% 102%;
background-size: 35%;
}
}

3
explore/src/app/home/home.module.ts
View File

@ -28,6 +28,7 @@ import {NumbersModule} from "../openaireLibrary/sharedComponents/numbers/numbers
import {AdvancedSearchInputModule} from "../openaireLibrary/sharedComponents/advanced-search-input/advanced-search-input.module";
import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
import {SliderUtilsModule} from "../openaireLibrary/sharedComponents/slider-utils/slider-utils.module";
@NgModule({
imports: [
@ -38,7 +39,7 @@ import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-inpu
PiwikServiceModule,
HomeRoutingModule,
HelperModule,
SEOServiceModule, OtherPortalsModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule, NumbersModule, AdvancedSearchInputModule, InputModule, SearchInputModule
SEOServiceModule, OtherPortalsModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule, NumbersModule, AdvancedSearchInputModule, InputModule, SearchInputModule, SliderUtilsModule
],
declarations: [
HomeComponent

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit a2f52cf40ee28cb950dd789cd100fdbba16eb4c0
Subproject commit 5a9237399e1eb1e04fb5ba485955b02b09bc6eeb

3
explore/src/assets/explore-custom.less
View File

@ -2,13 +2,14 @@
/* Button */
@button-primary-background: @explore-color;
@inverse-button-primary-background: @explore-color;
@button-secondary-border: @explore-color;
@button-secondary-color: @explore-color;
@button-secondary-hover-background: @global-secondary-background;
@button-secondary-hover-background-gradient: none;
@button-secondary-active-background: @global-secondary-background;
@button-secondary-active-background-gradient: none;
@inverse-button-text-color: @explore-color;
@inverse-button-text-hover-color: @explore-color;
/* Background */

2
explore/src/assets/openaire-theme

@ -1 +1 @@
Subproject commit 3a4aa92c441467994a45a2c6a4f0c21202945404
Subproject commit fd101a6b54f7b8b36bdef015d77365fb41a353df