Client: responsive design

3 files changed, 66 insertions, 8 deletions

diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 0c7b5038a..b03b977dc 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,17 +1,23 @@
+
 <div class="input-group">
-  <div class="input-group-btn" dropdown>
+
+  <span class="input-group-addon icon-addon">
+    <span class="glyphicon glyphicon-search"></span>
+  </span>
+
+  <input
+    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
+    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
+  >
+
+  <div class="input-group-btn" dropdown placement="bottom right">
     <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
       {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
+    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
       <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
         <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
       </li>
     </ul>
   </div>
-
-  <input
-    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
-    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
-  >
 </div>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
new file mode 100644
index 000000000..583f9586f
--- /dev/null
+++ b/client/src/app/shared/search/search.component.scss
@@ -0,0 +1,51 @@
+.icon-addon {
+  background-color: #fff;
+  border-radius: 0;
+  border-color: $header-border-color;
+  border-width: 0 0 1px 0;
+  text-align: right;
+
+  .glyphicon-search {
+    width: 30px;
+    font-size: 20px;
+  }
+}
+
+input, button, .input-group {
+  height: 100%;
+}
+
+input, .input-group-btn {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+}
+
+input {
+  height: $header-height;
+  border-right: none;
+  font-weight: bold;
+  box-shadow: none;
+
+  &, &:focus {
+    border-bottom: 1px solid $header-border-color !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+button {
+
+  &, &:hover, &:focus, &:active, &:visited {
+    background-color: #fff !important;
+    border-color: $header-border-color !important;
+    color: #858585 !important;
+    outline: none !important;
+
+    height: $header-height;
+    border-width: 0 0 1px 0;
+    font-weight: bold;
+    text-decoration: none;
+    box-shadow: none;
+  }
+}
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index 9f7e156ec..48413b4f2 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -7,7 +7,8 @@ import { SearchService } from './search.service';
 
 @Component({
   selector: 'my-search',
-  templateUrl: './search.component.html'
+  templateUrl: './search.component.html',
+  styleUrls: [ './search.component.scss' ]
 })
 
 export class SearchComponent implements OnInit {