Merge pull request #321 from TheJacksonLaboratory/hotfix/search-responsiveness

fixing search responsiveness

Author: iimpulse

src/app/shared/navbar/navbar.component.scss

@@ -109,7 +109,7 @@
 .navbar-search-wrapper {
   line-height: 20px;
   font-size: 14px;
-  height: 100%;
+  height: 70%;
 }
 
 .navbar-search-container {

src/app/shared/search/search/search.component.html

@@ -1,16 +1,18 @@
-<div class="search-wrapper flex flex-row flex-wrap sm:flex-nowrap align-items-center justify-center">
-  <mat-select class="search-filter sm:flex-[0_0_20%] flex-[0_0_80%] h-[45px]" placeholder="All" [(value)]="navFilter">
-    <mat-option value="all">All</mat-option>
-    <mat-option value="term">Term</mat-option>
-    <mat-option value="disease">Disease</mat-option>
-    <mat-option value="gene">Gene</mat-option>
-  </mat-select>
-  <input class="searchbar flex-[0_0_80%]" matInput placeholder="Search for phenotypes, diseases or genes..."
-         (input)="contentChanging($event.target.value)"
-         (keyup.enter)="submitQuery($event.target.value)"
-         (focus)="toggleDropdown($event)"
-         [(ngModel)]="queryString" #searchbar>
-  <div class="search-output mat-elevation-z4 flex-[1_1_100%]" [@searchState]="searchstate">
+<div class="search-wrapper flex flex-row flex-wrap align-items-center justify-center">
+  <div class="w-full flex flex-row flex-wrap sm:flex-nowrap align-items-center justify-center">
+    <mat-select class="search-filter sm:flex-[0_0_20%] flex-[0_0_80%] h-[45px]" placeholder="All" [(value)]="navFilter">
+      <mat-option value="all">All</mat-option>
+      <mat-option value="term">Term</mat-option>
+      <mat-option value="disease">Disease</mat-option>
+      <mat-option value="gene">Gene</mat-option>
+    </mat-select>
+    <input class="searchbar flex-[0_0_80%]" matInput placeholder="Search for phenotypes, diseases or genes..."
+          (input)="contentChanging($event.target.value)"
+          (keyup.enter)="submitQuery($event.target.value)"
+          (focus)="toggleDropdown($event)"
+          [(ngModel)]="queryString" #searchbar>
+  </div>
+  <div class="search-output mat-elevation-z4 w-[80%] sm:ml-[20%] align-items-center justify-center" [@searchState]="searchstate">
     <div class="search-all" *ngIf="!notFoundFlag">
       <a routerLink="/browse/search" [queryParams]="{'q': queryText, 'navFilter': 'all'}" *ngIf="queryText">
         See all results for '{{queryText}}'
@@ -65,8 +67,11 @@ <h3>Sorry no results have been found!</h3>
     </div>
   </div>
 </div>
-<p class="hint w-full" *ngIf="searchstate !== 'active'">
-  <strong>e.g. <a (click)="setQuery('Arachnodactyly')">Arachnodactyly</a> |
+<div class="flex flex-row flex-wrap align-items-center justify-center">
+  <p class="hint w-full" *ngIf="showHint && searchstate !== 'active'">
+    <strong>e.g. <a (click)="setQuery('Arachnodactyly')">Arachnodactyly</a> |
     <a (click)="setQuery('Marfan syndrome')">Marfan syndrome</a> |
     <a (click)="setQuery('FBN1')">FBN1</a></strong>
-</p>
+  </p>
+</div>
+

src/app/shared/search/search/search.component.scss

@@ -42,6 +42,7 @@ $orange-hover: rgba(236, 151, 54, 0.8);
     background-color: white;
     position: relative;
     z-index: 999;
+    line-height: 20px;
 
     & .search-all {
       padding: 2px 10px 0 10px;
@@ -75,7 +76,7 @@ $orange-hover: rgba(236, 151, 54, 0.8);
       font-weight: bold;
       margin: 5px 0 0 0;
       padding: 5px;
-      width: 40%;
+      width: 100%;
       background-color: $category-label-green;
       color: white;
       cursor: default;

src/app/shared/search/search/search.component.ts

@@ -1,5 +1,5 @@
 import { Router } from '@angular/router';
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { Disease, Gene, SimpleTerm, Term } from '../../../browser/models/models';
 import { SearchService } from '../service/search.service';
 
@@ -19,7 +19,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
         'visibility': 'hidden'
       })),
       state('active', style({
-        'max-height': '500px',
+        'max-height': '750px',
         'overflow-y': 'scroll',
         'visibility': 'visible'
       })),
@@ -31,6 +31,8 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
   ]
 })
 export class SearchComponent implements OnInit {
+
+  @Input() showHint = false;
   terms: Term[] = [];
   diseases: SimpleTerm[] = [];
   genes: SimpleTerm[] = [];

src/app/static/home/home.component.html

@@ -3,7 +3,7 @@
     <div class="search-container mat-elevation-z4">
       <img class="main-logo" src="assets/hpo-logo-white.png"/>
       <div class="searchbar-container">
-        <app-search-bar></app-search-bar>
+        <app-search-bar [showHint]="true"></app-search-bar>
       </div>
     </div>
   </div>