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

finish explore homepage - need to check some things with aristotelis and remove old code frm comments

Browse Source
angular-12
Alex Martzios 2 years ago
parent 104256eefb
commit ddb189303b
4 changed files with 186 additions and 105 deletions
Show Stats Download Patch File Download Diff File

31
explore/src/app/home/home.component.css
Unescape Escape View File

@ -5,6 +5,37 @@
background-image: url('~src/assets/explore-assets/home/graph.svg');
background-repeat: no-repeat;
}
.link-actions img {
width: 17px;
}
.trello-button-blue {
background-color: #0076BA;
color: white;
}
.trello-button-blue:hover {
background-color: var(--secondary-color);
}
.home-logo img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition-duration: 0.3s;
}
.home-logo:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
transition-duration: 0.3s;
}
#custom-links icon {
color: var(--primary-color);
/* transition: all 0.3s ease; */
}
#custom-links a:hover .link-title {
color: var(--secondary-color);
}
/* #custom-links a:hover icon {
transform: translateX(7px);
transition: all 0.3s ease;
} */
@media only screen and (min-width: 960px){
.explore-dark-logo-background {
background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");

257
explore/src/app/home/home.component.html
Unescape Escape View File

@ -10,7 +10,6 @@
<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>
@ -28,6 +27,27 @@
[onChangeNavigate]="false"></entities-selection>
<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div class="uk-padding-small uk-flex uk-flex-middle">
<div class="uk-text-bold uk-margin-right">
Try:
</div>
<div class="link-actions uk-flex uk-flex-middle">
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-right"
routerLinkActive="router-link-active" routerLink="/sdg">
<span class="uk-flex uk-flex-middle">
<img src="../../assets/explore-assets/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
<span class="uk-margin-small-left">Browse by SDGs</span>
</span>
</a>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/fos">
<span class="uk-flex uk-flex-middle">
<img src="../../assets/explore-assets/fos-hero-img.svg" alt="FOS logo" loading="lazy">
<span class="uk-margin-small-left">Browse by FOS</span>
</span>
</a>
</div>
</div>
<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>
@ -36,97 +56,104 @@
</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 class="uk-position-relative">
<img src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 300">
<img class="uk-position-bottom-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>
</div>
</div>
<div class="uk-section uk-section-large uk-padding-remove-top home-background">
<div class="uk-container uk-container-large uk-width-1-2">
<div uk-slider="autoplay: true; 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-large-bottom uk-text-primary uk-h4">
<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-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
funded grants</span>
</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>
</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
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>
*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>
</li>
</ng-container>
</ul>
</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-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 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>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
</div>
</div>
</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">
@ -158,7 +185,7 @@
<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 id="js-sticky-parallax-images-all" style="min-height: 200vh">
<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">
@ -197,16 +224,17 @@
</div>
</div>
<div class="uk-section">
<!-- Not yet! -->
<!-- <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?
TODO: Repositories content
</div>
</div>
</div>
</div> -->
<div class="uk-background-muted">
<div class="graph-background uk-background-top-right">
@ -226,46 +254,69 @@
</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 class="uk-width-1-2@m uk-margin-auto uk-margin-medium-top uk-text-small">
<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.
You can provide feedback via <a href="https://trello.com/b/o1tEJ3rN/openaire-research-graph" target="_blank">Trello</a> or via opening a ticket in the <a href="https://www.openaire.eu/support/helpdesk" target="_blank">OpenAIRE Helpdesk</a> 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 <a href="https://zenodo.org/communities/openaire-research-graph?page=1&size=20" target="_blank">Zenodo.org</a>.
</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 class="uk-margin-top">
Find information about the OpenAIRE Research Graph, how to test it and contribute to improving it on our <a href="https://www.openaire.eu/blogs/the-openaire-research-graph" target="_blank">blog</a>. You can also write to <a href="mailto:paolo.manghi@isti.cnr.it">Paolo Manghi</a>, 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>
<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">
Instructions on providing feedback
</a>
<a href="https://trello.com/b/o1tEJ3rN/openaire-research-graph" target="_blank"
class="uk-button trello-button-blue uk-text-uppercase">
<img src="../../assets/explore-assets/trello.svg" alt="Trello logo" loading="lazy" class="uk-margin-small-top uk-margin-small-bottom">
<span class="uk-margin-small-left">Go to Trello</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section">
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large">
<h2 class="uk-h1">
<h2 class="uk-h1 uk-margin-medium-bottom">
Have more questions<span class="uk-text-primary">?</span>
</h2>
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div id="custom-links" class="uk-padding uk-grid uk-child-width-1-2@m uk-text-bold" uk-grid uk-height-match="target: .link-title;">
<div>
<a href="https://www.openaire.eu/os-primers" target="_blank">Open science policies and how to align</a>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://www.openaire.eu/os-primers" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">Open science policies and how to align</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</div>
<div>
<a href="https://www.openaire.eu/rdm-handbook" target="_blank">How to manage your data in the open science era</a>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://www.openaire.eu/rdm-handbook" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">How to manage your data in the open <br> science era</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</div>
<div>
<a href="https://www.openaire.eu/guides" target="_blank">how to use OpenAIRE to best serve your needs</a>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://www.openaire.eu/guides" target="_blank" class="uk-link-reset uk-text-large uk-flex uk-flex-middle uk-flex-between">
<span class="link-title">How to use OpenAIRE to best serve <br> your needs</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</div>
<div>
<a href="https://www.openaire.eu/frontpage/webinars" target="_blank">Training material on a variety of related topics</a>
<div class="uk-width-3-4 uk-margin-auto uk-padding uk-padding-remove-horizontal" style="border-bottom: 1px solid rgba(0,0,0,0.1)">
<a href="https://www.openaire.eu/frontpage/webinars" target="_blank" class="uk-link-reset uk-text-large uk-flex-middle uk-flex uk-flex-between">
<span class="link-title">Training material on a variety of <br> related topics</span>
<icon name="east" ratio="1.5"></icon>
</a>
</div>
</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">
@ -273,7 +324,7 @@
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>
href="https://www.openaire.eu/contact-us" target="_blank">Contact us</a>
</div>
</div>
</div>
@ -282,7 +333,7 @@
<ng-template #_logos let-logo="logo" let-class="class">
<!-- <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">
@ -453,4 +504,4 @@
<div class="uk-container uk-container-large">
<other-portals portal="explore" [properties]="properties"></other-portals>
</div>
</div>
</div> -->

1
explore/src/app/home/home.component.ts
Unescape Escape View File

@ -189,7 +189,6 @@ export class HomeComponent {
private getPageContents() {
this.subs.push(this.helper.getPageHelpContents(this.properties, 'openaire', this._router.url).subscribe(contents => {
console.log(contents);
this.pageContents = contents;
}));
}

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 8b7143c8cb05552d097211ab0dddb9bdbd4ce384
Subproject commit fc2fbb5ba008712b856a60d28e341dc1475fab80
Write Preview
Loading…
Cancel
Save