[ACA-1968] style search input for smaller screens (#833)

* [ACA-1968] more friendly small screen style

* [ACA-1968] media queries

* [ACA-1968] fix margin

* [ACA-1968] small fixes

* [ACA-1968] cleanup unused code

src/app/components/current-user/current-user.component.theme.scss

@@ -22,7 +22,7 @@
     }
 
     .current-user__full-name {
-      width: 100px;
+      max-width: 100px;
       text-align: right;
       white-space: nowrap;
       overflow: hidden;

src/app/components/header/header.component.html

@@ -6,11 +6,11 @@
   [title]="appName$ | async"
   (clicked)="toggleClicked.emit($event)">
 
-  <div class="adf-toolbar--spacer"></div>
+  <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
 
-  <ng-container *ngIf="!isSmallScreen">
-    <aca-search-input></aca-search-input>
-  </ng-container>
+  <aca-search-input></aca-search-input>
+
+  <div class="adf-toolbar-divider"></div>
 
   <aca-current-user></aca-current-user>
 

src/app/components/header/header.component.ts

@@ -37,7 +37,6 @@ import {
   selectAppName,
   selectLogoPath
 } from '../../store/selectors/app.selectors';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { AppExtensionService } from '../../extensions/extension.service';
 import { AppStore } from '../../store/states';
@@ -56,12 +55,10 @@ export class AppHeaderComponent implements OnInit {
   headerColor$: Observable<string>;
   logo$: Observable<string>;
 
-  isSmallScreen = false;
   actions: Array<ContentActionRef> = [];
 
   constructor(
     store: Store<AppStore>,
-    private breakpointObserver: BreakpointObserver,
     private appExtensions: AppExtensionService
   ) {
     this.headerColor$ = store.select(selectHeaderColor);
@@ -71,12 +68,6 @@ export class AppHeaderComponent implements OnInit {
 
   ngOnInit() {
     this.actions = this.appExtensions.getHeaderActions();
-
-    this.breakpointObserver
-      .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
-      .subscribe(result => {
-        this.isSmallScreen = result.matches;
-      });
   }
 
   trackByActionId(index: number, action: ContentActionRef) {

src/app/components/search/search-input-control/search-input-control.component.html

@@ -14,8 +14,6 @@
             (ngModelChange)="inputChange($event)"
             (keyup.enter)="searchSubmit($event)"
             [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate">
-
-
         <div matSuffix class="app-suffix-search-icon-wrapper">
           <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
         </div>

src/app/components/search/search-input-control/search-input-control.component.scss

@@ -4,6 +4,8 @@ $top-margin: 12px;
   margin-top: -$top-margin;
   padding-top: 2px;
   font-size: 16px;
+  padding-left: 15px;
+  box-sizing: border-box;
 
   .mat-form-field-underline {
     display: none;
@@ -20,7 +22,7 @@ $top-margin: 12px;
 
   .app-input-form-field {
     letter-spacing: -0.7px;
-    width: 90%;
+    width: calc(100% - 56px);
 
     .mat-input-element {
       letter-spacing: -0.7px;
@@ -30,7 +32,6 @@ $top-margin: 12px;
   .app-search-button.mat-icon-button {
     top: -2px;
     left: -8px;
-    margin-left: 15px;
 
     .mat-icon {
       font-size: 24px;
@@ -41,7 +42,7 @@ $top-margin: 12px;
 
 .app-suffix-search-icon-wrapper {
   height: 6px;
-  margin: 14px 13px;
+  margin: 14px 1px;
   float: left;
 
   .mat-icon {

src/app/components/search/search-input/search-input.component.theme.scss

@@ -45,14 +45,16 @@ $top-margin: 12px;
 }
 
 .aca-search-input {
-  margin-right: 7px;
+  width: 100%;
+  max-width: $search-width;
   background-color: $search-background;
   border-radius: $search-border-radius;
   height: $search-height;
 }
 
 .app-search-container {
-  width: $search-width;
+  width: 100%;
+  max-width: $search-width;
   height: $search-height + $top-margin;
 }
 
@@ -89,8 +91,14 @@ $top-margin: 12px;
 
     .mat-checkbox-label {
       padding: 0 0 0 11px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
+
+  .mat-checkbox-layout {
+    max-width: 155px;
+  }
 }
 
 .app-search-hint {
@@ -98,3 +106,60 @@ $top-margin: 12px;
   font-size: 12px;
   padding-left: 17px;
 }
+
+@media screen and ($mat-small) {
+  $search-width-small: 400px;
+
+  .aca-search-input {
+    max-width: $search-width-small;
+  }
+
+  .app-search-container {
+    max-width: $search-width-small;
+  }
+
+  .app-search-options-menu {
+    &.mat-menu-panel {
+      width: $search-width-small;
+    }
+  }
+
+  #search-options {
+    padding-left: 20px;
+
+    mat-checkbox {
+      padding: 3px 20px 3px 0;
+
+      .mat-checkbox-label {
+        padding: 0;
+      }
+    }
+
+    .mat-checkbox-layout {
+      max-width: 105px;
+    }
+  }
+}
+
+@media screen and ($mat-xsmall) {
+  $search-width-xsmall: 220px;
+
+  .aca-search-input {
+    max-width: $search-width-xsmall;
+  }
+
+  .app-search-container {
+    max-width: $search-width-xsmall;
+  }
+
+  .app-search-options-menu {
+    &.mat-menu-panel {
+      width: $search-width-xsmall;
+      margin-top: 9px;
+    }
+  }
+
+  #search-options .mat-checkbox-layout {
+    max-width: 180px;
+  }
+}