Finish admin design

12 files changed, 70 insertions, 56 deletions

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 3e70b418c..2b6cc9113 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -6,7 +6,7 @@
   <p-column field="following.host" header="Host"></p-column>
   <p-column field="state" header="State"></p-column>
   <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-  <p-column header="Unfollow" styleClass="action-cell">
+  <p-column styleClass="action-cell">
     <ng-template pTemplate="body" let-following="rowData">
       <my-delete-button (click)="removeFollowing(following)"></my-delete-button>
     </ng-template>
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index 29103c06b..7aa5f4254 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -8,7 +8,7 @@
 >
   <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column>
   <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column>
-  <p-column field="handlerName" header="Handler name" [style]="{ width: '150px' }"></p-column>
+  <p-column field="handlerName" header="Handler name" [style]="{ width: '200px' }"></p-column>
   <p-column header="Input data">
     <ng-template pTemplate="body" let-job="rowData">
       <pre>{{ job.handlerInputData }}</pre>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
index ab0a9d99f..d655a5e9b 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html
@@ -1,24 +1,19 @@
-<div class="row">
-  <div class="content-padding">
-
-  <h3>Video abuses list</h3>
-
-  <p-dataTable
-      [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-      sortField="id" (onLazyLoad)="loadLazy($event)"
-  >
-    <p-column field="id" header="ID" [sortable]="true"></p-column>
-    <p-column field="reason" header="Reason"></p-column>
-    <p-column field="reporterServerHost" header="Reporter server host"></p-column>
-    <p-column field="reporterUsername" header="Reporter username"></p-column>
-    <p-column field="videoName" header="Video name"></p-column>
-    <p-column header="Video" styleClass="action-cell">
-      <ng-template pTemplate="body" let-videoAbuse="rowData">
-        <a [routerLink]="getRouterVideoLink(videoAbuse.videoId)" title="Go to the video">{{ videoAbuse.videoId }}</a>
-      </ng-template>
-    </p-column>
-    <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-  </p-dataTable>
-
-  </div>
+<div class="admin-sub-header">
+  <div class="admin-sub-title">Video abuses list</div>
 </div>
+
+<p-dataTable
+    [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="id" (onLazyLoad)="loadLazy($event)"
+>
+  <p-column field="id" header="ID" [sortable]="true"></p-column>
+  <p-column field="reason" header="Reason"></p-column>
+  <p-column field="reporterServerHost" header="Reporter server host"></p-column>
+  <p-column field="reporterUsername" header="Reporter username"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
+  <p-column header="Video">
+    <ng-template pTemplate="body" let-videoAbuse="rowData">
+      <a [routerLink]="getRouterVideoLink(videoAbuse.videoId)" title="Go to the video">{{ videoAbuse.videoName }}</a>
+    </ng-template>
+  </p-column>
+</p-dataTable>
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
new file mode 100644
index 000000000..6a4762650
--- /dev/null
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.scss
@@ -0,0 +1,6 @@
+/deep/ a {
+
+  &, &:hover, &:active, &:focus {
+    color: #000;
+  }
+}
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
index 654603d01..b4d3bbd24 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -8,7 +8,8 @@ import { VideoAbuse } from '../../../../../../shared'
 
 @Component({
   selector: 'my-video-abuse-list',
-  templateUrl: './video-abuse-list.component.html'
+  templateUrl: './video-abuse-list.component.html',
+  styleUrls: [ './video-abuse-list.component.scss']
 })
 export class VideoAbuseListComponent extends RestTable implements OnInit {
   videoAbuses: VideoAbuse[] = []
diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
index 05d116798..1d813fa07 100644
--- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html
@@ -18,7 +18,7 @@
       <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
       <p-column header="Delete" styleClass="action-cell">
         <ng-template pTemplate="body" let-entry="rowData">
-          <span (click)="removeVideoFromBlacklist(entry)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this video from blacklist"></span>
+          <my-delete-button (click)="removeVideoFromBlacklist(entry)"></my-delete-button>
         </ng-template>
       </p-column>
     </p-dataTable>
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 0db197f02..e887dde1f 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -169,19 +169,15 @@ export class AuthService {
 
     return this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
                     .map(res => this.handleRefreshToken(res))
-                    .catch(res => {
-                      // The refresh token is invalid?
-                      if (res.status === 400 && res.error.error === 'invalid_grant') {
-                        console.error('Cannot refresh token -> logout...')
-                        this.logout()
-                        this.router.navigate(['/login'])
-
-                        return Observable.throw({
-                          error: 'You need to reconnect.'
-                        })
-                      }
-
-                      return this.restExtractor.handleError(res)
+                    .catch(err => {
+                      console.error(err)
+                      console.log('Cannot refresh token -> logout...')
+                      this.logout()
+                      this.router.navigate(['/login'])
+
+                      return Observable.throw({
+                        error: 'You need to reconnect.'
+                      })
                     })
   }
 
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index ee1ed2cb2..ba1635a18 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -62,7 +62,7 @@ export abstract class AbstractVideoList implements OnInit {
     observable.subscribe(
       ({ videos, totalVideos }) => {
         // Paging is too high, return to the first one
-        if (totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
+        if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) {
           this.pagination.currentPage = 1
           this.setNewRouteParams()
           return this.reloadVideos()
@@ -82,6 +82,10 @@ export abstract class AbstractVideoList implements OnInit {
   }
 
   protected hasMoreVideos () {
+    // No results
+    if (this.pagination.totalItems === 0) return false
+
+    // Not loaded yet
     if (!this.pagination.totalItems) return true
 
     const maxPage = this.pagination.totalItems / this.pagination.itemsPerPage
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
index da66a9753..5d05467be 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.html
@@ -1,6 +1,6 @@
 <textarea
   [(ngModel)]="description" (ngModelChange)="onModelChange()"
-  id="description" placeholder="My super video">
+  id="description" name="description">
 </textarea>
 
 <tabset #staticTabs class="previews">
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
index 8155cbca7..2a4c8d189 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -4,4 +4,21 @@ textarea {
   padding: 5px 15px;
   font-size: 15px;
   height: 150px;
+  margin-bottom: 15px;
 }
+
+/deep/ {
+  .nav-link {
+    display: flex !important;
+    align-items: center;
+    height: 30px !important;
+    padding: 0 15px !important;
+  }
+
+  .tab-content {
+    min-height: 75px;
+    padding: 15px;
+    font-size: 15px;
+  }
+}
+
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.ts b/client/src/app/videos/+video-edit/shared/video-description.component.ts
index 8dfb74b2a..9b77a27e6 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.ts
@@ -60,6 +60,8 @@ export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
   }
 
   private updateDescriptionPreviews () {
+    if (!this.description) return
+
     this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
     this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
   }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ecbb8dac5..5a4aa4cd9 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -165,7 +165,7 @@ p-datatable {
 
   td {
     border: 1px solid #E5E5E5 !important;
-    padding: 15px;
+    padding-left: 15px !important;
   }
 
   tr {
@@ -185,6 +185,10 @@ p-datatable {
     &:first-child td {
       border-top: none !important;
     }
+
+    &:last-child td {
+      border-bottom: none !important;
+    }
   }
 
   th {
@@ -198,6 +202,7 @@ p-datatable {
     &.ui-state-active, &.ui-sortable-column:hover {
       background-color: #f0f0f0 !important;
       border: 1px solid #f0f0f0 !important;
+      border-width: 0 1px !important;
     }
   }
 
@@ -208,17 +213,10 @@ p-datatable {
   }
 
   p-paginator {
-    overflow: hidden;
-    display: block;
-    padding-top: 2px;
-    border: 1px solid #f0f0f0 !important;
-    border-top: none !important;
-
     .ui-paginator-bottom {
       position: relative;
       border: none !important;
-      border-top: 1px solid #f0f0f0 !important;
-      box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.16);
+      border: 1px solid #f0f0f0 !important;
       height: 40px;
       display: flex;
       justify-content: center;
@@ -298,11 +296,6 @@ p-datatable {
       font-weight: $font-semibold !important;
     }
   }
-
-  .tab-content {
-    min-height: 75px;
-    padding: 15px;
-  }
 }