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

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

This commit is contained in:
Alex Martzios 2022-04-27 15:36:42 +03:00
parent 104256eefb
commit ddb189303b
4 changed files with 186 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,37 @@
background-image: url('~src/assets/explore-assets/home/graph.svg'); background-image: url('~src/assets/explore-assets/home/graph.svg');
background-repeat: no-repeat; 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){ @media only screen and (min-width: 960px){
.explore-dark-logo-background { .explore-dark-logo-background {
background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg"); background-image: url("~src/assets/explore-assets/home/explore-dark-logo.svg");

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

@ -10,7 +10,6 @@
<div> <div>
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden home-background"> <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"> <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-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5 uk-margin-large-bottom"> <div class="uk-width-3-5 uk-margin-large-bottom">
<h1 class="uk-h2" uk-scrollspy-class> <h1 class="uk-h2" uk-scrollspy-class>
@ -28,6 +27,27 @@
[onChangeNavigate]="false"></entities-selection> [onChangeNavigate]="false"></entities-selection>
<div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div> <div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input> </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 *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
<div class="uk-padding-small"> <div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections> <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
@ -36,97 +56,104 @@
</div> </div>
</div> </div>
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class> <div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative"> <div class="uk-position-relative">
<img style="padding: 1px" src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 300"> <img src="assets/explore-assets/home/explore.jpg" uk-parallax="y: 300">
<img class="uk-position-top-left" src="assets/explore-assets/home/mask.svg"> <img class="uk-position-bottom-left" src="assets/explore-assets/home/mask.svg">
</div> </div>
</div> </div>
</div> </div>
<!-- logos carousel --> </div>
<div class="uk-padding-large uk-padding-remove-horizontal uk-margin-large-top uk-margin-large-bottom"> </div>
<div uk-slider="autoplay: false; autoplay-interval: 2500" class=""> <div class="uk-section uk-section-large uk-padding-remove-top home-background">
<div class="uk-position-relative"> <div class="uk-container uk-container-large uk-width-1-2">
<div class="uk-slider-container"> <div uk-slider="autoplay: true; autoplay-interval: 2500" class="">
<ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;"> <div class="uk-position-relative">
<ng-container *ngFor="let type of getKeys(logos)"> <div class="uk-slider-container">
<li *ngFor="let range of createRange(logos[type].length) let j=index" <ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
class="uk-width-1-1 home-logo"> <ng-container *ngFor="let type of getKeys(logos)">
<h1 class="uk-text-center uk-margin-bottom portal-color uk-h3"> <li *ngFor="let range of createRange(logos[type].length) let j=index"
<span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize"> 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 <span
class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}} class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
publications</span><span> deduplicated</span> research
</span> software</span> interlinked with publications</span>
<span <span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
*ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)"> class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
<span *ngIf="numbers?.datasetsLinkedSize"> research software</span>
<span </span>
class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}} <span *ngIf="type=='persistent'">
datasets</span> interlinked with publications</span> <span>Persistent identifiers and registries</span>
<span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize" </span>
class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}} <span *ngIf="type=='funder' && showProjects && numbers?.fundersSize && numbers?.projectsSize">
research data</span> <span
</span> class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
<span funders</span><span> and</span>
*ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)"> <span
<span *ngIf="numbers?.softwareLinkedSize"> class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
<span funded grants</span>
class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}} </span>
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 <div
class="uk-grid-small uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center" *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
uk-grid uk-height-match="target: > div > .logo2; row: false;"> <ng-container
<div *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
*ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index"> <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>
*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> </div>
</li> </div>
</ng-container> </li>
</ul> </ng-container>
</div> </ul>
</div>
<div class="uk-hidden@s"> <div class="uk-hidden@s">
<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
uk-slider-item="previous"><span class="visually-hidden">prev</span></a> uk-slider-item="previous">
<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next <span class="visually-hidden">prev</span>
uk-slider-item="next"><span class="visually-hidden">next</span></a> </a>
</div> <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"> <div class="uk-visible@s">
<a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous <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> uk-slider-item="previous">
<a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next <span class="visually-hidden">prev</span>
uk-slider-item="next"><span class="visually-hidden">next</span></a> </a>
</div> <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>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" </div>
[texts]="pageContents['top']"></helper> </div>
</div>
</div>
<ng-template #scrolling_text let-position_class="position_class"> <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"> <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"> <div class="uk-width-1-1">
<h2 class="uk-h1 uk-margin-remove-top">Lorem ipsum lorem<span class="uk-text-primary">.</span></h2> <h2 class="uk-h1 uk-margin-remove-top">Lorem ipsum lorem<span class="uk-text-primary">.</span></h2>
</div> </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-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-grid" uk-grid>
<div class="uk-width-expand uk-first-column"> <div class="uk-width-expand uk-first-column">
@ -197,16 +224,17 @@
</div> </div>
</div> </div>
<div class="uk-section"> <!-- Not yet! -->
<!-- <div class="uk-section">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<h2 class="uk-h1 uk-text-center"> <h2 class="uk-h1 uk-text-center">
New sources in <br> OpenAIRE<span class="uk-text-primary">.</span> New sources in <br> OpenAIRE<span class="uk-text-primary">.</span>
</h2> </h2>
<div class="cards-on-slider"> <div class="cards-on-slider">
TODO: content? TODO: Repositories content
</div> </div>
</div> </div>
</div> </div> -->
<div class="uk-background-muted"> <div class="uk-background-muted">
<div class="graph-background uk-background-top-right"> <div class="graph-background uk-background-top-right">
@ -226,46 +254,69 @@
</div> </div>
<div class="uk-section uk-padding-remove-top"> <div class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large"> <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 uk-text-small">
<div class="uk-width-1-2@m uk-margin-auto uk-margin-medium-top">
<div> <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>
<div> <div class="uk-margin-top">
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. 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>
<div class="uk-margin-medium-top uk-flex uk-flex-middle uk-flex-between uk-text-uppercase"> <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="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="">Go to Trello</a> 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>
</div> </div>
</div> </div>
<div class="uk-section"> <div class="uk-section uk-section-large">
<div class="uk-container uk-container-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> Have more questions<span class="uk-text-primary">?</span>
</h2> </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> <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>
<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>
<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>
<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>
</div> </div>
</div> </div>
<!-- <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
[texts]="pageContents['left']"></helper> -->
<div class="uk-section"> <div class="uk-section">
<div class="uk-container uk-container-large uk-margin-large-bottom uk-text-center"> <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> Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h3> </h3>
<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom" <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> </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 *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
<div class=""> <div class="">
<img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px"> <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"> <div class="uk-container uk-container-large">
<other-portals portal="explore" [properties]="properties"></other-portals> <other-portals portal="explore" [properties]="properties"></other-portals>
</div> </div>
</div> </div> -->

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

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

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 8b7143c8cb05552d097211ab0dddb9bdbd4ce384 Subproject commit fc2fbb5ba008712b856a60d28e341dc1475fab80