From a9b06912c60ba91ce56933e03c879a9140aa2183 Mon Sep 17 00:00:00 2001
From: Braun Patrik <braun.patrik@aut.bme.hu>
Date: Sat, 8 Jul 2017 09:43:05 +0200
Subject: [PATCH] improving search field design

---
 backend/middlewares/user/AuthenticationMWs.ts |  1 +
 frontend/app/app.module.ts                    |  2 +
 frontend/app/gallery/gallery.component.css    |  4 +-
 .../search/search.gallery.component.css       | 54 ++++++++++++-------
 .../search/search.gallery.component.html      |  1 +
 .../search/search.gallery.component.ts        |  1 +
 6 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/backend/middlewares/user/AuthenticationMWs.ts b/backend/middlewares/user/AuthenticationMWs.ts
index aa1c805b..05b6e4b0 100644
--- a/backend/middlewares/user/AuthenticationMWs.ts
+++ b/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({
diff --git a/frontend/app/app.module.ts b/frontend/app/app.module.ts
index 057d4d7a..99d5908b 100644
--- a/frontend/app/app.module.ts
+++ b/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()
   ],
diff --git a/frontend/app/gallery/gallery.component.css b/frontend/app/gallery/gallery.component.css
index 82ff5035..e00c8b47 100644
--- a/frontend/app/gallery/gallery.component.css
+++ b/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;
 }
diff --git a/frontend/app/gallery/search/search.gallery.component.css b/frontend/app/gallery/search/search.gallery.component.css
index 2d4229f0..7969d407 100644
--- a/frontend/app/gallery/search/search.gallery.component.css
+++ b/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 {
diff --git a/frontend/app/gallery/search/search.gallery.component.html b/frontend/app/gallery/search/search.gallery.component.html
index 0e053f84..cc646f79 100644
--- a/frontend/app/gallery/search/search.gallery.component.html
+++ b/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">
diff --git a/frontend/app/gallery/search/search.gallery.component.ts b/frontend/app/gallery/search/search.gallery.component.ts
index 1de87a29..707479ac 100644
--- a/frontend/app/gallery/search/search.gallery.component.ts
+++ b/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);