[Library|Trunk]

Layout Changes according to the new theme (containers margins, header fonts size)

Search: Update search filters layout: don't crop the text with css, but count the characters

LayoutService: create a mock method



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56677 d315682c-612b-4755-9ff5-7f18f6832af3

deposit/depositFirstPage.component.ts

@@ -8,7 +8,7 @@ import {HelperService} from "../utils/helper/helper.service";
 @Component({
   selector: 'deposit-first-page',
   template: `
-    <div class="uk-section uk-margin-top uk-padding-remove-bottom">
+    <div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
       <div class="communityPanelBackground uk-margin-top uk-padding-small">
         <div class="uk-align-center uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
           <div class="uk-text-center font-41">
@@ -59,9 +59,9 @@ import {HelperService} from "../utils/helper/helper.service";
                   </form>
                 </div>
                 <div class="uk-width-1-4 uk-text-right">
-                  <hr class="uk-divider-vertical">
+<!--                  <hr class="uk-divider-vertical">-->
-                  <div>OR</div>
+                  <div class=" uk-margin-top uk-margin-bottom uk-padding-small">OR</div>
-                  <hr class="uk-divider-vertical">
+<!--                  <hr class="uk-divider-vertical">-->
                 </div>
                   
                 <div>
@@ -78,7 +78,7 @@ import {HelperService} from "../utils/helper/helper.service";
     </div>
 
     <div class="uk-section tm-middle uk-container uk-container-large uk-margin-small-top uk-padding-remove-top uk-padding-remove-bottom">
-      <div class="uk-container uk-container-large uk-margin-bottom border-grey uk-margin-medium-top">
+      <div class="uk-container uk-container-large uk-margin-bottom  communityBorder uk-margin-medium-top">
         <div class="uk-grid uk-padding">
           <div class="uk-width-1-2 uk-text-center">
             <div class="uk-margin-top">

deposit/searchDataprovidersToDeposit.component.ts

@@ -16,7 +16,7 @@ import {PiwikService} from "../utils/piwik/piwik.service";
   selector: 'search-dataproviders',
   template: `
 
-    <div class="uk-section uk-margin-top uk-padding-remove-bottom">
+    <div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
       <div class="communityPanelBackground uk-margin-top uk-padding-small">
         <div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
           <ul class="uk-breadcrumb">

landingPages/dataProvider/dataProvider.component.html

@@ -1,8 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle"   >
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <div class="uk-container uk-margin-top datasource">
+      <div class="uk-container datasource">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/dataset/dataset.component.html

@@ -1,7 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle"   >
+
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
-      <div class="uk-container uk-margin-top dataset">
+      <div class="uk-container dataset">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/htmlProjectReport/htmlProjectReport.component.ts

@@ -15,7 +15,7 @@ declare var UIkit: any;
 @Component({
   selector: 'htmlProjectReport',
   template: `
-    <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+    <div id="tm-main" class=" uk-section  uk-padding-remove-top tm-middle">
       <div uk-grid>
         <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
           <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
@@ -27,8 +27,8 @@ declare var UIkit: any;
               class="loading-gif  uk-align-center"></span></div>
 
             <div *ngIf="!showLoading && !warningMessage">
-              <h1 *ngIf="header1">{{header1}}</h1>
+              <div *ngIf="header1" class="uk-h4 uk-text-bold ">{{header1}}</div>
-              <h2 *ngIf="header1 || htmlResult">{{header2}}</h2>
+              <div *ngIf="header1 || htmlResult" class=" ">{{header2}}</div>
 
               <div class="uk-clearfix uk-margin-bottom">
                 <button *ngIf="htmlResult" class="uk-icon-clipboard uk-button uk-button-primary clipBtn uk-float-right"

landingPages/organization/organization.component.html

@@ -1,8 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle"   >
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <div class="uk-container uk-margin-top organization">
+      <div class="uk-container organization">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/orp/orp.component.html

@@ -1,7 +1,7 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle">
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first">
-      <div class="uk-container uk-margin-top orp">
+      <div class="uk-container  orp">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/project/project.component.html

@@ -1,8 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section  uk-padding-remove-top tm-middle"   >
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <div id="project" class="uk-container uk-margin-top project">
+      <div id="project" class="uk-container project">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/publication/publication.component.html

@@ -1,8 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle"   >
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <div class="uk-container uk-margin-top publication">
+      <div class="uk-container publication">
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>
         <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

landingPages/software/software.component.html

@@ -1,8 +1,8 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<div id="tm-main" class=" uk-section  uk-padding-remove-top tm-middle"   >
   <div uk-grid uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
 
-      <div class="uk-container uk-margin-top software">
+<div class="uk-container software">
 
         <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"
              role="alert">{{warningMessage}}</div>

searchPages/searchUtils/advancedSearchForm.component.html

@@ -4,7 +4,7 @@
         {{pageTitle}}
       </div>
       <a  *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink style="z-index:1;"
-         [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted uk-button portal-color uk-text-secondary uk-margin-right ':'uk-float-right uk-button portal-color uk-text-secondary uk-margin-right '" >Simple search
+         [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted  portal-color   uk-margin-right ':'uk-float-right  portal-color   uk-margin-right '" >Simple search
         <!--span class="uk-icon">
         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
       </span-->
@@ -72,7 +72,8 @@
             Please check your dates
           </div>
 
-          <button (click)="queryChanged()"  type="submit" class=" uk-button portal-background-color uk-padding uk-padding-remove-top uk-padding-remove-bottom ">
+          <button (click)="queryChanged()"  type="submit"
+                  class=" uk-button  uk-padding uk-padding-remove-top uk-padding-remove-bottom ">
             <span class="uk-icon" ><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1.5"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
           </button>
         </div>

searchPages/searchUtils/browseStatistic.component.html

@@ -5,7 +5,9 @@
 
         <li *ngFor= "let value of filter.values.slice(0,5)" class= " uk-margin-remove-top"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
           <a class = " filterItem"  [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
-          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
+          <div title = "{{value.name}}">{{_formatName(value)}}  ({{value.number |
+              number}})</div>
+          </a>
         </li>
         <li *ngIf= " filter.values.length > 5  " class= "uk-padding-small-top">
           <a href="#modal-{{filter.filterId}}" uk-toggle class="uk-text-secondary  ">View more <!--span class="uk-text-muted">View more </span>
@@ -55,7 +57,7 @@
             <li *ngIf="filterKeywords(value.name)" ><!--*ngFor= "let value of filter.values"--><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
 
             <a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
-              <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
+              <div title = "{{value.name}}">{{ value.name +' (' +(value.number | number)+')'}}</div></a>
             </li>
           </ng-container>
           </ul>

searchPages/searchUtils/browseStatistic.component.ts

@@ -39,8 +39,14 @@ export class BrowseStatisticComponent {
         return '"'+str+'"';
       }
 
-  private _formatName(value){
+  public _formatName(value){
-    return value.name+" ";//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
+    let maxLineLength = 29;
+    //3 space before number + parenthesis
+    if(value.name.length+value.number.toLocaleString().length +3> maxLineLength){
+      return value.name.substr(0, (maxLineLength - 3 -3 - value.number.toLocaleString().length))+'...';
+    }
+
+    return value.name;
   }
   filterKeywords(value){
     if(this.keyword.length > 0){

searchPages/searchUtils/searchFilter.component.html

@@ -6,43 +6,31 @@
     <div  aria-expanded="false">
       <div [class]="showMoreInline ? '' : 'searchFilterBoxValues' ">
         <div *ngFor = "let value of getSelectedValues(filter,'num')"  class = "uk-animation-fade filterItem">
-          <label>
-            <span class="filterName">
               <div title = "{{value.name}}">
                 <input *ngIf="!filter.valueIsUnique" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
-                <!--             [name]=filter.filterId  value="false"-->
                 <input *ngIf="filter.valueIsUnique" type="radio" (click)="uniqueFilterChange(value)"
                         [name]=filter.filterId checked/>
-                {{' '}}
+                {{' '+_formatName(value)}}
-                {{_formatName(value)}}
+                <span *ngIf = "showResultCount === true" >
-                {{' '}}
+                  {{' ('+(value.number|number)+')'}}</span>
-                <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
               </div>
-            </span>
-          </label>
         </div>
         <!-- <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small"-->
 
         <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem">
-          <label>
-            <span class="filterName">
               <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >
                 <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
                 <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio"  (click)="uniqueFilterChange(value)"
                       [name]=filter.filterId value=false  />
-                {{' '}}
+
-                {{_formatName(value)}}
+                <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
-                {{' '}}
+                 {{' '+ _formatName(value) + ' ('+(value.number|number)+')'}}
-                <span class="filterNumber" *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
-                  ({{value.number|number}})
                 </span>
               </div>
-            </span>
-          </label>
         </div>
 
         <div *ngIf=" addShowMore && showMoreInline && (filter.values.length) > filterValuesNum">
-          <a [class]="(isDisabled)?'uk-disabled uk-link-muted   uk-text-secondary':'  uk-text-secondary'"
+          <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':''"
              [attr.uk-toggle]="'target: #toggle-'+filter.filterId">View
             <span *ngIf="filter.values.length >= 99">more</span>
             <span *ngIf="filter.values.length < 99">all</span>
@@ -62,37 +50,29 @@
                       uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-margin-bottom">
               <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
                 <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">
-                  <label>
+
-                    <span class="filterName">
                       <div title = "{{value.name}}">
                         <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
                         <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
                              [name]=filter.filterId checked/>
-                        {{' '}}
+                        {{' ' + _formatName(value) + ' '}}
-                        {{_formatName(value)}}
-                        {{' '}}
                         <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
                       </div>
-                    </span>
+
-                  </label>
                 </div>
               </ng-container>
               <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
               <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
                 <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">
-                  <label>
+
-                    <span class="filterName">
                       <div title = "{{value.name}}">
                         <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
                         <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio"  (click)="uniqueFilterChange(value)"
                                 [name]=filter.filterId value=false  />
-                        {{' '}}
+                        {{' ' + _formatName(value) + ' '}}
-                        {{_formatName(value)}}
+                        <span   *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
-                        {{' '}}
-                        <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
                       </div>
-                    </span>
+
-                  </label>
                 </div>
               </ng-container>
             </div>
@@ -100,7 +80,7 @@
         </div>
 
         <a *ngIf=" addShowMore && !showMoreInline&& (filter.values.length) > filterValuesNum" (click)="open()"
-          [class]="(isDisabled)?'uk-disabled uk-link-muted   uk-text-secondary':'  uk-text-secondary'">View more
+          [class]="(isDisabled)?'uk-disabled uk-link-muted':''">View more
         </a>
 
 
@@ -124,34 +104,25 @@
                         uk-margin-medium-left uk-margin-medium-right uk-margin-small-top uk-margin-bottom">
               <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
                 <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">
-                  <label>
+                  <div title = "{{value.name}}">
-                    <span class="filterName"><div title = "{{value.name}}">
                         <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
                         <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />
-                        {{' '}}
+                    {{' ' + (value.name) + ' '}}
-                        {{_formatName(value)}}
+                        <span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
-                        {{' '}}
-                        <span class="filterNumber" *ngIf = "showResultCount === true" > {{' '}}({{value.number|number}})</span>
                       </div>
-                    </span>
+
-                  </label>
                  </div>
               </ng-container>
               <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
               <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
                 <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">
-                  <label>
+
-                    <span class="filterName">
                       <div title = "{{value.name}}">
                         <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
                         <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />
-                        {{' '}}
+                        {{' ' + (value.name) + ' '}}
-                        {{_formatName(value)}}
+                        <span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
-                        {{' '}}
-                        <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
                       </div>
-                    </span>
-                  </label>
                </div>
              </ng-container>
             </div>

searchPages/searchUtils/searchFilter.component.ts

@@ -47,8 +47,19 @@ export class SearchFilterComponent {
     public _formatTitle(title,length){
       return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+((length >= 99)?length+"+":length)+")")
     }
-    private _formatName(value){
+    public _formatName(value){
-      return value.name;//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
+      let maxLineLength = 24;
+      //1 space after checkbox
+      //3 space before number + parenthesis
+      if(!this.showResultCount && value.name.length+1 > maxLineLength ){
+        return value.name.substr(0, maxLineLength -3 -1)+'...';
+      }
+      if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
+        return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
+      }
+
+      return value.name;
+      //(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
     }
     // toggleShowAll(){
     //     this.showAll = !this.showAll;
@@ -199,5 +210,15 @@ export class SearchFilterComponent {
   //     }
   //     this.close();
   // }
+  getFilterName(value){
+    let name = value.name +" ("+ value.number.format()+")";
+    console.log(name)
 
+
+    //   <span class="filterName"><div title = "{{value.name}}">
+    // <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
+    //   {{value.name}} </div></span>
+    // <span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number | number}})</span>
+    return name;
+  }
 }

searchPages/searchUtils/searchPage.component.html

@@ -17,7 +17,9 @@
 <!--</div>-->
 
 
-<div [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ? ' image-front-topbar uk-section-default ' : (' uk-section uk-padding-remove-bottom ' + (usedBy == 'deposit' ? ' uk-padding-remove-top ' : ' uk-margin-top '))"
+<div [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
+' image-front-topbar uk-section-default ' : (' uk-section uk-padding-remove-bottom  uk-padding-remove-top ' + (usedBy
+== 'deposit' ? ' uk-padding-remove-top ' : ' '))"
      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">
   <div [class]="' uk-background-norepeat uk-background-bottom-center uk-section uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
           + (usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ? ' searchFormMinHeight uk-padding-remove-bottom ' : ' uk-margin-medium-bottom uk-section-small ')

services/layout.service.ts

@@ -1,9 +1,9 @@
 import {Injectable} from '@angular/core';
-import {Http, Response} from '@angular/http';
 import {HttpClient, HttpErrorResponse} from "@angular/common/http";
-import {Observable, throwError} from 'rxjs';
+import {throwError} from 'rxjs';
 import {CustomOptions} from './servicesUtils/customOptions.class';
 import {catchError} from "rxjs/operators";
+import {CustomizationOptions} from "../../utils/customization/CustomizationOptions";
 
 @Injectable()
 export class LayoutService {
@@ -39,6 +39,12 @@ export class LayoutService {
             //.map(res => res.json())
             .pipe(catchError(this.handleError));
     }
+    mockLayout():any {
+
+
+        return this.http.get("./assets/customizationOptions.json") ;
+
+    }
 
     private handleError(error: HttpErrorResponse) {
         // in a real world app, we may send the error to some remote logging infrastructure

utils/gif-slider/gif-slider.component.ts

@@ -17,7 +17,7 @@ import {Component, Input} from '@angular/core';
             </div>
             <div [ngClass]="(gifRight)?'uk-flex-first':''" class="uk-margin-top">
               <div>
-                <h1 class="uk-text-bold">{{gif.header}}</h1>
+                <div class="uk-text-bold uk-h4">{{gif.header}}</div>
                 <div class="uk-margin-medium"> {{gif.text}}</div>
                 <div *ngIf="link" class="uk-inline">
                   <a class="uk-button portal-button uk-text-uppercase" [routerLink]="route" routerLinkActive="router-link-active">{{linkTitle}}</a>