explore-services/explore/src/app/home/home.component.html

457 lines
24 KiB
HTML

<!-- Redesign START -->
<ng-template #_logos let-logo="logo" let-class="class">
<div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
<div class="">
<img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
</div>
</div>
</ng-template>
<div>
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<!-- first grid with search and mask -->
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5 uk-margin-large-bottom">
<h1 class="uk-h2" uk-scrollspy-class>
Lorem ipsum dolor sit <br> amet, consetetur<span class="uk-text-primary">.</span>
</h1>
<div class="uk-text-large uk-margin-medium-top" uk-scrollspy-class>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
<div>nonumy eirmod tempor invidunt ut labore et dolore magna</div>
<div>aliquyam erat, sed diam voluptua.</div>
</div>
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-5@m" uk-scrollspy-class>
<advanced-search-input (searchEmitter)="goTo(true)">
<entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
[onChangeNavigate]="false"></entities-selection>
<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
</div>
</div>
</div>
</div>
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative">
<img style="padding: 1px" src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 300">
<img class="uk-position-top-left" src="assets/explore-assets/home/mask.svg">
</div>
</div>
</div>
<!-- logos carousel -->
<div class="uk-padding-large uk-padding-remove-horizontal uk-margin-large-top uk-margin-large-bottom">
<div uk-slider="autoplay: false; autoplay-interval: 2500" class="">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
<ng-container *ngFor="let type of getKeys(logos)">
<li *ngFor="let range of createRange(logos[type].length) let j=index"
class="uk-width-1-1 home-logo">
<h1 class="uk-text-center uk-margin-bottom portal-color uk-h3">
<span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
<span
class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
publications</span><span> deduplicated</span>
</span>
<span
*ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
<span *ngIf="numbers?.datasetsLinkedSize">
<span
class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
datasets</span> interlinked with publications</span>
<span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
research data</span>
</span>
<span
*ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
<span *ngIf="numbers?.softwareLinkedSize">
<span
class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
research
software</span> interlinked with publications</span>
<span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
research software</span>
</span>
<span *ngIf="type=='persistent'">
<span>Persistent identifiers and registries</span>
</span>
<span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
<span
class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
funders</span><span> and</span>
<span
class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
funded grants</span>
</span>
</h1>
<div
class="uk-grid-small uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
uk-grid uk-height-match="target: > div > .logo2; row: false;">
<div
*ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
</div>
</div>
</li>
</ng-container>
</ul>
</div>
<div class="uk-hidden@s">
<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"><span class="visually-hidden">next</span></a>
</div>
<div class="uk-visible@s">
<a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
<a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"><span class="visually-hidden">next</span></a>
</div>
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
</div>
</div>
<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">
<span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">
Deposit in a repository of your choice. Select an OpenAIRE <br> compatible repository (2.0 +) so that your research is linked <br> to your funding information. Use Zenodo, a catch-all <br> repository hosted by CERN to deposit all your research <br> results (publications, data, software, etc.)
</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>
<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">
<span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
</h3>
<p class="uk-text-large">
Connect all your research. If you can't find your research <br> results in OpenAIRE, don't worry! Use our Link Out service, <br> that reaches out to many external sources via APIs, to <br> connect your research results and claim them to your <br> project.
</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-remove-top">Lorem ipsum lorem<span class="uk-text-primary">.</span></h2>
</div>
<div id="js-sticky-parallax-images-all" style="min-height: 300vh">
<div class="uk-visible@m uk-height-viewport explore-dark-logo-background uk-sticky" uk-sticky="bottom: #js-sticky-parallax-images-all; target-offset: true">
<div class="uk-grid" uk-grid>
<div class="uk-width-expand uk-first-column">
<div class="explore-dark-logo-background">
<div uk-parallax="target: #js-sticky-parallax-images-all;">
<!-- TODO: change ipad image -->
<img class="uk-position-center-left" src="assets/explore-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">
</div>
</div>
</div>
<div class="uk-inline uk-width-expand">
<div>
<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 class="uk-hidden@m uk-height-viewport explore-dark-logo-background" uk-sticky="bottom: #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: 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>
</div>
<div class="uk-section">
<div class="uk-container uk-container-large">
<h2 class="uk-h1 uk-text-center">
New sources in <br> OpenAIRE<span class="uk-text-primary">.</span>
</h2>
<div class="cards-on-slider">
TODO: content?
</div>
</div>
</div>
<div class="uk-background-muted">
<div class="graph-background uk-background-top-right">
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<h2>Extracted Metadata <br> Combined.</h2>
<div>
The OpenAIRE Research Graph is one of the largest open scholarly record <br> collections worldwide, key in fostering Open Science and establishing its <br> practices in the daily research activities. Conceived as a public and <br> transparent good, populated out of data sources trusted by scientists, the <br> Graph aims at bringing discovery, monitoring, and assessment of science <br> back in the hands of the scientific community.
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large">
<!-- TODO: add href links -->
<div class="uk-width-1-2@m uk-margin-auto uk-margin-medium-top">
<div>
You can provide feedback via Trello or via opening a ticket in the OpenAIRE Helpdesk under the category OpenAIRE Services with the subject “OpenAIRE Research Graph: ”. The graph can be explored and tested via this portal or via data dumps made available in Zenodo.org.
</div>
<div>
Find information about the OpenAIRE Research Graph, how to test it and contribute to improving it on our blog. You can also write to Paolo Manghi, the OpenAIRE Technical Director, for additional details.
</div>
<div class="uk-margin-medium-top uk-flex uk-flex-middle uk-flex-between uk-text-uppercase">
<a href="" class="">Instructions on providing feedback</a>
<a href="">Go to Trello</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section">
<div class="uk-container uk-container-large">
<h2 class="uk-h1">
Have more questions<span class="uk-text-primary">?</span>
</h2>
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<a href="https://www.openaire.eu/os-primers" target="_blank">Open science policies and how to align</a>
</div>
<div>
<a href="https://www.openaire.eu/rdm-handbook" target="_blank">How to manage your data in the open science era</a>
</div>
<div>
<a href="https://www.openaire.eu/guides" target="_blank">how to use OpenAIRE to best serve your needs</a>
</div>
<div>
<a href="https://www.openaire.eu/frontpage/webinars" target="_blank">Training material on a variety of related topics</a>
</div>
</div>
</div>
</div>
<!-- <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
[texts]="pageContents['left']"></helper> -->
<div class="uk-section">
<div class="uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h3 class="uk-h2">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h3>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
routerLink="/contact-us">Contact us</a>
</div>
</div>
</div>
<!-- Redesign END -->
<ng-template #_logos let-logo="logo" let-class="class">
<div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
<div class="">
<img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
</div>
</div>
</ng-template>
<div class="image-front-topbar mainPageSearchForm">
<div class="uk-section">
<div class="uk-container uk-container-large uk-flex uk-flex-center">
<div class="uk-width-xlarge@l uk-width-large uk-child-width-1-1">
<advanced-search-input [class.uk-hidden]="entities.disableSelect" (searchEmitter)="goTo(true)">
<entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event)"
[onChangeNavigate]="false"></entities-selection>
<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
</div>
</div>
<div class="uk-margin-medium">
<div class="uk-container uk-container-large explore-numbers uk-margin-medium-bottom">
<div class="search_box_bg uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<div class="uk-grid uk-margin uk-margin-bottom uk-width-xxlarge uk-margin-auto">
<div class="uk-width-expand uk-padding-remove">
<div uk-slider="autoplay: false; autoplay-interval: 2500" class="uk-margin-top">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
<ng-container *ngFor="let type of getKeys(logos)">
<li *ngFor="let range of createRange(logos[type].length) let j=index"
class="uk-width-1-1 home-logo">
<h1 class="uk-text-center uk-margin-bottom portal-color uk-h3">
<span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
<span
class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
publications</span><span> deduplicated</span>
</span>
<span
*ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
<span *ngIf="numbers?.datasetsLinkedSize">
<span
class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
datasets</span> interlinked with publications</span>
<span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
research data</span>
</span>
<span
*ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
<span *ngIf="numbers?.softwareLinkedSize">
<span
class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
research
software</span> interlinked with publications</span>
<span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
research software</span>
</span>
<span *ngIf="type=='persistent'">
<span>Persistent identifiers and registries</span>
</span>
<span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
<span
class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
funders</span><span> and</span>
<span
class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
funded grants</span>
</span>
</h1>
<div
class="uk-grid-small uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
uk-grid uk-height-match="target: > div > .logo2; row: false;">
<div
*ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
<ng-container
*ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
</div>
</div>
</li>
</ng-container>
</ul>
</div>
<div class="uk-hidden@s">
<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"><span class="visually-hidden">next</span></a>
</div>
<div class="uk-visible@s">
<a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
uk-slider-item="previous"><span class="visually-hidden">prev</span></a>
<a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"><span class="visually-hidden">next</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
</div>
</div>
</div>
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
class="uk-section graph-background">
<div class="uk-container">
<div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
<div class="uk-flex-last@m">
<div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
<helper [texts]="pageContents['right']"></helper>
</div>
<div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
<span>Read more<span class="space" uk-icon="chevron-down"></span></span>
</div>
<div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
<span>Read less<span class="space" uk-icon="chevron-up"></span></span>
</div>
</div>
<div class="uk-flex uk-flex-bottom">
<div class="uk-width-1-3 uk-width-1-2@m">
<img src="assets/explore-assets/graph.png" alt="graph image" loading="lazy">
</div>
<div class="uk-padding uk-width-1-2">
<img src="assets/common-assets/logo-large-graph.png" alt="graph image" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
class="graph-background-bottom uk-section uk-padding-remove-vertical uk-background-cover"></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
<div class="uk-section uk-padding-remove-bottom">
<h3 class="uk-text-center uk-margin-medium-bottom">Our growing <span class="uk-text-bold">Community</span></h3>
<numbers #numbersComponent [defaultInit]="false" backgroundClass="numbers-background"
(results)="numbers = $event"></numbers>
</div>
<div class="uk-section uk-padding-large uk-grid uk-child-width-1-2@m uk-child-width-1-1@s uk-margin-large-top uk-margin-large-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<h3 class="uk-text-center uk-margin-medium-bottom">Start browsing by subject</h3>
</div>
<div>
<div class="uk-text-center uk-padding-large uk-padding-remove-vertical ">
<span *ngFor="let subject of specialSubjects " class=" uk-text-capitalize uk-link-reset uk-button uk-button-default uk-button-secondary uk-margin-small-right uk-margin-small-bottom">
<a [routerLink]=" properties.searchLinkToAdvancedResults"
[queryParams]="getSubjectParameter(subject.value) ">{{subject.label}}</a></span>
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
[texts]="pageContents['left']"></helper>
<div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<other-portals portal="explore" [properties]="properties"></other-portals>
</div>
</div>