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

314 lines
18 KiB
HTML

<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">
</div>
</div>
</ng-template>
<div class="image-front-topbar mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-fixed">
<div class="uk-position-relative uk-panel">
<div class="uk-container">
<div class="tm-header-placeholder" style="height: 84px;"></div>
<div class="search_box_bg uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<div data-id="page#4">
<form class="uk-margin">
<div class="uk-grid uk-margin-small-left">
<div class="uk-margin-small-top uk-padding-remove-left">
<entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
[properties]="properties" [onChangeNavigate]="false"
(selectionChange)="entityChanged($event)"
></entities-selection>
</div>
<div class=" uk-padding-remove-left uk-margin-small-top">
<div class="uk-inline">
<a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" (click)="keyword = ''"
uk-icon="icon: close"></a>
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
placeholder="Search in OpenAIRE for scholarly works"
[(ngModel)]="keyword"
name="keyword">
</div>
<div class=" quickSelectionsBox uk-width-xlarge@l uk-width-large@m uk-width-medium">
<quick-selections *ngIf="selectedEntity == 'result'" [resultTypes]="resultTypes"
[quickFilter]="resultsQuickFilter"
[properties]="properties">
</quick-selections>
</div>
</div>
<div class="uk-padding-remove-left uk-margin-small-top">
<button (click)="goTo(true)" type="submit"
class="uk-button portal-button uk-text-bold uk-padding uk-padding-remove-vertical uk-margin-small-left">
Search
</button>
<div class="uk-margin-small-top uk-margin-left">
<!-- (click)="goTo(false)"-->
<a *ngIf="selectedEntity!='all'" (click)="goTo(false)" class="portal-link">Advanced Search</a>
<a *ngIf="selectedEntity=='all'" class="portal-link ">Advanced Search</a></div>
<div *ngIf="selectedEntity=='all'" uk-dropdown class="uk-dropdown default-dropdown">
<ul class="uk-list uk-margin-remove-bottom">
<li *ngIf="showSoftware || showPublications || showOrp || showDatasets"><a
[routerLink]="properties.searchLinkToAdvancedResults"
[queryParams]="{qf:true, q: keyword, op: 'and'}"
>Research
outcomes</a></li>
<li *ngIf="showProjects"><a
[routerLink]="properties.searchLinkToAdvancedProjects"
[queryParams]="{q: keyword, op: 'and'}">
Projects</a></li>
<li *ngIf="showDataProviders"><a
[routerLink]="properties.searchLinkToAdvancedDataProviders"
[queryParams]="{q: keyword, op: 'and'}">
Content providers</a></li>
<li *ngIf="showOrganizations"><a
[routerLink]="properties.searchLinkToAdvancedOrganizations"
[queryParams]="{q: keyword, op: 'and'}">
Organizations</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</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: true; 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 && publicationsSize">
<span class="uk-text-bold">{{publicationsSize.number|number}}{{publicationsSize.size}}
publications</span><span> deduplicated</span>
</span>
<span *ngIf="type=='dataset' && showDatasets && (datasetsLinkedSize ||datasetsSize)">
<span *ngIf="datasetsLinkedSize">
<span
class="uk-text-bold">{{datasetsLinkedSize.number|number}}{{datasetsLinkedSize.size}}
datasets</span> interlinked with publications</span>
<span *ngIf="datasetsSize && !datasetsLinkedSize"
class="uk-text-bold">{{datasetsSize.number|number}}{{datasetsSize.size}}
research data</span>
</span>
<span *ngIf="type=='software' && showSoftware && (softwareSize ||softwareLinkedSize)">
<span *ngIf="softwareLinkedSize">
<span class="uk-text-bold
">{{softwareLinkedSize.number|number}}{{softwareLinkedSize.size}} research
software</span> interlinked with publications</span>
<span *ngIf="softwareSize && !softwareLinkedSize"
class="uk-text-bold">{{softwareSize.number|number}}{{softwareSize.size}}
research software</span>
</span>
<span *ngIf="type=='persistent'">
<span>Persistent identifiers and registries</span>
</span>
<span *ngIf="type=='funder' && showProjects && fundersSize">
<span class="uk-text-bold">{{fundersSize.number|number}}{{fundersSize.size}}
funders</span><span> and</span>
<span class="uk-text-bold"> {{projectsSize.number|number}}{{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"></a>
<a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"></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"></a>
<a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
uk-slider-item="next"></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>
<!--<schema2jsonld [URL]="properties.baseLink"-->
<!-- [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-explore.png'" type="home"-->
<!-- name="OpenAIRE Explore"></schema2jsonld>-->
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
class="uk-section graph-background uk-margin-top">
<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.svg">
</div>
<div class="uk-padding uk-width-1-2">
<img src="assets/common-assets/logo-large-graph.png">
</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-default uk-section uk-padding-remove-bottom">
<div class="uk-container uk-text-center uk-margin-medium-bottom">
<div class="uk-margin-medium uk-flex-center">
<div class="uk-first-column">
<div class="uk-panel">
<h3 class="uk-margin uk-text-center">
Our growing <span class="uk-text-bold">Community</span>
</h3>
<div class="uk-margin-medium-top">
<div class="uk-grid uk-child-width-1-3@m">
<p *ngIf="showProjects && fundersSize">
<span class="portal-color emphasis">
<span class="uk-text-bold"> {{fundersSize.number|number}}</span>
<span class="portal-color uk-h3">{{fundersSize.size}}</span>
</span>
<br>
<span class="uk-text-uppercase uk-text-large">Funders</span>
</p>
<p *ngIf="showDataProviders && datasourcesSize" class="">
<span class="portal-color emphasis">
<span class="uk-text-bold"> {{datasourcesSize.number|number}}</span>
<span class="portal-color uk-h3">{{datasourcesSize.size}}</span>
</span>
<br>
<span class="uk-text-uppercase uk-text-large">Content providers</span>
</p>
<p *ngIf="showProjects && projectsSize">
<span class="portal-color emphasis">
<span class="uk-text-bold"> {{projectsSize.number|number}}</span>
<span class="portal-color uk-h3">{{projectsSize.size}}</span>
</span>
<br>
<span class="uk-text-uppercase uk-text-large">Projects</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section-default uk-section numbers-background uk-padding-remove-top">
<div class="uk-container uk-margin-medium-top">
<div class="uk-grid uk-flex uk-flex-center">
<div class="uk-margin-large-right">
<div *ngIf="showPublications && publicationsSize" class="uk-margin-medium-bottom">
<p>
<span class="emphasis">{{publicationsSize.count|number}} </span><br>
<span class="uk-icon uk-text-uppercase uk-float-left">
<svg height="20" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect
style="stroke: var(--portal-main-color);" fill="none" height="16" stroke="#000" width="12" x="3.5"
y="2.5"></rect><polyline style="stroke: var(--portal-main-color);" fill="none"
points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg>
publications
</span>
</p>
</div>
<div *ngIf="showSoftware && softwareSize" class="uk-margin-medium-bottom">
<p>
<span class="emphasis">{{softwareSize.count|number}} </span><br>
<span class="uk-icon uk-text-uppercase uk-float-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="cog"><circle
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="9.997" cy="10"
r="3.31"></circle><path style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
software
</span>
</p>
</div>
</div>
<div class="">
<div *ngIf="showDatasets && datasetsSize" class="uk-margin-medium-bottom">
<p>
<span class="emphasis">{{datasetsSize.count|number}} </span><br>
<span class="uk-icon uk-text-uppercase uk-float-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="database"><ellipse
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5"
ry="3.14"></ellipse><path style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg>
research data
</span>
</p>
</div>
<div *ngIf="showOrp && otherSize" class="uk-margin-medium-bottom">
<p>
<span class="emphasis">{{otherSize.count|number}} </span><br>
<span class="uk-icon uk-text-uppercase uk-float-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="world"><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" d="M1,10.5 L19,10.5"></path><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" d="M2.35,15.5 L17.65,15.5"></path><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" d="M2.35,5.5 L17.523,5.5"></path><path
style="stroke: var(--portal-main-color);" fill="none" stroke="#000"
d="M10,19.46 L9.98,19.46 C7.31,17.33 5.61,14.141 5.61,10.58 C5.61,7.02 7.33,3.83 10,1.7 C10.01,1.7 9.99,1.7 10,1.7 L10,1.7 C12.67,3.83 14.4,7.02 14.4,10.58 C14.4,14.141 12.67,17.33 10,19.46 L10,19.46 L10,19.46 L10,19.46 Z"></path><circle
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" cx="10" cy="10.5" r="9"></circle></svg>
other research products
</span>
</p>
</div>
</div>
</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>