Make the sort/results bar less ugly

5 files changed, 41 insertions, 6 deletions

diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
index 3a6df844a..722d0dca0 100644
--- a/client/angular/app/app.component.ts
+++ b/client/angular/app/app.component.ts
@@ -53,6 +53,7 @@ export class AppComponent {
   constructor(private _friendsService: FriendsService,
               private _authService: AuthService,
               private _router: Router
+
   ) {
     this.isLoggedIn = this._authService.isLoggedIn();
 
@@ -67,7 +68,11 @@ export class AppComponent {
 
   onSearch(search: Search) {
     if (search.value !== '') {
-      this._router.navigate(['VideosList', { search: search.value, field: search.field }]);
+      const params = {
+        search: search.value,
+        field: search.field
+      };
+      this._router.navigate(['VideosList', params]);
     } else {
       this._router.navigate(['VideosList']);
     }
diff --git a/client/angular/videos/components/list/video-sort.component.html b/client/angular/videos/components/list/video-sort.component.html
index b1392ccca..3bece0b22 100644
--- a/client/angular/videos/components/list/video-sort.component.html
+++ b/client/angular/videos/components/list/video-sort.component.html
@@ -1,4 +1,4 @@
-<select [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
+<select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
   <option *ngFor="let choice of choiceKeys" [value]="choice">
     {{ getStringChoice(choice) }}
   </option>
diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
index 5524ab546..3e30b39b0 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -1,6 +1,6 @@
-<div class="videos-info">
-  <span class="videos-total-results"> {{ pagination.total }}</span>
-  <my-video-sort [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+<div class="row videos-info">
+  <div class="col-md-9 videos-total-results"> {{ pagination.total }} videos</div>
+  <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
 </div>
 
 <div class="videos-miniatures">
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
index 05c38b833..2abc47b1b 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -10,3 +10,23 @@ pagination {
   display: block;
   text-align: center;
 }
+
+.videos-info {
+
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #f1f1f1;
+  height: 40px;
+  line-height: 40px;
+  width: 765px;
+  margin-left: 15px;
+
+  my-video-sort {
+    padding-right: 0;
+  }
+
+  .videos-total-results {
+    font-size: 13px;
+    padding-left: 0;
+  }
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index db64a856e..94b064e16 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -78,7 +78,17 @@ export class VideosListComponent implements OnInit {
 
   onSort(sort: SortField) {
     this.sort = sort;
-    this._router.navigate(['VideosList', { sort: this.sort }]);
+
+    const params: any = {
+      sort: this.sort
+    };
+
+    if (this.search.value) {
+      params.search = this.search.value;
+      params.field = this.search.field;
+    }
+
+    this._router.navigate(['VideosList', params]);
     this.getVideos();
   }
 }