aggregator/src/app/home/home.component.html

123 lines
6.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div>
<div class="uk-section uk-padding-remove-bottom uk-overflow-hidden">
<div class="uk-container uk-container-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-flex-middle" uk-grid>
<div class="uk-width-3-5@m uk-margin-large-bottom">
<h1 class="uk-h2 uk-width-1-2@m" uk-scrollspy-class>
Discover open linked research<span class="uk-text-primary">.</span>
</h1>
<numbers #numbersComponent [defaultInit]="false"></numbers>
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-4@xl">
<advanced-search-input #advanced (searchEmitter)="goTo(true)">
<entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
(selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
[onChangeNavigate]="false" class="uk-width-2-5"></entities-selection>
<div class="uk-width-expand" input #input placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
</div>
</div>
</div>
<div class="uk-padding-small uk-margin-small-top">
<div class="uk-text-meta">
Try browsing by:
</div>
<div class="link-actions uk-flex uk-flex-column uk-flex-top uk-margin-small-top">
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-small-bottom"
routerLinkActive="router-link-active" routerLink="/sdgs">
<span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/sdg/sdg-dot-img.svg" alt="SDGs logo" loading="lazy">
<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span class="uk-text-lowercase">s</span>)</span>
</span>
</a>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/fields-of-science">
<span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/fos/fos-icon.svg" alt="FOS logo" loading="lazy">
<span class="uk-margin-small-left">Fields of Science (FoS)</span>
</span>
</a>
</div>
</div>
</div>
<div class="uk-visible@m uk-width-expand" uk-scrollspy-class>
<div class="uk-position-relative">
<img src="assets/aggregator-assets/home/canada.png" uk-parallax="y: 500">
<img class="uk-position-bottom-left" src="assets/aggregator-assets/home/mask.svg">
</div>
</div>
</div>
</div>
</div>
<div class="uk-background-muted" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<div style="max-width: 600px;">
<h2 class="uk-margin-small-top">{{aggregator.graphSectionTitle}}<span class="text-graph">.</span></h2>
<p [innerHtml]="aggregator.graphSectionText"></p>
</div>
</div>
<div class="uk-position-relative">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
</div>
</div>
</div>
</div>
<ng-container *ngIf="this.customFilter && this.customFilter.valueId == 'CA'">
<div *ngIf="funders.length" class="uk-section uk-section-large">
<h2 class="uk-heading-large uk-text-center uk-width-1-2@m uk-margin-auto">Our Canadian Funders<span class="uk-text-primary">.</span></h2>
<div class="uk-section uk-container uk-container-large">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3 uk-flex-center" uk-grid uk-height-match="target: .logo, .title, .outcomes, .percentage">
<div *ngFor="let funder of funders">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-height-1-1 uk-link-reset uk-display-block">
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-text-center funder">
<img *ngIf="funder.logo" src={{funder.logo}} alt="{{funder.name}}" class="logo" style="max-height: 60px;">
<div class="uk-margin-top uk-margin-bottom title">{{funder.name}}</div>
<div class="outcomes">
<h5 class="uk-margin-remove">{{funder.publications | number}}</h5>
<span>Research Outcomes Found</span>
</div>
<div class="uk-margin-top percentage">
<h5 class="uk-margin-remove">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5>
<span>Open Access</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</ng-container>
<div class="uk-section uk-section-large uk-padding-remove-top uk-container uk-container-large uk-margin-large-top">
<h2 class="uk-h1">Share your research<span class="uk-text-primary">.</span></h2>
<div class="uk-grid uk-child-width-1-2@m uk-margin-large-top" uk-grid>
<div>
<div class="uk-text-center uk-margin-auto" style="max-width:420px;">
<img src="assets/aggregator-assets/home/linking-home-img.svg" alt="Linking">
<h5>Link your work.</h5>
<div>
Connect all your research. If you cant find your research results in OpenAIRE, dont worry! Use our Link Out service , that reaches out to many external sources via APIs, to connect your research results and claim them to your project.
</div>
<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/participate/claim">
Learn More
</a>
</div>
</div>
<div>
<div class="uk-text-center uk-margin-auto" style="max-width:420px;">
<img src="assets/aggregator-assets/home/deposit-home-img.svg" alt="Deposit">
<h5>Deposit your research.</h5>
<div>
Whether its publications, data or software, select an OpenAIRE compatible repository and share using community standards. Alternatively use Zenodo, a catch-all repository hosted by CERN. All results will be indexed, discoverable and accessible via Canada Explore.
</div>
<a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/participate/deposit/learn-how">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>