From 245cb0768c796293e9ce8521bf4aa18fc7d31922 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Fri, 23 Oct 2020 18:20:06 +0000
Subject: [PATCH] [Explore | Trunk]: Fix image-front-bar in explore

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@59683 d315682c-612b-4755-9ff5-7f18f6832af3
---
 explore/src/app/home/home.component.html | 228 +++++++++++------------
 1 file changed, 110 insertions(+), 118 deletions(-)

diff --git a/explore/src/app/home/home.component.html b/explore/src/app/home/home.component.html
index 3ffb216e..9a1ddecf 100644
--- a/explore/src/app/home/home.component.html
+++ b/explore/src/app/home/home.component.html
@@ -5,102 +5,95 @@
     </div>
   </div>
 </ng-template>
-<div class="image-front-topbar  uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
-     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
-     tm-header-transparent="light" tm-header-transparent-placeholder="">
-  <!--  style=" min-height: calc(7.89999px + 60vh);"-->
-  <div
-      class=" mainPageSearchForm uk-background-norepeat uk-background-cover uk-background-fixed uk-section uk-padding-remove-bottom">
-    <!-- uk-height-viewport="offset-top: true;offset-bottom: 20"> -->
-    <div class="uk-position-cover" style="/*background-color: rgba(70, 68, 68, 0.24);*/"></div>
-    <div class="uk-position-relative uk-panel">
-      <div class="uk-container uk-margin-medium">
-        <div class="tm-header-placeholder uk-margin-medium" 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 uk-margin-top ">
-                <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 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=" 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 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>
-              </form>
-            </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>
+    <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">
+                <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="type=='dataset' && showDatasets && (datasetsLinkedSize ||datasetsSize)">
                                   <span *ngIf="datasetsLinkedSize">
                                        <span
                                            class="uk-text-bold">{{datasetsLinkedSize.number|number}}{{datasetsLinkedSize.size}}
@@ -109,7 +102,7 @@
                                         class="uk-text-bold">{{datasetsSize.number|number}}{{datasetsSize.size}}
                                     research data</span>
                                 </span>
-                                <span *ngIf="type=='software' && showSoftware && (softwareSize ||softwareLinkedSize)">
+                              <span *ngIf="type=='software' && showSoftware && (softwareSize ||softwareLinkedSize)">
                                   <span *ngIf="softwareLinkedSize">
                                         <span class="uk-text-bold
                                     ">{{softwareLinkedSize.number|number}}{{softwareLinkedSize.size}} research
@@ -118,57 +111,56 @@
                                         class="uk-text-bold">{{softwareSize.number|number}}{{softwareSize.size}}
                                     research software</span>
                                 </span>
-                                <span *ngIf="type=='persistent'">
+                              <span *ngIf="type=='persistent'">
                                   <span>Persistent identifiers and registries</span>
                                 </span>
-                                <span *ngIf="type=='funder' && showProjects && fundersSize">
+                              <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>
+                            </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
-                                  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>
+                                  *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>
-                            </li>
-                          </ng-container>
-                        </ul>
-                      </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-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 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>
+      <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+              [texts]="pageContents['top']"></helper>
     </div>
   </div>
 </div>