From 6ea3e7c11f61bb154cfaf283f486d48d35a35105 Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Tue, 24 Mar 2020 15:40:51 +0000
Subject: [PATCH] [Trunk | Library]: 1. rangeFilter.component.html: Disable
 button if form is invalid or not dirty (unchanged). 2. loading.component.ts:
 Added loading gif and <ng-content>. 3. searchResult.component.html: Add class
 "uk-margin-top" in <ul> (in order to align filters and results). 4.
 searchFilter.component.html: [Bug fix] class in <ng-container> does nothing.
 Move class="uk-animation-fade filterItem searchFilterItem uk-text-small" to
 <div> element (in view more). 5. newSearchPage.component.ts: Close offcanvas
 for filters (in small screens) when query changes. 6.
 newSearchPage.component.html: Align filters and results | Use same code for
 filters in all screens (<ng-template #filters_column>).

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58326 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../searchUtils/newSearchPage.component.html  | 371 +++++++++++-------
 .../searchUtils/newSearchPage.component.ts    |  10 +-
 .../searchUtils/searchFilter.component.html   |   6 +-
 .../searchUtils/searchResult.component.html   |   2 +-
 utils/modal/loading.component.ts              |   7 +-
 utils/rangeFilter/rangeFilter.component.html  |   4 +-
 6 files changed, 245 insertions(+), 155 deletions(-)

diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index 47ff0d13..5417998e 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -1,3 +1,69 @@
+<ng-template #filters_column>
+<!--             let-dynamic_content="dynamic_content">-->
+<div  *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top  uk-margin-medium-bottom ">
+  <div  class="uk-grid uk-flex uk-flex-bottom">
+    <h5 class="uk-text-bold">Filters</h5>
+    <a  *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
+      Clear All
+    </a>
+  </div>
+  <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
+    <ng-container *ngIf="selectedRangeFilters > 0">
+      <ng-container *ngFor="let filter of rangeFilters " >
+        <ng-container *ngIf = "filter.selectedFromAndToValues">
+                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
+                          <span class="selectedFilterLabel ">
+                            <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
+                              <span class=" clickable" aria-hidden="true">
+                                <span class="uk-icon">
+                                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
+                                </span>
+                              </span>
+                              <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
+                            </a>
+                          </span>
+                        </span>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngFor="let filter of filters " >
+      <ng-container *ngIf = "filter.countSelectedValues > 0">
+        <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
+              [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
+                        <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
+                        <span class="selectedFilterLabel ">
+                          <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
+                            <span class=" clickable" aria-hidden="true">
+                              <span class="uk-icon">
+                                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
+                              </span>
+                            </span>
+                            <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
+                          </a>
+                        </span>
+                      </span>
+      </ng-container>
+    </ng-container>
+  </div>
+</div>
+<div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">
+  <span class="uk-text-meta">No filters available</span>
+</div>
+<ul *ngIf="!showUnknownFilters"
+    [class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">
+  <ng-container *ngFor="let filter of rangeFilters">
+    <li>
+      <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
+    </li>
+  </ng-container>
+  <ng-container *ngFor="let filter of filters ">
+    <li *ngIf= "filter.values.length >0">
+      <search-filter  [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)"  ></search-filter>
+    </li>
+  </ng-container>
+</ul>
+</ng-template>
+
 
 <div *ngIf="!includeOnlyResultsAndFilter"  [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
     ' image-front-topbar uk-section-default uk-position-relative ' :
@@ -74,10 +140,10 @@
 <!--                </svg>-->
               </a>
 
-              <div id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
+              <div #offcanvas_element id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
                 <div class="uk-offcanvas-bar offcanvas-white">
                   <button class="uk-offcanvas-close" type="button" uk-close></button>
-                  <div   class="uk-width-1-1   uk-margin-small-bottom  uk-margin-top">
+                  <div   class="uk-width-1-1">
 
 <!--                    <span *ngIf="tableViewLink " class="uk-width-expand">-->
 <!--                      <span *ngIf="tableViewLink">-->
@@ -92,86 +158,89 @@
 <!--                                     class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">-->
 <!--                    </search-download>-->
 
-                    <div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-margin-small-bottom">
-<!--                      <div class="uk-grid uk-margin-bottom uk-margin-top">-->
-<!--                        <span class="uk-text-bold uk-text-large">Filters</span>-->
-<!--                        <a  *ngIf="selectedFilters>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">-->
+<!--                    HERE-->
+<!--                    <div *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-margin-top uk-margin-small-bottom">-->
+<!--&lt;!&ndash;                      <div class="uk-grid uk-margin-bottom uk-margin-top">&ndash;&gt;-->
+<!--&lt;!&ndash;                        <span class="uk-text-bold uk-text-large">Filters</span>&ndash;&gt;-->
+<!--&lt;!&ndash;                        <a  *ngIf="selectedFilters>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">&ndash;&gt;-->
+<!--&lt;!&ndash;                          Clear All&ndash;&gt;-->
+<!--&lt;!&ndash;                        </a>&ndash;&gt;-->
+<!--&lt;!&ndash;                      </div>&ndash;&gt;-->
+<!--                      <div class="uk-grid uk-flex uk-flex-bottom">-->
+<!--                        <h5 class="uk-text-bold">Filters</h5>-->
+<!--                        <a  *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">-->
 <!--                          Clear All-->
 <!--                        </a>-->
 <!--                      </div>-->
-                      <div class="uk-grid uk-flex uk-flex-bottom uk-margin-top">
-                        <h5 class="uk-text-bold">Filters</h5>
-                        <a  *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
-                          Clear All
-                        </a>
-                      </div>
-                    </div>
-
-                    <div   *ngIf="selectedRangeFilters > 0 || selectedFilters>0"  class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>
-                      <ng-container *ngIf="selectedRangeFilters > 0">
-                        <ng-container *ngFor="let filter of rangeFilters " >
-                          <ng-container *ngIf = "filter.selectedFromAndToValues">
-                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
-                          <span class="selectedFilterLabel ">
-                            <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
-                              <span class=" clickable" aria-hidden="true">
-                                <span class="uk-icon">
-                                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                                </span>
-                              </span>
-                              <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
-                            </a>
-                          </span>
-                        </span>
-                          </ng-container>
-                        </ng-container>
-                      </ng-container>
-                      <ng-container *ngFor="let filter of filters " >
-                        <ng-container *ngIf = "filter.countSelectedValues > 0">
-
-                          <!--                       <span class="uk-text-bold">{{filter.title}}:</span>-->
-                          <!--                      uk-margin-small-top uk-margin-small-right--> <!-- if no grid on the div above, add it -->
-                          <!--                        uk-label -->
-                          <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
-                                [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
-                            <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
-                            <span class="selectedFilterLabel ">
-                              <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
-                                <span class=" clickable" aria-hidden="true">
-                                  <span class="uk-icon">
-                                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                                  </span>
-                                </span>
-                                <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
-                              </a>
-                            </span>
-                          </span>
-                        </ng-container>
-                      </ng-container>
-
-
-                    </div>
-
-<!--                    <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">-->
-<!--                      <a  *ngIf= "showUnknownFilters" class = "  portal-link" (click) = "clearFilters() " >Try new Query</a>-->
 <!--                    </div>-->
 
+<!--                    <div   *ngIf="selectedRangeFilters > 0 || selectedFilters>0"  class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>-->
+<!--                      <ng-container *ngIf="selectedRangeFilters > 0">-->
+<!--                        <ng-container *ngFor="let filter of rangeFilters " >-->
+<!--                          <ng-container *ngIf = "filter.selectedFromAndToValues">-->
+<!--                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >-->
+<!--                          <span class="selectedFilterLabel ">-->
+<!--                            <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">-->
+<!--                              <span class=" clickable" aria-hidden="true">-->
+<!--                                <span class="uk-icon">-->
+<!--                                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
+<!--                                </span>-->
+<!--                              </span>-->
+<!--                              <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>-->
+<!--                            </a>-->
+<!--                          </span>-->
+<!--                        </span>-->
+<!--                          </ng-container>-->
+<!--                        </ng-container>-->
+<!--                      </ng-container>-->
+<!--                      <ng-container *ngFor="let filter of filters " >-->
+<!--                        <ng-container *ngIf = "filter.countSelectedValues > 0">-->
+
+<!--                          &lt;!&ndash;                       <span class="uk-text-bold">{{filter.title}}:</span>&ndash;&gt;-->
+<!--                          &lt;!&ndash;                      uk-margin-small-top uk-margin-small-right&ndash;&gt; &lt;!&ndash; if no grid on the div above, add it &ndash;&gt;-->
+<!--                          &lt;!&ndash;                        uk-label &ndash;&gt;-->
+<!--                          <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "-->
+<!--                                [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >-->
+<!--                            &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;-->
+<!--                            <span class="selectedFilterLabel ">-->
+<!--                              <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">-->
+<!--                                <span class=" clickable" aria-hidden="true">-->
+<!--                                  <span class="uk-icon">-->
+<!--                                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
+<!--                                  </span>-->
+<!--                                </span>-->
+<!--                                <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>-->
+<!--                              </a>-->
+<!--                            </span>-->
+<!--                          </span>-->
+<!--                        </ng-container>-->
+<!--                      </ng-container>-->
+
+
+<!--                    </div>-->
+
+<!--&lt;!&ndash;                    <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">&ndash;&gt;-->
+<!--&lt;!&ndash;                      <a  *ngIf= "showUnknownFilters" class = "  portal-link" (click) = "clearFilters() " >Try new Query</a>&ndash;&gt;-->
+<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
+
+<!--                    <div *ngIf="filters.length === 0 && searchUtils.keyword.length === 0 && results.length > 0" class="uk-margin-top">-->
+<!--                      <span class="uk-text-meta">No filters available</span>-->
+<!--                    </div>-->
+<!--                    <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">-->
+<!--                      <ng-container *ngFor="let filter of rangeFilters">-->
+<!--                        <li>-->
+<!--                          <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>-->
+<!--                        </li>-->
+<!--                      </ng-container>-->
+<!--                      <ng-container *ngFor="let filter of filters ">-->
+<!--                        <li *ngIf= "filter.values.length >0">-->
+<!--                          <search-filter  [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)"  ></search-filter>-->
+<!--                        </li>-->
+<!--                      </ng-container>-->
+<!--                    </ul>-->
+                    <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
+<!--                    END OF HERE-->
                   </div>
-                  <div *ngIf="filters.length === 0 && searchUtils.keyword.length === 0 && results.length > 0" class="uk-margin-top">
-                    <span class="uk-text-meta">No filters available</span>
-                  </div>
-                  <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">
-                    <ng-container *ngFor="let filter of rangeFilters">
-                      <li>
-                        <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
-                      </li>
-                    </ng-container>
-                    <ng-container *ngFor="let filter of filters ">
-                      <li *ngIf= "filter.values.length >0">
-                        <search-filter  [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)"  ></search-filter>
-                      </li>
-                    </ng-container>
-                  </ul>
                 </div>
               </div>
 
@@ -193,88 +262,96 @@
 <!--                'community' && entityType != 'funder') && usedBy == 'search'"-->
 <!--                               class="uk-width-1-2" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">-->
 <!--              </search-download>-->
-              <div  *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top  uk-margin-small-bottom ">
-                <div  class="uk-grid uk-flex uk-flex-bottom uk-margin-small-top">
-                  <h5 class="uk-text-bold">Filters</h5>
-                  <a  *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
-                    Clear All
-                  </a>
-                </div>
-<!--                uk-grid uk-grid-small" uk-grid-->
-<!--                uk-margin-left-->
-                <div   *ngIf="selectedRangeFilters > 0 || selectedFilters>0"  class="uk-margin-medium-bottom uk-grid uk-grid-small uk-text-small" uk-grid>
-                  <ng-container *ngIf="selectedRangeFilters > 0">
-                    <ng-container *ngFor="let filter of rangeFilters " >
-                      <ng-container *ngIf = "filter.selectedFromAndToValues">
-                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >
-                          <span class="selectedFilterLabel ">
-                            <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
-                              <span class=" clickable" aria-hidden="true">
-                                <span class="uk-icon">
-                                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                                </span>
-                              </span>
-                              <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>
-                            </a>
-                          </span>
-                        </span>
-                      </ng-container>
-                    </ng-container>
-                  </ng-container>
-                  <ng-container *ngFor="let filter of filters " >
-                    <ng-container *ngIf = "filter.countSelectedValues > 0">
 
-                      <!--                       <span class="uk-text-bold">{{filter.title}}:</span>-->
-<!--                      uk-margin-small-top uk-margin-small-right--> <!-- if no grid on the div above, add it -->
-<!--                        uk-label -->
-                      <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
-                            [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
-                        <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
-                        <span class="selectedFilterLabel ">
-                          <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">
-                            <span class=" clickable" aria-hidden="true">
-                              <span class="uk-icon">
-                                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                              </span>
-                            </span>
-                            <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
-                          </a>
-                        </span>
-                      </span>
-                    </ng-container>
-                  </ng-container>
-                </div>
-
-<!--                <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">-->
-<!--                  <a  *ngIf= "showUnknownFilters" class = "  portal-link" (click) = "clearFilters() " >Try new Query</a>-->
+<!--              HERE-->
+<!--              <div  *ngIf="selectedRangeFilters > 0 || selectedFilters > 0" class="uk-width-1-1 uk-margin-top  uk-margin-medium-bottom ">-->
+<!--                <div  class="uk-grid uk-flex uk-flex-bottom">-->
+<!--                  <h5 class="uk-text-bold">Filters</h5>-->
+<!--                  <a  *ngIf="(selectedRangeFilters+selectedFilters)>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">-->
+<!--                    Clear All-->
+<!--                  </a>-->
 <!--                </div>-->
-              </div>
-              <div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">
-                <span class="uk-text-meta">No filters available</span>
-              </div>
-              <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-divider">
-                <ng-container *ngFor="let filter of rangeFilters">
-                  <li>
-                    <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>
-                  </li>
-                </ng-container>
-                <ng-container *ngFor="let filter of filters ">
-                  <li *ngIf= "filter.values.length >0">
-                    <search-filter  [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)"  ></search-filter>
-                  </li>
-                </ng-container>
-              </ul>
+<!--                &lt;!&ndash;                uk-grid uk-grid-small" uk-grid&ndash;&gt;-->
+<!--                &lt;!&ndash;                uk-margin-left&ndash;&gt;-->
+<!--                <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
+<!--                  <ng-container *ngIf="selectedRangeFilters > 0">-->
+<!--                    <ng-container *ngFor="let filter of rangeFilters " >-->
+<!--                      <ng-container *ngIf = "filter.selectedFromAndToValues">-->
+<!--                        <span [title]="'Remove '+ filter.selectedFromAndToValues" (click) = "removeRangeFilter(filter) " >-->
+<!--                          <span class="selectedFilterLabel ">-->
+<!--                            <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">-->
+<!--                              <span class=" clickable" aria-hidden="true">-->
+<!--                                <span class="uk-icon">-->
+<!--                                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
+<!--                                </span>-->
+<!--                              </span>-->
+<!--                              <span class="uk-margin-small-left">{{filter.selectedFromAndToValues}}</span>-->
+<!--                            </a>-->
+<!--                          </span>-->
+<!--                        </span>-->
+<!--                      </ng-container>-->
+<!--                    </ng-container>-->
+<!--                  </ng-container>-->
+<!--                  <ng-container *ngFor="let filter of filters " >-->
+<!--                    <ng-container *ngIf = "filter.countSelectedValues > 0">-->
+
+<!--                      &lt;!&ndash;                       <span class="uk-text-bold">{{filter.title}}:</span>&ndash;&gt;-->
+<!--                      &lt;!&ndash;                      uk-margin-small-top uk-margin-small-right&ndash;&gt; &lt;!&ndash; if no grid on the div above, add it &ndash;&gt;-->
+<!--                      &lt;!&ndash;                        uk-label &ndash;&gt;-->
+<!--                      <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "-->
+<!--                            [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >-->
+<!--                        &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;-->
+<!--                        <span class="selectedFilterLabel ">-->
+<!--                          <a [class]="((disableForms)?'  uk-disabled':'  ')+' uk-link-text '">-->
+<!--                            <span class=" clickable" aria-hidden="true">-->
+<!--                              <span class="uk-icon">-->
+<!--                                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>-->
+<!--                              </span>-->
+<!--                            </span>-->
+<!--                            <span class="uk-margin-small-left" [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>-->
+<!--                          </a>-->
+<!--                        </span>-->
+<!--                      </span>-->
+<!--                    </ng-container>-->
+<!--                  </ng-container>-->
+<!--                </div>-->
+
+<!--                &lt;!&ndash;                <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">&ndash;&gt;-->
+<!--                &lt;!&ndash;                  <a  *ngIf= "showUnknownFilters" class = "  portal-link" (click) = "clearFilters() " >Try new Query</a>&ndash;&gt;-->
+<!--                &lt;!&ndash;                </div>&ndash;&gt;-->
+<!--              </div>-->
+<!--              <div *ngIf="filters.length === 0 && results.length > 0" class="uk-margin-top">-->
+<!--                <span class="uk-text-meta">No filters available</span>-->
+<!--              </div>-->
+<!--              <ul *ngIf="!showUnknownFilters"-->
+<!--                  [class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">-->
+<!--                <ng-container *ngFor="let filter of rangeFilters">-->
+<!--                  <li>-->
+<!--                    <range-filter [isDisabled]="disableForms" [filter]="filter" (onFilterChange)="filterChanged($event)"></range-filter>-->
+<!--                  </li>-->
+<!--                </ng-container>-->
+<!--                <ng-container *ngFor="let filter of filters ">-->
+<!--                  <li *ngIf= "filter.values.length >0">-->
+<!--                    <search-filter  [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)"  ></search-filter>-->
+<!--                  </li>-->
+<!--                </ng-container>-->
+<!--              </ul>-->
+              <!--context: {  dynamic_content: getDynamicContent(share_research_results_type) }">-->
+              <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
+<!--              END OF HERE-->
+
             </div>
             <div class="uk-width-expand@m uk-with-1-1@s">
               <div *ngIf="openaireLink"> <a class="uk-margin-top   uk-button uk-button-text"  [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
               <div  class="uk-align-center uk-margin-remove-bottom">
                 <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
-                      class="uk-grid uk-margin-small-top uk-margin-bottom">
+                      class="uk-grid uk-margin-top uk-margin-bottom">
                   <div class="uk-width-expand@m uk-grid uk-grid-medium uk-margin-small-bottom">
                     <search-results-per-page [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
                     <search-sorting *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
                   </div>
-                  <div class="uk-flex uk-flex-middle uk-width-auto@m uk-margin-small-bottom">
+<!--                  uk-flex uk-flex-middle-->
+                  <div class="uk-width-auto@m uk-margin-small-bottom">
                     <search-download *ngIf= "!showUnknownFilters && searchUtils.totalResults > 0
                                             && ( entityType !='community' && entityType != 'funder') && usedBy == 'search'"
                                      [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index a20f18d7..0878950f 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, Input, Output, ViewChild} from '@angular/core';
 import {Location} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
@@ -19,11 +19,15 @@ import {RefineResultsUtils} from "../../services/servicesUtils/refineResults.cla
 import {RangeFilter} from "../../utils/rangeFilter/rangeFilterHelperClasses.class";
 import {ZenodoInformationClass} from "../../deposit/utils/zenodoInformation.class";
 
+declare var UIkit: any;
+
 @Component({
   selector: 'new-search-page',
   templateUrl: 'newSearchPage.component.html'
 })
 export class NewSearchPageComponent {
+  @ViewChild('offcanvas_element') offcanvasElement: ElementRef;
+
   @Input() piwikSiteId = null;
   @Input() hasPrefix: boolean = true;
   @Input() pageTitle = "";
@@ -194,6 +198,10 @@ export class NewSearchPageComponent {
   }
 
   goTo(page: number = 1) {
+    if(this.offcanvasElement) {
+      UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
+    }
+
     this.searchUtils.page = page;
     this.buildPageURLParameters(this.filters, this.rangeFilters, true);
     this.router.navigate([this.searchUtils.baseUrl], {queryParams: this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)});
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index 821f217c..4e0ccea8 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -111,9 +111,9 @@
 <!--                      </div>-->
 <!--                </div>-->
 <!--              </ng-container>-->
-              <ng-container *ngFor="let value of sort(filter.values)"
-                   class="uk-animation-fade filterItem searchFilterItem uk-text-small">
-                <div *ngIf="filterKeywords(value.name)" title = "{{value.name}}">
+              <ng-container *ngFor="let value of sort(filter.values)">
+                <div *ngIf="filterKeywords(value.name)" title = "{{value.name}}"
+                     class="uk-animation-fade filterItem searchFilterItem uk-text-small">
                   <label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
                     <input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
                            [disabled]="isDisabled || (showResultCount && value.number === 0)"
diff --git a/searchPages/searchUtils/searchResult.component.html b/searchPages/searchUtils/searchResult.component.html
index 03a74efe..c6a38c53 100644
--- a/searchPages/searchUtils/searchResult.component.html
+++ b/searchPages/searchUtils/searchResult.component.html
@@ -1,4 +1,4 @@
-<ul [class]="'uk-list uk-margin '+custom_class">
+<ul [class]="'uk-list uk-margin uk-margin-top '+custom_class">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of results" class="uk-animation-fade">
     <div class="uk-card uk-card-default uk-padding uk-card-hover">
diff --git a/utils/modal/loading.component.ts b/utils/modal/loading.component.ts
index 6aecd0c3..81c84c23 100644
--- a/utils/modal/loading.component.ts
+++ b/utils/modal/loading.component.ts
@@ -11,7 +11,12 @@ import {Component, ViewEncapsulation, ComponentRef, ElementRef, Input, EventEmit
         <div class="uk-modal-body">
           <div >
           <h4 class="text-center" >{{message}}</h4>
-          <div class="uk-modal-spinner"></div>
+<!--          <div class="uk-spinner"></div>-->
+            <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+              <span class="loading-gif  uk-align-center" ></span>
+            </div>
+            <ng-content></ng-content>
+
           </div>
         </div>
 
diff --git a/utils/rangeFilter/rangeFilter.component.html b/utils/rangeFilter/rangeFilter.component.html
index 4fcecb9a..aa959f03 100644
--- a/utils/rangeFilter/rangeFilter.component.html
+++ b/utils/rangeFilter/rangeFilter.component.html
@@ -17,9 +17,9 @@
                    [(ngModel)]="filter.selectedToValue" name="yearTo" #yearTo="ngModel" inValidYear
                    placeholder="e.g. 2020"/>
             <button type="submit" (click)="yearChanged()"
-                    [ngStyle]="{'cursor': rangeForm.valid ? 'pointer' : 'not-allowed'}"
+                    [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
                     class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
-                    [disabled]="rangeForm.invalid">
+                    [disabled]="rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
               <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>