Make the sort/results bar less ugly

diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
index 3a6df844aa94f639c0019549e2042e26676fb07a..722d0dca03172c1830cedf9d575c6775d79ca906 100644 (file)
--- 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 b1392ccca0d02dea3b75fc07e50e665721c724ef..3bece0b224110ef1b5b9711256bca64f173c46fc 100644 (file)
--- 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 5524ab546ce760930878978f9e0bc1b75b9bab28..3e30b39b0ad286fa3b33f33699a0454b98c0aace 100644 (file)
--- 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 05c38b833eb927ec044827667e46d58b9046dd12..2abc47b1bcc5b62c212fd849c65f883d8325833d 100644 (file)
--- 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 db64a856e0d77bf7cf470c2ea3da14bc13a22b3b..94b064e163aa7654a6ccb4b9863a4518abd117b2 100644 (file)
--- 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();
   }
 }