From dfd58762170aaf144599b815e7367d13312a73f8 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 5 Apr 2022 15:26:26 +0300
Subject: [PATCH] new inputs for search page and other overall tweaks

---
 dashboard/page/pages.component.html           | 85 ++++++++----------
 .../role-users/role-users.component.html      | 17 ++--
 .../searchUtils/newSearchPage.component.html  | 90 ++++++++++---------
 .../searchUtils/newSearchPage.component.ts    |  9 ++
 .../searchUtils/newSearchPage.module.ts       |  7 +-
 .../searchUtils/searchFilter.component.html   |  6 +-
 .../searchUtils/searchFilter.module.ts        |  4 +-
 .../searchResultsPerPage.component.ts         | 35 --------
 .../searchResultsPerPage.module.ts            | 24 -----
 .../searchUtils/searchSorting.component.ts    | 41 ++++-----
 .../searchUtils/searchSorting.module.ts       |  4 +-
 .../result-preview.component.html             |  2 +-
 12 files changed, 134 insertions(+), 190 deletions(-)
 delete mode 100644 searchPages/searchUtils/searchResultsPerPage.component.ts
 delete mode 100644 searchPages/searchUtils/searchResultsPerPage.module.ts

diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html
index c6b3f199..3bc85bf2 100644
--- a/dashboard/page/pages.component.html
+++ b/dashboard/page/pages.component.html
@@ -30,14 +30,14 @@
 						class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid"
 						uk-grid>
 					<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
-							 placeholder="Search page"
-							 [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
-							 [bordered]="true" colorClass="uk-text-secondary"
-							 class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
+							placeholder="Search page"
+							[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+							[bordered]="true" colorClass="uk-text-secondary"
+							class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
 	
 					<div *ngIf="isPortalAdministrator">
 						<a (click)="newPage()"
-							 class="uk-flex uk-flex-middle uk-text-uppercase">
+							class="uk-flex uk-flex-middle uk-text-uppercase">
 							<button class="large uk-icon-button uk-button-secondary">
 								<icon name="add"></icon>
 							</button>
@@ -49,10 +49,10 @@
     </div>
 		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding uk-padding-remove-top">
 			<div 
-					 class="uk-display-inline"
-					 [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
-					 title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
-																									 [ngModel]="getSelectedPages().length ==checkboxes.length"/>
+					class="uk-display-inline"
+					[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
+					title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
+																									[ngModel]="getSelectedPages().length ==checkboxes.length"/>
 				<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
 													{{getSelectedPages().length}} pages selected </span>
 				<a class="uk-margin-left">Actions</a>
@@ -68,7 +68,7 @@
 						</a>
 						</li>
 						<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-																								 (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
+																								(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
 					</ul>
 				</div>
 			</div>
@@ -79,7 +79,7 @@
           <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
             <div class="uk-grid uk-width-expand" uk-grid>
               <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
-                                   name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
+																	name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
               </div>
               <div class="uk-width-expand">
                 <div class="title uk-margin-medium-bottom">Name</div>
@@ -102,17 +102,17 @@
                 <div class="title uk-margin-medium-bottom">Help texts</div>
                 <div class=" uk-margin-small-bottom">
                   <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
-                     class="helpContents"
-                     [queryParams]="{pageId: check.page._id}"
-                     routerLink="../helptexts">
+										class="helpContents"
+										[queryParams]="{pageId: check.page._id}"
+										routerLink="../helptexts">
                     Manage page help texts
                     <span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
                   </a>
                 </div>
                 <div>
                   <a *ngIf="pageWithDivIds.includes(check.page._id)"
-                     [queryParams]="{ pageId: check.page._id}"
-                     routerLink="../classContents">Manage class help texts
+										[queryParams]="{ pageId: check.page._id}"
+										routerLink="../classContents">Manage class help texts
                     <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
                   </a>
                 </div>
@@ -147,51 +147,42 @@
 
       </ul>
       <div *ngIf="checkboxes.length == 0"
-           class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
+					class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
         <div>No pages found</div>
       </div>
     </div>
   </div>
 </div>
 <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
-             [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
+            [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
   <form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
-    <div dashboard-input [formInput]="pageForm.get('route')"
-         type="text" label="Page route" placeholder="Write a route">
-    </div>
-    <div dashboard-input [formInput]="pageForm.get('name')"
-         type="text" placeholder="Write a name"
-         label="Page Name">
-    </div>
+    <div input placeholder="Route" [formInput]="pageForm.get('route')"></div>
+    <div input placeholder="Name" [formInput]="pageForm.get('name')"></div>
 		<ng-container *ngIf="isPortalAdministrator">
-			<div dashboard-input [formInput]="pageForm.get('type')"
-					 type="select" placeholder="Choose a page Type"
-					 label="Type" [options]="typeOptions">
-			</div>
-			<div dashboard-input [formInput]="pageForm.get('entities')" placeholder="Add an entity"
-					 type="chips" [options]="allEntities" label="Entities">
-			</div>
-			<div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
-					 [formInput]="pageForm.get('portalType')" [options]="portalUtils.portalTypes">
-			</div>
+			<div input placeholder="Type" [formInput]="pageForm.get('type')"
+				type="select" [options]="typeOptions"></div>
+			<div input placeholder="Add an entity" [formInput]="pageForm.get('entities')"
+				type="chips" [options]="allEntities"></div>
+			<div input placeholder="Choose a type" [formInput]="pageForm.get('portalType')"
+				type="select" [options]="portalUtils.portalTypes"></div>
 			<div class="form-group">
 				<div class="uk-form-label uk-text-bold uk-margin-small-bottom"> Select if this page have helptext at:</div>
 				<div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
-					<div dashboard-input [formInput]="pageForm.get('top')"
-							 type="checkbox"
-							 label="Top">
+					<div>
+						<label class="uk-margin-small-right">Top</label>
+						<input type="checkbox" class="uk-checkbox" formControlName="top">
 					</div>
-					<div dashboard-input [formInput]="pageForm.get('right')"
-							 type="checkbox"
-							 label="Right">
+					<div>
+						<label class="uk-margin-small-right">Right</label>
+						<input type="checkbox" class="uk-checkbox" formControlName="right">
 					</div>
-					<div dashboard-input [formInput]="pageForm.get('bottom')"
-							 type="checkbox"
-							 label="Bottom">
+					<div>
+						<label class="uk-margin-small-right">Bottom</label>
+						<input type="checkbox" class="uk-checkbox" formControlName="bottom">
 					</div>
-					<div dashboard-input [formInput]="pageForm.get('left')"
-							 type="checkbox"
-							 label="Left">
+					<div>
+						<label class="uk-margin-small-right">Left</label>
+						<input type="checkbox" class="uk-checkbox" formControlName="left">
 					</div>
 				</div>
 				<label class="uk-text-danger">
diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html
index 86995412..5b70999d 100644
--- a/dashboard/users/role-users/role-users.component.html
+++ b/dashboard/users/role-users/role-users.component.html
@@ -81,9 +81,9 @@
     <div *ngIf="message" class="uk-margin-medium-bottom uk-text-small">
       <div [innerHTML]="message | safeHtml"></div>
     </div>
-    <div *ngIf="invited" class="uk-text-center">
-      <div dashboard-input [formInput]="invited"
-           placeholder="Write an email..."></div>
+    <div *ngIf="invited">
+      <div input [formInput]="invited"
+           placeholder="Email"></div>
     </div>
   </div>
 </modal-alert>
@@ -100,13 +100,10 @@
 <modal-alert #createRoleModal (alertOutput)="createGroup()" [okDisabled]="roleFb && roleFb.invalid">
   <div *ngIf="roleFb" class="uk-padding uk-padding-remove-horizontal">
     <div class="uk-grid" uk-grid [formGroup]="roleFb">
-      <div dashboard-input [formInput]="roleFb.get('name')"
-           label="Name"
-           placeholder="Write a name..." class="uk-width-1-1"></div>
-      <div dashboard-input [formInput]="roleFb.get('description')"
-           label="Description"
-           type="textarea"
-           placeholder="Write a description..." class="uk-width-1-1"></div>
+      <div input [formInput]="roleFb.get('name')"
+        placeholder="Name" class="uk-width-1-1"></div>
+      <div input [formInput]="roleFb.get('description')" type="textarea"
+        placeholder="Description" class="uk-width-1-1"></div>
     </div>
   </div>
 </modal-alert>
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index 7f36d834..291056d4 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -14,7 +14,7 @@
         <ng-container *ngIf="type.selected">
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
-               [class.uk-disabled]="disabled">
+							[class.uk-disabled]="disabled">
               <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
                   <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
@@ -29,7 +29,7 @@
         <ng-container *ngIf="filter.selectedFromAndToValues">
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
-               [class.uk-disabled]="disabled">
+							[class.uk-disabled]="disabled">
               <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
                   <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
@@ -45,7 +45,7 @@
               <span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
                     class="uk-width-auto">
                 <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
-                   [class.uk-disabled]="disabled">
+									[class.uk-disabled]="disabled">
                   <span class="uk-label uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
                       <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
@@ -62,13 +62,13 @@
     <div class="uk-flex uk-flex-middle">
       <h4 class="uk-margin-right uk-margin-remove-bottom">Filters</h4>
       <a *ngIf="(selectedRangeFilters + selectedFilters + selectedTypesNum)>0"
-         (click)="clearFilters()" class="uk-text-small"
-         [class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
+				(click)="clearFilters()" class="uk-text-small"
+				[class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
         Clear All
       </a>
     </div>
     <div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
-         class="uk-margin-top" role="alert">
+				class="uk-margin-top" role="alert">
       <loading></loading>
     </div>
     <div
@@ -80,10 +80,10 @@
     <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
       <li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
         <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
-                       [isDisabled]="disabled"
-                       [filter]="filters[0]" [showResultCount]=showResultCount
-                       (onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
-                       [actionRoute]="true"></search-filter>
+											[isDisabled]="disabled"
+											[filter]="filters[0]" [showResultCount]=showResultCount
+											(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
+											[actionRoute]="true"></search-filter>
       </li>
       <li *ngIf="resultTypes && (filters.length > 0)">
         <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
@@ -98,9 +98,9 @@
       <ng-container *ngFor="let filter of filters ">
         <li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
           <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
-                         [isDisabled]="disabled"
-                         [filter]="filter" [showResultCount]=showResultCount
-                         (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
+												[isDisabled]="disabled"
+												[filter]="filter" [showResultCount]=showResultCount
+												(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
         </li>
       </ng-container>
     </ul>
@@ -108,11 +108,11 @@
 </ng-template>
 <!-- TODO - Kostis Clean up -->
 <div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
-     (stickyForm?'':'  ') :
+		(stickyForm?'':'  ') :
     (+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom  uk-padding-remove-top ' +
     ((usedBy == 'deposit' || usedBy == 'orcid') ? ' uk-padding-remove-top ' : ' '))"
-     [attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
-     (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
+		[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
+		(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
     '  uk-position-relative ' :(' uk-section '  ))+'}':null)">
   <div [class]="' uk-background-norepeat  uk-background-bottom-center   uk-padding-remove-bottom  uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
               + (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId')?
@@ -151,7 +151,7 @@
   </div>
 </div>
 <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
-               [searchAction]=false [description]="metaDescription"></schema2jsonld>
+							[searchAction]=false [description]="metaDescription"></schema2jsonld>
 <div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
   <ng-template #loading>
     <loading></loading>
@@ -168,7 +168,7 @@
               <a href="#mobile-filters" uk-toggle>
                 <span class="uk-icon uk-margin-small-right uk-margin-small-left">
                   <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                       data-svg="settings">
+											data-svg="settings">
                     <ellipse fill="none" stroke="#000" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse>
                     <ellipse fill="none" stroke="#000" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse>
                     <circle fill="none" stroke="#000" cx="13.15" cy="9.55" r="2.15"></circle>
@@ -198,11 +198,11 @@
             </div>
           </div>
           <div *ngIf="includeOnlyResultsAndFilter"
-               class="uk-margin-medium-top uk-margin-medium-bottom">
+							class="uk-margin-medium-top uk-margin-medium-bottom">
             <a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
-               [routerLink]="advancedSearchLink" style="z-index:1;"
-               [queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
-               [class]="((disabled)?'  uk-disabled uk-link-muted  ':'') +' portal-link   uk-float-right '">Advanced
+							[routerLink]="advancedSearchLink" style="z-index:1;"
+							[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
+							[class]="((disabled)?'  uk-disabled uk-link-muted  ':'') +' portal-link   uk-float-right '">Advanced
               search
             </a>
           </div>
@@ -213,20 +213,20 @@
                             (existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
                           )
                         )"
-                 class="uk-width-1-4@m search-filters uk-visible@m">
+								class="uk-width-1-4@m search-filters uk-visible@m">
               <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
             </div>
             <div class="uk-width-expand@m uk-with-1-1@s">
               <!-- Results only for Custom Filter? -->
               <div *ngIf="customFilter && !customFilter.isHiddenFilter &&
               customFilter.selected == false && customFilter.promptToAddFilter"
-                   class="uk-alert uk-animation-slide-top-small">
+									class="uk-alert uk-animation-slide-top-small">
                 Do you want to see results only for {{customFilter.valueName}}? <a
                   (click)="addCustomFilter();">Click here</a>.
               </div>
               <!-- Related results for Custom Filter Alert -->
               <div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
-                   class="uk-alert uk-text-center uk-margin-small-top ">
+									class="uk-alert uk-text-center uk-margin-small-top ">
                 <span *ngIf="customFilter">The following results are related to <span class="portal-color"
                 >{{customFilter.valueName}}</span>.</span>
                 Are you interested to view more results? Visit
@@ -270,12 +270,14 @@
                 <div
                     *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
                   <div class="uk-flex uk-flex-middle">
-                    <search-results-per-page class="uk-margin-right" *ngIf="searchUtils.totalResults >= 50"
-                                             [size]="searchUtils.size"
-                                             (sizeChange)="sizeChanged($event)"
-                                             [isDisabled]="disabled">
-                    </search-results-per-page>
-                    <search-sorting *ngIf="sort"
+										<!-- TODO: Disabled functionality -->
+										<!-- [isDisabled]="disabled" -->
+										<div class="uk-width-1-2 uk-margin-right"  *ngIf="searchUtils.totalResults >= 50">
+											<div input type="select" placeholder="Results per page:" 
+												[options]="['5','10','20','50']" [(value)]="searchUtils.size"
+												(valueChange)="sizeChanged($event)"></div>
+										</div>
+                    <search-sorting *ngIf="sort"  class="uk-width-1-2"
                                     [entityType]="entityType" [sortBy]="searchUtils.sortBy"
                                     (sortByChange)="sortByChanged($event)"
                                     [isDisabled]="disabled">
@@ -283,21 +285,21 @@
                   </div>
                 </div>
                 <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
-                               [searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
-                               [parameterNames]="parameterNames" [parameterValues]="parameterValues"
-                               [isDisabled]="disabled">
+															[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
+															[parameterNames]="parameterNames" [parameterValues]="parameterValues"
+															[isDisabled]="disabled">
                 </search-paging>
               </div>
               <div
                   *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)"
                   class="uk-margin">
                 <search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
-                               [results]="results"
-                               [status]=searchUtils.status
-                               [type]="entityType"
-                               [showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
-                                customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
-                                'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
+															[results]="results"
+															[status]=searchUtils.status
+															[type]="entityType"
+															[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
+															customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
+															'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
                 </search-result>
                 <deposit-result *ngIf="usedBy == 'deposit'"
                                 [results]="results"
@@ -327,13 +329,13 @@
               </div>
               <div class="uk-margin-medium-top">
                 <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
-                               [searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
-                               [parameterNames]="parameterNames" [parameterValues]="parameterValues"
-                               [isDisabled]="disabled">
+															[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
+															[parameterNames]="parameterNames" [parameterValues]="parameterValues"
+															[isDisabled]="disabled">
                 </search-paging>
               </div>
               <div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
-                   class="uk-margin-small-top uk-grid uk-child-width-1-2">
+									class="uk-margin-small-top uk-grid uk-child-width-1-2">
                 <!-- Last Index Info-->
                 <div class="">
                   <img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index 48f5cb1c..6973d3db 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -24,6 +24,7 @@ import {properties} from "../../../../environments/environment";
 import {AlertModal} from "../../utils/modal/alert";
 import {Subscriber} from "rxjs";
 import {IndexInfoService} from "../../utils/indexInfo.service";
+import { Option } from '../../sharedComponents/input/input.component';
 
 declare var UIkit: any;
 
@@ -128,6 +129,14 @@ export class NewSearchPageComponent {
   currentValueToRemove;
   currentFilterToRemove;
   public indexUpdateDate: Date;
+	
+	// public resultsPerPageOptions = [
+	// 	{label: '5', value: '5'},
+	// 	{label: '10', value: '10'},
+	// 	{label: '20', value: '20'},
+	// 	{label: '50', value: '50'},
+	// ];
+	
   
   constructor(private route: ActivatedRoute,
               private location: Location,
diff --git a/searchPages/searchUtils/newSearchPage.module.ts b/searchPages/searchUtils/newSearchPage.module.ts
index 1cca3912..1be16af2 100644
--- a/searchPages/searchUtils/newSearchPage.module.ts
+++ b/searchPages/searchUtils/newSearchPage.module.ts
@@ -10,7 +10,6 @@ import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module";
 import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
 import {ReportsServiceModule} from '../../services/reportsService.module';
 import {SearchPagingModule} from './searchPaging.module';
-import {SearchResultsPerPageModule} from './searchResultsPerPage.module';
 import {SearchSortingModule} from './searchSorting.module';
 import {SearchDownloadModule} from './searchDownload.module';
 import {ModalModule} from '../../utils/modal/modal.module';
@@ -30,16 +29,18 @@ import {ClickModule} from "../../utils/click/click.module";
 import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {LoadingModule} from "../../utils/loading/loading.module";
+import {InputModule} from '../../sharedComponents/input/input.module';
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule, SearchFormModule, PortalSearchResultModule,
     LoadingModalModule, ReportsServiceModule,
-    SearchPagingModule, SearchResultsPerPageModule, SearchSortingModule, SearchDownloadModule, ModalModule,
+    SearchPagingModule, SearchSortingModule, SearchDownloadModule, ModalModule,
     SearchFilterModule, RangeFilterModule,
     PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
     SearchResultsInDepositModule, SearchResultsForOrcidModule,
-    AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule
+    AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule,
+		InputModule
   ],
   declarations: [
     NewSearchPageComponent
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index b9ff8773..7147402b 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -24,9 +24,11 @@
             <span class="uk-text-meta  uk-margin-small-left">Top 100 values are
               shown in the filters</span>
           <div class="uk-grid uk-margin-small-left uk-flex uk-flex-bottom">
-            <input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box "
+            <!-- <input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box "
                    name="filter-keyword"
-                   placeholder="Search..." type="text" [(ngModel)]="keyword">
+                   placeholder="Search..." type="text" [(ngModel)]="keyword"> -->
+						<div input class="uk-width-2-3@m uk-width-3-5@s" placeholder="Search"
+							inputClass="inner x-small" [(value)]="keyword"></div>
 
             <span *ngIf="showResultCount === true"
                   class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
diff --git a/searchPages/searchUtils/searchFilter.module.ts b/searchPages/searchUtils/searchFilter.module.ts
index 1a3a862b..c4985d15 100644
--- a/searchPages/searchUtils/searchFilter.module.ts
+++ b/searchPages/searchUtils/searchFilter.module.ts
@@ -7,10 +7,12 @@ import{SearchFilterModalComponent} from './searchFilterModal.component';
 import {ModalModule} from '../../utils/modal/modal.module';
 import { MatSelectModule } from "@angular/material/select";
 import {RouterModule} from "@angular/router";
+import {InputModule} from '../../sharedComponents/input/input.module';
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ModalModule, MatSelectModule, RouterModule
+    CommonModule, FormsModule, ModalModule, MatSelectModule, RouterModule,
+		InputModule
   ],
   declarations: [
     SearchFilterComponent, SearchFilterModalComponent
diff --git a/searchPages/searchUtils/searchResultsPerPage.component.ts b/searchPages/searchUtils/searchResultsPerPage.component.ts
deleted file mode 100644
index f325a355..00000000
--- a/searchPages/searchUtils/searchResultsPerPage.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Component, Input, Output, EventEmitter} from '@angular/core';
-
-@Component({
-    selector: 'search-results-per-page',
-    template: `
-      <div>
-        <mat-form-field class="matSelectionFormField">
-          <mat-label>Results per page:</mat-label>
-          <mat-select  [(ngModel)]="size" (ngModelChange)="sizeChanged()"
-                       [disableOptionCentering]="true"
-                       panelClass="matSelectionPanel"
-                       class="uk-text-bold matSelection">
-            <mat-option [value]="5"  [disabled]="isDisabled"> 5</mat-option>
-            <mat-option [value]="10" [disabled]="isDisabled">10</mat-option>
-            <mat-option [value]="20" [disabled]="isDisabled">20</mat-option>
-            <mat-option [value]="50" [disabled]="isDisabled">50</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-    `
-})
-
-export class SearchResultsPerPageComponent {
-    @Input() isDisabled: boolean = false;
-    @Input() size: number;
-    @Output() sizeChange  = new EventEmitter();
-
-    constructor () {}
-
-    ngOnInit() {}
-
-    sizeChanged() {
-      this.sizeChange.emit(this.size);
-    }
-}
diff --git a/searchPages/searchUtils/searchResultsPerPage.module.ts b/searchPages/searchUtils/searchResultsPerPage.module.ts
deleted file mode 100644
index dfcb7396..00000000
--- a/searchPages/searchUtils/searchResultsPerPage.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule}            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-import { RouterModule }       from '@angular/router';
-
-import {SearchResultsPerPageComponent} from './searchResultsPerPage.component';
-import { MatSelectModule } from "@angular/material/select";
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, RouterModule, MatSelectModule
-  ],
-  declarations: [
-    SearchResultsPerPageComponent
-],
-
-  providers:[
-  ],
-  exports: [
-    SearchResultsPerPageComponent
-
-    ]
-})
-export class SearchResultsPerPageModule { }
diff --git a/searchPages/searchUtils/searchSorting.component.ts b/searchPages/searchUtils/searchSorting.component.ts
index 286de550..1505ff92 100644
--- a/searchPages/searchUtils/searchSorting.component.ts
+++ b/searchPages/searchUtils/searchSorting.component.ts
@@ -4,29 +4,16 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
     selector: 'search-sorting',
     template: `
       <div>
-        <mat-form-field class="matSelectionFormField">
-          <mat-label>Sort by:</mat-label>
-          <mat-select  *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
-                       [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
-                       [disableOptionCentering]="true"
-                       panelClass="matSelectionPanel"
-                       class="uk-text-bold matSelection">
-            <mat-option value="" [disabled]="isDisabled">Relevance</mat-option>
-            <mat-option value="resultdateofacceptance,descending" [disabled]="isDisabled">Date (most recent)</mat-option>
-            <mat-option value="resultdateofacceptance,ascending" [disabled]="isDisabled">Date (least recent)</mat-option>
-          </mat-select>
+				<!-- TODO: Disabled functionality -->
+				<div input *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
+					type="select" placeholder="Sort by:"
+					[options]="optionsA" [(value)]="sortBy"
+					(valueChange)="sortByChanged()"></div>
 
-          <mat-select *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
-            class="uk-text-bold matSelection"
-            id="form-horizontal-select" name="select_results_per_page"
-            [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
-            [disableOptionCentering]="true"
-            panelClass="matSelectionPanel">
-            <mat-option value="" [disabled]="isDisabled">Title</mat-option>
-            <mat-option value="creationdate,descending" [disabled]="isDisabled">Creation Date (most recent)</mat-option>
-            <mat-option value="creationdate,ascending" [disabled]="isDisabled">Creation Date (least recent)</mat-option>
-          </mat-select>
-        </mat-form-field>
+				<div input *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
+					type="select" placeholder="Sort by:"
+					[options]="optionsB" [(value)]="sortBy"
+					(valueChange)="sortByChanged()"></div>
       </div>
     `
 })
@@ -36,6 +23,16 @@ export class SearchSortingComponent {
     @Input() sortBy: string = '';
     @Input() entityType: string = '';
     @Output() sortByChange  = new EventEmitter();
+		public optionsA = [
+			{value: '', label: 'Relevance'},
+			{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
+			{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
+		];
+		public optionsB = [
+			{value: '', label: 'Title'},
+			{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
+			{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
+		];
 
 
     constructor () {}
diff --git a/searchPages/searchUtils/searchSorting.module.ts b/searchPages/searchUtils/searchSorting.module.ts
index 2a52e6ee..140dc0fa 100644
--- a/searchPages/searchUtils/searchSorting.module.ts
+++ b/searchPages/searchUtils/searchSorting.module.ts
@@ -5,10 +5,12 @@ import { RouterModule }       from '@angular/router';
 
 import{SearchSortingComponent} from './searchSorting.component';
 import { MatSelectModule } from "@angular/material/select";
+import {InputModule} from '../../sharedComponents/input/input.module';
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule, MatSelectModule
+    CommonModule, FormsModule, RouterModule, MatSelectModule,
+		InputModule
   ],
   declarations: [
     SearchSortingComponent
diff --git a/utils/result-preview/result-preview.component.html b/utils/result-preview/result-preview.component.html
index c9d1c190..8dc2e8a4 100644
--- a/utils/result-preview/result-preview.component.html
+++ b/utils/result-preview/result-preview.component.html
@@ -36,7 +36,7 @@
     </div>
     <!-- Title -->
     <div class="uk-margin-small-bottom">
-      <h6 class="uk-margin-remove uk-text-break">
+      <h6 class="uk-margin-remove uk-text-break uk-inline-block">
         <a *ngIf="!externalUrl && result.id && !(result.resultType == 'dataprovider' && result.compatibilityUNKNOWN) "
            (click)="onClick()" [queryParams]="createParam()"
            [routerLink]="url" class="uk-link uk-width-expand">