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 uk-background-norepeat uk-background-cover uk-background-fixed">
  <div class="uk-position-relative uk-panel">
    <div class="uk-container">
      <div class="tm-header-placeholder" style="height: 84px;"></div>
      <div class="search_box_bg uk-grid-large uk-flex-middle uk-grid uk-grid-stack" uk-grid="">
        <div class="uk-width-1-1@m uk-first-column">
          <div data-id="page#4">
            <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>
    <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 uk-margin-top">
  <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-child-width-1-3@m">
              <div *ngIf="fundersSize">
                <h3 class="portal-color">
                  <span class="uk-text-bold number"> {{fundersSize.number|number}}</span>{{fundersSize.size}}
                </h3>
                <span class="uk-text-uppercase uk-text-large">Funders</span>
              </div>
              <div *ngIf="datasourcesSize">
                <h3 class="portal-color">
                  <span class="uk-text-bold number"> {{datasourcesSize.number|number}}</span>{{datasourcesSize.size}}
                </h3>
                <span class="uk-text-uppercase uk-text-large">Content providers</span>
              </div>
              <div *ngIf="projectsSize">
                <h3 class="portal-color">
                  <span class="uk-text-bold number"> {{projectsSize.number|number}}</span>{{projectsSize.size}}
                </h3>
                <span class="uk-text-uppercase uk-text-large">Projects</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="numbers-background">
    <div class="uk-container uk-section">
      <div class="uk-grid uk-margin-auto-left uk-margin-auto-right uk-grid-large uk-child-width-1-2@m" uk-grid>
        <div *ngIf="publicationsSize || softwareSize || datasetsSize"
             class="uk-margin-medium-bottom uk-flex uk-flex-center">
          <div>
            <div *ngIf="publicationsSize">
              <div class="number uk-text-bold uk-margin-bottom">{{publicationsSize.count|number}} </div>
              <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 *ngIf="softwareSize" class="uk-visible@m">
              <div
                  class="number uk-text-bold uk-margin-medium-top uk-margin-bottom">{{softwareSize.count|number}} </div>
              <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 *ngIf="datasetsSize" class="uk-hidden@m">
              <div
                  class="number uk-text-bold uk-margin-medium-top uk-margin-bottom">{{datasetsSize.count|number}} </div>
              <div class="uk-text-uppercase uk-flex uk-flex-middle">
                <icon name="database" ratio="1.5" [flex]="true" class="uk-margin-right"
                      customClass="uk-portal-color"></icon>
                <span>research data</span>
              </div>
            </div>
          </div>
        </div>
        <div *ngIf="softwareSize || datasetsSize || otherSize"
             class="uk-margin-medium-bottom uk-flex uk-flex-center">
          <div>
            <div *ngIf="softwareSize" class="uk-hidden@m">
              <div class="number uk-text-bold uk-margin-bottom">{{softwareSize.count|number}} </div>
              <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 *ngIf="datasetsSize" class="uk-visible@m">
              <div class="number uk-text-bold uk-margin-bottom">{{datasetsSize.count|number}} </div>
              <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 *ngIf="otherSize">
              <div class="number uk-text-bold uk-margin-medium-top uk-margin-bottom">{{otherSize.count|number}} </div>
              <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 class="uk-hidden@m">other research<br>products</span>
                <span class="uk-visible@m">other research products</span>
              </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>