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

<div class="image-front-topbar">
<!--  <div class="uk-section mainPageSearchForm">
    <div class="">
      <div class="search_box_bg ">
        <div id="searchForm" class="uk-grid  uk-flex uk-flex-center">
          <div id="searchImage" class="uk-margin-small-top "></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"
                                    [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">
                  &lt;!&ndash;                        (click)="goTo(false)"&ndash;&gt;
                  <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 class="uk-section uk-margin-large-left uk-padding-remove-bottom uk-grd uk-flex uk-overflow-hidden home-background">
<!--    <div id="searchImage" class="uk-margin-medium-top uk-margin-small-right "></div>-->
    <div class="uk-grid uk-width-1-1 uk-margin-bottom uk-height-medium">
      <div class="uk-width-1-1 uk-width-auto@m uk-margin-medium-top"><div id="searchImage"></div></div>
      <div class="uk-width-expand search_box_bg" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">

          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-5@m" uk-scrollspy-class>
            <advanced-search-input (searchEmitter)="goTo(true)">
              <entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
                                  (selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
                                  [onChangeNavigate]="false"></entities-selection>
              <div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
            </advanced-search-input>

            <div *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
              <div class="uk-padding-small">
                <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
              </div>
            </div>
          </div>
        </div>
        </div>

  </div>
</div>
<div *ngIf="aggregatorId == 'eosc'" class="uk-grid  uk-child-width-1-1@s">
  <div class="uk-width-expand">
    <div class="uk-margin-large-left">
      <div class=" ">
        <span class=" uk-h1">Welcome to  EOSC Explore
      </span>
      <span class=" uk-h5"><br>The in-context discovery portal to the research map defined by the EOSC Research Graph.
      </span>
      </div>
      <div class="uk-margin-large-top uk-text-large">The EOSC Explore supports discovery of research products and services onboarded in the EOSC Exchange in the wider context of scientific research outcomes, research funding, and research organization. The EOSC Research Graph, powered by the OpenAIRE Research Graph, provides links from products and services to funders, projects, organizations, and authors, collects and infers SDGs subjects, communities, many more. The portal exploits the EOSC Interoperability Framework to identify relationships between research products in the graph and EOSC Services in the EOSC Marketplace, to facilitate and enable composability of resources.  </div>
    </div>
  </div>
  <img
    class="uk-width-large@m uk-width-1-1@s" 
    src="https://marketplace.eosc-portal.eu/packs/media/images/gfx_whole_illustation_desktop-fc94d4f7e15455d1785ef4793e1573fb.png">
  
  
</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>
<ng-container *ngIf="this.customFilter && this.customFilter.valueId == 'CA'">
  <!-- Funders Cards -->
  <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 " [class.uk-hidden]="!( this.customFilter && 
this.customFilter.valueId == 'CA')">
  <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>-->