Move 'sorting' and 'results per page' options before 'paging' in simple search, advanced search and search table view pages.

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

searchPages/searchUtils/advancedSearchPage.component.html

@@ -41,11 +41,11 @@
             <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">
-                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl"  [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"   ></search-paging>
+                <div class="uk-grid uk-margin-top uk-margin-bottom">
-                <div class="uk-grid uk-margin-bottom">
                   <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
                   <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
                 </div>
+                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl"  [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"   ></search-paging>
               </div>
 
               <search-download class="uk-width-1-1@s uk-hidden@m" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
@@ -63,11 +63,11 @@
               </div>
 
               <div  class="uk-align-center uk-margin-remove-bottom">
-                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl"  [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"   ></search-paging>
+                <div class="uk-grid uk-margin-top uk-margin-bottom">
-                <div class="uk-grid uk-margin-bottom">
                   <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
                   <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
                 </div>
+                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results" [(baseUrl)] = "searchUtils.baseUrl"  [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues"   ></search-paging>
               </div>
 
               <a *ngIf="properties.showLastIndexInformationLink" class="last_index_info uk-button-text"

searchPages/searchUtils/searchPage.component.html

@@ -144,13 +144,13 @@
             <!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->
               <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">
-                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
+                <div class="uk-grid uk-margin-top uk-margin-bottom">
-                <div class="uk-grid uk-margin-bottom">
                   <!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(searchUtils)] = "searchUtils" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-results-per-page> -->
                   <!-- <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(searchUtils)] = "searchUtils" [(sortBy)]="sortBy" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-sorting> -->
                   <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
                   <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
                 </div>
+                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
               </div>
  <!-- *ngIf="tableViewLink || searchUtils.totalResults <= csvLimit"  -->
               <!-- <div  class="uk-width-1-1@s uk-hidden@m">
@@ -178,14 +178,14 @@
               </div>
 
               <div  class="uk-align-center uk-margin-remove-bottom">
-                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
+                <div class="uk-grid uk-margin-top uk-margin-bottom">
-                <div class="uk-grid uk-margin-bottom">
                   <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
                   <!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1"></search-results-per-page> -->
                   <!--[(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"-->
                   <!-- <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(searchUtils)] = "searchUtils" [(sortBy)]="sortBy" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-sorting> -->
                   <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
                 </div>
+                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils" [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
               </div>
 
               <a *ngIf="properties.showLastIndexInformationLink" class="last_index_info uk-button-text"

searchPages/searchUtils/searchPageTableView.component.html

@@ -152,7 +152,10 @@
           <div class="uk-width-expand@m uk-width-1-1@s uk-first-column custom-dataTable-content" >
             <div *ngIf="openaireLink"> <a class="uk-margin-top   uk-button uk-button-text"  [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
             <div *ngIf="searchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
-              <div class="searchPaging uk-panel uk-margin-top uk-grid">
+              <div class="uk-margin-top uk-margin-bottom">
+                <search-results-per-page class="uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
+              </div>
+              <div class="searchPaging uk-panel uk-margin-top uk-margin-bottom uk-grid">
                 <span class="uk-width-1-1@s uk-width-1-2@m">
                   {{searchUtils.totalResults | number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages()) | number}}
                 </span>
@@ -160,9 +163,6 @@
                   <paging-no-load [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="searchUtils.size" (pageChange)="goTo($event.value, false)"></paging-no-load>
                 </span>
               </div>
-              <div class="uk-margin-bottom">
-                <search-results-per-page class="uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
-              </div>
             </div>
 
             <!-- <div *ngIf="searchViewLink" class="uk-width-1-1@s uk-hidden@m">
@@ -266,6 +266,9 @@
             </div>
 
             <div *ngIf="searchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">
+              <div class="uk-margin-top uk-margin-bottom">
+                <search-results-per-page class="uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
+              </div>
               <div class="searchPaging uk-panel uk-margin-top uk-grid">
                 <span class="uk-width-1-1@s uk-width-1-2@m">
                   {{searchUtils.totalResults | number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages()) | number}}
@@ -274,9 +277,6 @@
                   <paging-no-load [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [size]="searchUtils.size" (pageChange)="goTo($event.value, false)"></paging-no-load>
                 </span>
               </div>
-              <div class="uk-margin-bottom">
-                <search-results-per-page class="uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
-              </div>
             </div>
 
             <a *ngIf="properties.showLastIndexInformationLink" class="last_index_info uk-button-text"

searchPages/searchUtils/searchPaging.component.ts

@@ -5,7 +5,7 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
 @Component({
     selector: 'search-paging',
     template: `
-    <div class= "searchPaging uk-panel uk-margin-top uk-grid">
+    <div class= "searchPaging uk-panel uk-margin-top uk-margin-bottom uk-grid">
       <div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0">
         {{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}}
       </div>