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

190 lines
10 KiB
HTML
Raw Normal View History

<div class="image-front-topbar">
<div class="uk-section mainPageSearchForm">
<div class="uk-container">
<div class="search_box_bg uk-flex uk-flex-center">
<div>
<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)" [customFilter]="customFilter"
></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]="getQueryParamsForAdvancedSearch('result')"
>Research
outcomes</a></li>
<li *ngIf="showProjects"><a
[routerLink]="properties.searchLinkToAdvancedProjects"
[queryParams]="getQueryParamsForAdvancedSearch('project')">
Projects</a></li>
<li *ngIf="showDataProviders"><a
[routerLink]="properties.searchLinkToAdvancedDataProviders"
[queryParams]="getQueryParamsForAdvancedSearch('datasource')">
Content providers</a></li>
<li *ngIf="showOrganizations"><a
[routerLink]="properties.searchLinkToAdvancedOrganizations"
[queryParams]="getQueryParamsForAdvancedSearch('organization')">
Organizations</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section graph-background" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
<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">
<div class="uk-h3">{{aggregator.graphSectionTitle}}</div>
<p [innerHtml]="aggregator.graphSectionText">
</p>
</div>
<div *ngIf="aggregator.graphSectionText">
<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>
<div class="uk-flex uk-flex-bottom">
<div class="uk-width-1-3 uk-width-1-2@m">
<img src="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>
<!-- Funders Cards -->
2022-02-18 15:58:47 +01:00
<ng-container *ngIf="this.customFilter && this.customFilter.valueId == 'CA'">
<div *ngIf=" funders.length" class="uk-section uk-padding-remove-bottom" style="background: linear-gradient(180deg, #FAFAFA 50%, #FFFFFF 55%);">
<h3 class="uk-text-center uk-margin-medium-bottom">Our Canadian <span class="uk-text-bold">Funders</span></h3>
<!-- TODO: individual component -->
<div class="uk-section uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-3" uk-grid uk-height-match="target: > div > .uk-card">
<div *ngFor="let funder of funders">
<div [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-card uk-card-default uk-card-body uk-text-center uk-link">
<div class="uk-margin-bottom">
<img *ngIf="funder.logo" src={{funder.logo}} style="max-height: 80px;">
</div>
<div class="uk-margin-bottom">
<div class="uk-text-large">{{funder.name}}</div>
</div>
<div class="uk-margin-bottom">
<h5 class="uk-text-bold uk-margin-remove uk-link number">{{funder.publications | number}}</h5> research outcomes found
</div>
<div>
<h5 class="uk-text-bold uk-margin-remove uk-link number">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5> Open Access
</div>
</div>
</div>
</div>
</div>
</div>
2022-02-18 15:58:47 +01:00
</ng-container>
<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"></numbers>
</div>
2022-02-18 15:58:47 +01:00
<div class="uk-section" *ngIf="isRouteAvailable('participate/deposit/learn-how') || isRouteAvailable('participate/claim')">
<div class="uk-padding uk-padding-remove-horizontal">
<div class="uk-container uk-container-small">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-1-1@m uk-first-column">
<div
class="uk-margin uk-text-center uk-child-width-1-1 uk-grid-match uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-2@l uk-grid"
id="page#8" uk-grid="" uk-height-match="target: .target">
2022-02-18 15:58:47 +01:00
<div class="uk-first-column" *ngIf="isRouteAvailable('participate/deposit/learn-how')">
<div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
<div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
src="assets/share.svg"></div>
<div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Deposit</span> your research
</div>
<div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
<div class="uk-margin-left uk-margin-right">Deposit in a repository of your choice.<br>
Select an OpenAIRE compatible<br>
repository (2.0 +) so that your research is linked to your funding information. Use Zenodo, a
catch-all repository hosted by CERN to deposit all your research results (publications, data,
software, etc.)
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/deposit/learn-how" type="submit">Deposit </a></div>
</div>
2022-02-18 15:58:47 +01:00
<div *ngIf=" isRouteAvailable('participate/claim')">
<div class="el-item uk-card uk-card-default uk-card-medium uk-card-body">
<div class="uk-text-center target"><img alt="Share" class="uk-width-1-3@m uk-width-small"
src="assets/link.svg"></div>
<div class="el-content uk-margin uk-text-large"><span class="uk-text-bold">Link</span> your work</div>
<div class="uk-margin-small-top uk-text-left card-text uk-flex uk-flex-center">
<div class="uk-margin-left uk-margin-right">Connect all your research.<br>
If you can't find your research results in OpenAIRE, don't worry! Use our Link Out service , that
reaches out to many<br>
external sources via APIs, to connect<br>
your research results and claim them to your project.
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/claim" type="submit">Link </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2021-12-03 17:04:39 +01:00
<!--<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>-->