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

<ng-template #_logos let-logo="logo" let-class="class">
  <div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
    <div class="">
      <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo">
    </div>
  </div>
</ng-template>
<div class="image-front-topbar mainPageSearchForm">
  <div class="uk-section">
    <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)"
                ></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]="{qf:true, q: keyword, op: 'and'}"
                    >Research
                      outcomes</a></li>
                    <li *ngIf="showProjects"><a
                        [routerLink]="properties.searchLinkToAdvancedProjects"
                        [queryParams]="{q: keyword, op: 'and'}">
                      Projects</a></li>
                    <li *ngIf="showDataProviders"><a
                        [routerLink]="properties.searchLinkToAdvancedDataProviders"
                        [queryParams]="{q: keyword, op: 'and'}">
                      Content providers</a></li>
                    <li *ngIf="showOrganizations"><a
                        [routerLink]="properties.searchLinkToAdvancedOrganizations"
                        [queryParams]="{q: keyword, op: 'and'}">
                      Organizations</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="uk-margin-medium">
      <div class="uk-container uk-container-large explore-numbers uk-margin-medium-bottom">
        <div class="search_box_bg uk-grid uk-grid-stack" uk-grid="">
          <div class="uk-width-1-1@m uk-first-column">
            <div class="uk-grid uk-margin uk-margin-bottom uk-width-xxlarge uk-margin-auto">
              <div class="uk-width-expand uk-padding-remove">

                <div uk-slider="autoplay: true; autoplay-interval: 2500" class="uk-margin-top">
                  <div class="uk-position-relative">
                    <div class="uk-slider-container">
                      <ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
                        <ng-container *ngFor="let type of getKeys(logos)">
                          <li *ngFor="let range of createRange(logos[type].length) let j=index"
                              class="uk-width-1-1 home-logo">
                            <h1 class="uk-text-center uk-margin-bottom portal-color uk-h3">
                                <span *ngIf="type=='publication' && showPublications && publicationsSize">
                                  <span class="uk-text-bold">{{publicationsSize.number|number}}{{publicationsSize.size}}
                                    publications</span><span> deduplicated</span>
                                </span>
                              <span *ngIf="type=='dataset' && showDatasets && (datasetsLinkedSize ||datasetsSize)">
                                  <span *ngIf="datasetsLinkedSize">
                                       <span
                                           class="uk-text-bold">{{datasetsLinkedSize.number|number}}{{datasetsLinkedSize.size}}
                                         datasets</span> interlinked with publications</span>
                                  <span *ngIf="datasetsSize && !datasetsLinkedSize"
                                        class="uk-text-bold">{{datasetsSize.number|number}}{{datasetsSize.size}}
                                    research data</span>
                                </span>
                              <span *ngIf="type=='software' && showSoftware && (softwareSize ||softwareLinkedSize)">
                                  <span *ngIf="softwareLinkedSize">
                                        <span class="uk-text-bold
                                    ">{{softwareLinkedSize.number|number}}{{softwareLinkedSize.size}} research
                                          software</span>  interlinked with publications</span>
                                  <span *ngIf="softwareSize && !softwareLinkedSize"
                                        class="uk-text-bold">{{softwareSize.number|number}}{{softwareSize.size}}
                                    research software</span>
                                </span>
                              <span *ngIf="type=='persistent'">
                                  <span>Persistent identifiers and registries</span>
                                </span>
                              <span *ngIf="type=='funder' && showProjects && fundersSize">
                                  <span class="uk-text-bold">{{fundersSize.number|number}}{{fundersSize.size}}
                                    funders</span><span> and</span>
                                  <span class="uk-text-bold"> {{projectsSize.number|number}}{{projectsSize.size}} funded grants</span>
                                </span>

                            </h1>
                            <div
                                class="uk-grid-small  uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center"
                                uk-grid uk-height-match="target: > div > .logo2; row: false;">
                              <div
                                  *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
                                <ng-container
                                    *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
                                <ng-container
                                    *ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
                              </div>
                            </div>
                          </li>
                        </ng-container>
                      </ul>
                    </div>

                    <div class="uk-hidden@s">
                      <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
                         uk-slider-item="previous"></a>
                      <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
                         uk-slider-item="next"></a>
                    </div>

                    <div class="uk-visible@s">
                      <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
                         uk-slider-item="previous"></a>
                      <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
                         uk-slider-item="next"></a>
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </div>
      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
              [texts]="pageContents['top']"></helper>
    </div>
  </div>
</div>
<!--<schema2jsonld [URL]="properties.baseLink"-->
<!--               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-explore.png'" type="home"-->
<!--               name="OpenAIRE Explore"></schema2jsonld>-->
<div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
     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">
            <helper [texts]="pageContents['right']"></helper>
          </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/explore-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 *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
     class="graph-background-bottom uk-section uk-padding-remove-vertical uk-background-cover"></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
        [texts]="pageContents['bottom']"></helper>
<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-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>