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">
  <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">Lorem ipsum dolor sit amet</div>

          <p>The <a class="graph-color" href="https://graph.openaire.eu" target="blank">OpenAIRE Research Graph</a>
            ... lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
          </p>

        </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/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 class="uk-section" style="background: linear-gradient(180deg, #FAFAFA 50%, #FFFFFF 50%);">
  <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">
              <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>
              <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>
<div class="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-large-top uk-container uk-margin-bottom uk-text-center">
            <div class="uk-grid uk-flex uk-flex-center">
              <div *ngIf="fundersSize" class="uk-width-1-3@m">
                <h3>
                  <a [routerLink]="properties.searchLinkToProjects" class="uk-text-bold number">
                    {{fundersSize.number|number}}<span class="number-size">{{fundersSize.size}}</span>
                  </a>
                </h3>
                <div class="uk-text-uppercase uk-text-large">Funders</div>
              </div>
              <div *ngIf="datasourcesSize" class="uk-width-1-3@m">
                <h3>
                  <a [routerLink]="properties.searchLinkToDataProviders" class="uk-text-bold number">
                    {{datasourcesSize.number|number}}<span class="number-size">{{datasourcesSize.size}}</span>
                  </a>
                </h3>
                <div class="uk-text-uppercase uk-text-large">Content providers</div>
              </div>
              <div *ngIf="projectsSize" class="uk-width-1-3@m">
                <h3>
                  <a [routerLink]="properties.searchLinkToProjects" class="uk-text-bold number">
                    {{projectsSize.number|number}}<span class="number-size">{{projectsSize.size}}</span>
                  </a>
                </h3>
                <div class="uk-text-uppercase uk-text-large">Projects</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="numbers-background uk-section">
    <div class="uk-container">
      <div class="uk-grid uk-margin-auto-left uk-margin-auto-right uk-grid-large uk-flex uk-flex-center" uk-grid>
        <div *ngIf="publicationsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
          <div class="number-width">
            <a class="number uk-text-bold uk-margin-bottom" [routerLink]="properties.searchLinkToResults"
               [queryParams]="{type: 'publications', qf: false}">
              {{publicationsSize.count|number}} </a>
            <div class="uk-text-uppercase uk-flex uk-flex-middle">
              <icon name="book" ratio="1.5" [flex]="true" class="uk-margin-right" customClass="portal-color"></icon>
              <span>publications</span>
            </div>
          </div>
        </div>
        <div *ngIf="datasetsSize" class="uk-width-1-2@m uk-flex uk-flex-center">
          <div class="number-width">
            <a class="number uk-text-bold uk-margin-bottom"
               [routerLink]="properties.searchLinkToResults"
               [queryParams]="{type: 'datasets', qf: false}">{{datasetsSize.count|number}} </a>

            <div class="uk-text-uppercase uk-flex uk-flex-middle">
              <icon name="database" ratio="1.5" [flex]="true" class="uk-margin-right"
                    customClass="portal-color"></icon>
              <span>research data</span>
            </div>
          </div>
        </div>
        <div *ngIf="softwareSize" class="uk-width-1-2@m uk-flex uk-flex-center">
          <div class="number-width">
            <a class="number uk-text-bold uk-margin-bottom" [routerLink]="properties.searchLinkToResults"
               [queryParams]="{type: 'software', qf: false}">
              {{softwareSize.count|number}} </a>
            <div class="uk-text-uppercase uk-flex uk-flex-middle">
              <icon name="cog" ratio="1.5" [flex]="true" class="uk-margin-right" customClass="portal-color"></icon>
              <span>software</span>
            </div>
          </div>
        </div>
        <div *ngIf="otherSize" class="uk-width-1-2@m uk-flex uk-flex-center">
          <div class="number-width">
            <a class="number uk-text-bold  uk-margin-bottom" [routerLink]="properties.searchLinkToResults"
               [queryParams]="{type: 'other', qf: false}">{{otherSize.count|number}} </a>
            <div class="uk-text-uppercase uk-flex uk-flex-middle">
              <icon name="earth" ratio="1.5" [flex]="true" class="uk-margin-right" customClass="portal-color"></icon>
              <span>other research products</span>
            </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>-->