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

<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 -->
<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>
</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>
<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">
            <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>

            <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>

<!--<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>-->