From f20fe90aa2482adb14c60ab684627ae3a9ad88b4 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 7 Apr 2022 18:17:52 +0300
Subject: [PATCH] 1. Navbar: Change navbar to be sticky always. 2. Search
 Filter: Add new inputs. 3. Page-content: Remove offset changing base on menu.
 4. Pages add new search-input. 5. Advanced Search Input: Add enter behaviour
 and make inputs by default equal size.

---
 dashboard/page/pages.component.html           | 219 +++++++++---------
 dashboard/page/pages.component.ts             |  11 -
 .../page-content/page-content.component.ts    |  10 +-
 .../searchUtils/searchFilter.component.html   |  38 +--
 .../searchUtils/searchFilter.component.ts     |   2 +
 .../advanced-search-input.component.ts        |  18 +-
 sharedComponents/input/input.component.ts     |  25 +-
 sharedComponents/navigationBar.component.html |   4 +-
 8 files changed, 138 insertions(+), 189 deletions(-)

diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html
index 3bc85bf2..d8ada3f9 100644
--- a/dashboard/page/pages.component.html
+++ b/dashboard/page/pages.component.html
@@ -15,9 +15,9 @@
     <div *ngIf="showLoading" class="uk-position-center">
       <loading></loading>
     </div>
-		<div *ngIf="!showLoading">
-			<div class="uk-grid uk-margin-medium-bottom" uk-grid>
-				<div class="uk-width-expand">
+		<ng-container *ngIf="!showLoading">
+			<div class="uk-grid uk-flex-middle uk-margin-top uk-margin-medium-bottom" uk-grid>
+				<div class="uk-width-expand@m uk-width-1-1">
 					<ul class="uk-subnav uk-subnav-pill">
 						<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
 								(click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li>
@@ -26,18 +26,11 @@
 								(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
 					</ul>
 				</div>
-				<div
-						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>
-	
+				<div class="uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
+					<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></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>
@@ -46,111 +39,109 @@
 					</div>
 				</div>
 			</div>
-    </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"/>
-				<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
+			<div *ngIf="checkboxes.length > 0" class="uk-section uk-section-small">
+				<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"/>
+					<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
 													{{getSelectedPages().length}} pages selected </span>
-				<a class="uk-margin-left">Actions</a>
-				<div uk-dropdown="mode: click">
-					<ul class="uk-nav uk-dropdown-nav"
-							[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-							title="Select at least one page">
-						<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-																									(click)="togglePages(true,getSelectedPages())"><i></i> Enable
-						</a></li>
-						<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-																									(click)="togglePages(false,getSelectedPages())"><i></i> Disable
-						</a>
-						</li>
-						<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-																								(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
-					</ul>
+					<a class="uk-margin-left">Actions</a>
+					<div uk-dropdown="mode: click">
+						<ul class="uk-nav uk-dropdown-nav"
+								[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
+								title="Select at least one page">
+							<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
+																										(click)="togglePages(true,getSelectedPages())"><i></i> Enable
+							</a></li>
+							<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
+																										(click)="togglePages(false,getSelectedPages())"><i></i> Disable
+							</a>
+							</li>
+							<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
+																									 (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
+						</ul>
+					</div>
 				</div>
 			</div>
-		</div>
-    <div *ngIf="!showLoading">
-      <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
-        <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
-          <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">
-              </div>
-              <div class="uk-width-expand">
-                <div class="title uk-margin-medium-bottom">Name</div>
-                <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
-                <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
-                    class="title">Entities: </span>
-                  {{getEntitiesAsString(check.page)}}</div>
-                <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
-                <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
-                    class="title">Type: </span> {{check.page.type}}</div>
-                <div *ngIf="!portal" class=" uk-margin-small-bottom">
-                  <span class="title">Portal type: </span>{{check.page.portalType}}
-                </div>
-                <div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
-                  <span class="title">Portal PID: </span>{{check.page.portalPid}}
-                </div>
-              </div>
-              <div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
-                  check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
-                <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">
-                    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
-                    <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
-                  </a>
-                </div>
-              </div>
-              <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
-                <div class="title uk-margin-medium-bottom">Enable/disable</div>
-                <mat-slide-toggle [checked]="check.page.isEnabled"
-                                  (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
-                                  uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
-                </mat-slide-toggle>
-              </div>
-            </div>
-            <div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
-              <div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
-                <div class="uk-flex uk-flex-center">
-                  <div class="actions">
-                    <button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
-                            class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
-                      <icon name="edit"></icon>
-                      <span class="uk-margin-small-left"> Edit</span>
-                    </button>
-                    <button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
-                      <icon name="remove"></icon>
-                      <span class="uk-margin-small-left"> Delete</span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
+			<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
+				<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
+					<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">
+							</div>
+							<div class="uk-width-expand">
+								<div class="title uk-margin-medium-bottom">Name</div>
+								<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
+								<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
+										class="title">Entities: </span>
+									{{getEntitiesAsString(check.page)}}</div>
+								<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
+								<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
+										class="title">Type: </span> {{check.page.type}}</div>
+								<div *ngIf="!portal" class=" uk-margin-small-bottom">
+									<span class="title">Portal type: </span>{{check.page.portalType}}
+								</div>
+								<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
+									<span class="title">Portal PID: </span>{{check.page.portalPid}}
+								</div>
+							</div>
+							<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
+								check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
+								<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">
+										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
+										<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
+									</a>
+								</div>
+							</div>
+							<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
+								<div class="title uk-margin-medium-bottom">Enable/disable</div>
+								<mat-slide-toggle [checked]="check.page.isEnabled"
+																	(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
+																	uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
+								</mat-slide-toggle>
+							</div>
+						</div>
+						<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
+							<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
+								<div class="uk-flex uk-flex-center">
+									<div class="actions">
+										<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
+														class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
+											<icon name="edit"></icon>
+											<span class="uk-margin-small-left"> Edit</span>
+										</button>
+										<button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
+											<icon name="remove"></icon>
+											<span class="uk-margin-small-left"> Delete</span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</li>
 
-      </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">
-        <div>No pages found</div>
-      </div>
-    </div>
+			</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">
+				<div>No pages found</div>
+			</div>
+		</ng-container>
   </div>
 </div>
 <modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
diff --git a/dashboard/page/pages.component.ts b/dashboard/page/pages.component.ts
index 6abd92ce..0c52cbba 100644
--- a/dashboard/page/pages.component.ts
+++ b/dashboard/page/pages.component.ts
@@ -64,8 +64,6 @@ export class PagesComponent implements OnInit {
   private subscriptions: any[] = [];
   public portalUtils: PortalUtils = new PortalUtils();
   private index: number;
-  public selectedKeyword: string;
-  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   pageHelpContentsCount = {};
   pageClassContentsCount = {};
 	public stickyPageHeader: boolean = false;
@@ -434,15 +432,6 @@ export class PagesComponent implements OnInit {
     }
   }
   
-  public onSearchClose() {
-    this.selectedKeyword = this.filterForm.get('keyword').value;
-  }
-  
-  public reset() {
-    this.selectedKeyword = null;
-    this.searchInputComponent.reset()
-  }
-  
   selectAll() {
     let checked = this.getSelectedPages().length != this.checkboxes.length;
     for (let check of this.checkboxes) {
diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index 9145cd4a..39c41e4a 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output} from "@angular/core";
 import {Subscription} from "rxjs";
 
 declare var UIkit;
@@ -8,7 +8,7 @@ declare var UIkit;
   template: `
     <div id="page_content">
       <div id="header">
-        <div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="shouldSticky?offset:null">
+        <div id="page_content_header" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="offset">
           <div class="uk-container uk-container-large uk-padding-remove-vertical">
             <div class="uk-padding-small uk-padding-remove-vertical">
               <ng-content select="[header]"></ng-content>
@@ -60,12 +60,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   initSticky() {
     this.clear();
     if(this.shouldSticky) {
-      this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', () => {
-        this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
-      }));
-      this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', () => {
-        this.offset = 0;
-      }));
       this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', () => {
         this.sticky = true;
         this.stickyEmitter.emit(this.sticky);
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index dab11fd2..97a19221 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -16,41 +16,17 @@
         <span *ngIf="!isOpen">+ View all</span>
       </a>
       <div *ngIf="isOpen" class="uk-text-small uk-margin-small-bottom">
-        <div class="">
-            <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 "
-                   name="filter-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">
-              <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
-      <!--        <select [(ngModel)]="sortBy"
-                      class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
-                      id="form-horizontal-select" name="select_order">
-                <option value="num">Results number</option>
-                <option value="name">Name</option>
-              </select>-->
-              <mat-select [(ngModel)]="sortBy" (ngModelChange)="sort(filter.values)"
-                          class="uk-width-expand matSelection uk-visible@m"
-                          id="form-horizontal-select1" name="select_order"
-                          [disableOptionCentering]="true" panelClass="matSelectionPanel">
-                <mat-option value="num">Results number</mat-option>
-                <mat-option value="name">Name</mat-option>
-              </mat-select>
-            </span>
+        <div class="uk-margin-small-left">
+          <div class="uk-text-meta">Top 100 values are shown in the filters</div>
+          <div class="uk-flex uk-flex-bottom uk-margin-top">
+						<div input class="uk-width-1-2@m uk-margin-right" [placeholder]="{label: 'Search', static: true}" inputClass="inner x-small" [(value)]="keyword"></div>
+            <div *ngIf="showResultCount === true" input type="select" class="uk-width-expand" placeholder="Sort by" inputClass="border-bottom" [(value)]="sortBy" [options]="sortByOptions"></div>
           </div>
         </div>
-
-        <div class="uk-overflow-auto uk-height-max-small uk-padding-remove
-                    uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
+        <div class="uk-overflow-auto uk-height-max-small uk-margin-small-left uk-margin-small-right uk-margin-top">
           <ng-container *ngFor="let value of this.sortedValues">
             <div *ngIf="filterKeywords(value.name)" title="{{value.name}}"
-                 class="uk-animation-fade filterItem searchFilterItem uk-text-small">
+                 class="uk-animation-fade uk-text-small">
               <ng-container
                   *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
             </div>
diff --git a/searchPages/searchUtils/searchFilter.component.ts b/searchPages/searchUtils/searchFilter.component.ts
index 64a69cb6..add95006 100644
--- a/searchPages/searchUtils/searchFilter.component.ts
+++ b/searchPages/searchUtils/searchFilter.component.ts
@@ -11,6 +11,7 @@ import {Filter, Value} from './searchHelperClasses.class';
 import {ActivatedRoute, Router} from "@angular/router";
 import {SearchFields} from "../../utils/properties/searchFields";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
+import {Option} from "../../sharedComponents/input/input.component";
 @Component({
   selector: 'search-filter',
   templateUrl: 'searchFilter.component.html'
@@ -33,6 +34,7 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   @Output() onFilterChange = new EventEmitter();
   keyword = "";
   sortBy: "name" | "num" = "name";
+  sortByOptions: Option[] = [{label: 'Results number', value: 'num'}, {label: 'Name', value: 'name'}];
   queryParams = {};
   paramPosition = 0;
   @Input() actionRoute: boolean = false;
diff --git a/sharedComponents/advanced-search-input/advanced-search-input.component.ts b/sharedComponents/advanced-search-input/advanced-search-input.component.ts
index 88a3a196..659cb04a 100644
--- a/sharedComponents/advanced-search-input/advanced-search-input.component.ts
+++ b/sharedComponents/advanced-search-input/advanced-search-input.component.ts
@@ -2,7 +2,7 @@ import {
   AfterContentInit,
   Component,
   ContentChildren,
-  EventEmitter,
+  EventEmitter, HostListener,
   Input,
   OnDestroy,
   Output,
@@ -13,10 +13,10 @@ import {InputComponent} from "../input/input.component";
 @Component({
   selector: 'advanced-search-input',
   template: `
-    <div class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
-      <div class="uk-grid uk-flex-middle" uk-grid>
+    <div *ngIf="inputs.length > 0" class="search-input" [ngClass]="searchInputClass" [class.small-vertical]="smallVertical">
+      <div class="uk-flex uk-flex-middle">
         <div class="uk-width-expand">
-          <div class="uk-grid uk-grid-collapse inputs" uk-grid>
+          <div class="uk-grid uk-grid-collapse inputs" [ngClass]="'uk-child-width-1-' + inputs.length" uk-grid>
             <ng-content></ng-content>
           </div>
         </div>
@@ -36,6 +36,16 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
   @Input() smallVertical: boolean = false;
   @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
   
+  @HostListener('window:keydown', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    if(this.inputs.toArray().filter(input => input.focused).length > 0) {
+      if(event.code === 'Enter') {
+        event.preventDefault();
+        this.searchEmitter.emit();
+      }
+    }
+  }
+  
   constructor() {
   }
   
diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 75985123..81ce2d5f 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -65,12 +65,9 @@ declare var UIkit;
               <div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder">{{placeholderInfo.label}}</div>
             </ng-template>
             <ng-template [ngIf]="type === 'autocomplete'">
-              <div class="uk-grid uk-width-expand" uk-grid>
-                <div class="uk-width-expand">
-                  <input [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
-                         #searchInput class="input" [formControl]="searchControl">
-                </div>
-              </div>
+              <input *ngIf="focused" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
+                     #searchInput class="input" [formControl]="searchControl">
+              <div *ngIf="!focused" class="input">{{getLabel(formAsControl.value)}}</div>
             </ng-template>
             <ng-template [ngIf]="type === 'chips'">
               <div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
@@ -89,12 +86,12 @@ declare var UIkit;
               </div>
             </ng-template>
             <div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
-                 class="uk-margin-left uk-margin-right icon">
+                 class="uk-margin-left icon">
               <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
                 <icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon>
-                <icon *ngIf="formControl.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)"
+                <icon *ngIf="searchControl?.value && type === 'autocomplete'" class="clickable" (click)="resetSearch($event)"
                       [flex]="true" name="close"></icon>
               </ng-template>
             </div>
@@ -335,9 +332,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (!this.searchControl) {
         this.searchControl = new FormControl('', this.validators);
       }
-      if(this.formAsControl) {
-        this.searchControl.setValue(this.getLabel(this.formControl.value));
-      }
       this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
         this.filteredOptions = this.filter(value);
         this.cdr.detectChanges();
@@ -364,9 +358,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       } else {
         this.formControl.markAsDirty();
       }
-      if (this.searchControl && this.formAsControl) {
-        this.searchControl.setValue(this.getLabel(this.formControl.value));
-      }
       this.valueChange.emit(this.formControl.value);
     }));
     if (this.input) {
@@ -434,6 +425,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.formControl.markAsTouched();
     }
     this.focused = value;
+    this.cdr.detectChanges();
     if (this.focused) {
       if (this.input) {
         this.input.nativeElement.focus();
@@ -451,7 +443,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.open(false);
       if (this.searchControl) {
         if(this.formAsControl) {
-          this.searchControl.setValue(this.getLabel(this.formControl.value));
+          this.searchControl.setValue('');
         }
         this.add(event);
       }
@@ -477,9 +469,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   
   resetSearch(event: any) {
     event.stopPropagation();
-    this.formControl.markAsDirty();
-    this.formControl.setValue(null);
-    this.focus(true);
     this.searchControl.setValue('');
   }
   
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index b3a287b4..3fb77e2e 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -93,9 +93,7 @@
     </div>
   </div>
   <div id="main-menu" class="uk-visible@m">
-    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
-         uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
-         [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
+    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'" uk-sticky media="@m">
       <div
           *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
         <img class="uk-position-top-left"