improving search field design

backend/middlewares/user/AuthenticationMWs.ts

@@ -88,6 +88,7 @@ export class AuthenticationMWs {
       (typeof req.body.loginCredential.password === 'undefined')) {
       return next(new Error(ErrorCodes.INPUT_ERROR));
     }
+    //TODO: implement remember me
     try {
       //lets find the user
       req.session.user = await ObjectManagerRepository.getInstance().UserManager.findOne({

frontend/app/app.module.ts

@@ -36,6 +36,7 @@ import {SlimLoadingBarModule} from "ng2-slim-loading-bar";
 import {GalleryShareComponent} from "./gallery/share/share.gallery.component";
 import {ShareLoginComponent} from "./sharelogin/share-login.component";
 import {ShareService} from "./gallery/share.service";
+import {TypeaheadModule} from "ngx-bootstrap";
 
 @Injectable()
 export class GoogleMapsConfig {
@@ -52,6 +53,7 @@ export class GoogleMapsConfig {
     FormsModule,
     HttpModule,
     appRoutes,
+    TypeaheadModule.forRoot(),
     AgmCoreModule.forRoot(),
     SlimLoadingBarModule.forRoot()
   ],

frontend/app/gallery/gallery.component.css

@@ -7,6 +7,6 @@ gallery-map {
 }
 
 .directories {
-  margin-right: 1px;
-  margin-left: 1px;
+  margin-right: 2px;
+  margin-left: 2px;
 }

frontend/app/gallery/search/search.gallery.component.css

@@ -1,32 +1,46 @@
 .autocomplete-list {
-    position: absolute;
-    left: 0;
-    top: 34px;
-    background-color:white;
-    width: 100%;
-    border: 1px solid #ccc;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    padding-left: 3px;
-    padding-right: 3px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+  position: absolute;
+  left: 0;
+  top: 34px;
+  background-color: white;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
 
-.autocomplete-item{
-    cursor: pointer;
-    padding-left: 3px;
-    padding-right: 3px;
-    border-radius: 2px;
+.autocomplete-item {
+  cursor: pointer;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 17px;
+}
+
+.autocomplete-item a {
+  color: #333;
+  padding: 0 20px;
+  line-height: 1.42857143;
+  font-weight: 400;
 }
 
 .autocomplete-item:hover {
-    background-color: #eaeaea;
+  background-color: #337ab7;
+}
+
+.autocomplete-item:hover a {
+  color: #FFF;
+  text-decoration: none;
 }
 
 #srch-term {
-    border-bottom-left-radius: 0;
-    border-bottom-width: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-width: 0;
 }
 
 form {

frontend/app/gallery/search/search.gallery.component.html

@@ -5,6 +5,7 @@
            ngControl="search"
            name="srch-term" id="srch-term" autocomplete="off">
 
+
     <div class="autocomplete-list" *ngIf="autoCompleteItems.length > 0"
          (mouseover)="setMouseOverAutoComplete(true)" (mouseout)="setMouseOverAutoComplete(false)">
       <div class="autocomplete-item" *ngFor="let item of autoCompleteItems">

frontend/app/gallery/search/search.gallery.component.ts

@@ -116,6 +116,7 @@ export class GallerySearchComponent {
   }
 
   private showSuggestions(suggestions: Array<AutoCompleteItem>, searchText: string) {
+    console.log(suggestions);
     this.emptyAutoComplete();
     suggestions.forEach((item: AutoCompleteItem) => {
       let renderItem = new AutoCompleteRenderItem(item.text, searchText, item.type);