Better admin tables

client/src/app/+admin/follows/followers-list/followers-list.component.html

@@ -2,7 +2,7 @@
     [value]="followers" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)"
 >
-  <p-column field="id" header="ID"></p-column>
+  <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
   <p-column field="follower.host" header="Host"></p-column>
   <p-column field="follower.score" header="Score"></p-column>
   <p-column field="state" header="State"></p-column>

client/src/app/+admin/follows/following-list/following-list.component.html

@@ -2,7 +2,7 @@
     [value]="following" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)"
 >
-  <p-column field="id" header="ID"></p-column>
+  <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
   <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>

client/src/app/+admin/jobs/jobs-list/jobs-list.component.html

@@ -6,9 +6,9 @@
     [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
     sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
 >
-  <p-column field="id" header="ID" [style]="{ width: '40px' }"></p-column>
+  <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
-  <p-column field="category" header="Category" [style]="{ width: '100px' }"></p-column>
+  <p-column field="category" header="Category" [style]="{ width: '130px' }"></p-column>
-  <p-column field="handlerName" header="Handler name" [style]="{ width: '200px' }"></p-column>
+  <p-column field="handlerName" header="Handler name" [style]="{ width: '210px' }"></p-column>
   <p-column header="Input data">
     <ng-template pTemplate="body" let-job="rowData">
       <pre>{{ job.handlerInputData }}</pre>

client/src/app/+admin/users/user-list/user-list.component.html

@@ -11,7 +11,7 @@
     [value]="users" [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="id" header="ID" [sortable]="true" [style]="{ width: '60px' }"></p-column>
   <p-column field="username" header="Username" [sortable]="true"></p-column>
   <p-column field="email" header="Email"></p-column>
   <p-column field="videoQuota" header="Video quota"></p-column>

client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html

@@ -6,7 +6,7 @@
     [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="id" header="ID" [sortable]="true" [style]="{ width: '60px' }"></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>

client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.html

@@ -9,10 +9,7 @@
       <p-column field="id" header="ID" [sortable]="true"></p-column>
       <p-column field="name" header="Name" [sortable]="true"></p-column>
       <p-column field="description" header="Description"></p-column>
-      <p-column field="duration" header="Duration" [sortable]="true"></p-column>
       <p-column field="views" header="Views" [sortable]="true"></p-column>
-      <p-column field="likes" header="Likes" [sortable]="true"></p-column>
-      <p-column field="dislikes" header="Dislikes" [sortable]="true"></p-column>
       <p-column field="nsfw" header="NSFW"></p-column>
       <p-column field="uuid" header="UUID" [sortable]="true"></p-column>
       <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>

client/src/app/shared/misc/edit-button.component.html

@@ -1,4 +1,4 @@
-<a class="action-button" [routerLink]="routerLink">
+<a class="action-button action-button-edit" [routerLink]="routerLink">
   <span class="icon icon-edit"></span>
   Edit
 </a>

client/src/app/videos/+video-watch/video-watch.component.scss

@@ -27,7 +27,8 @@
   line-height: 300px;
   margin-top: 50px;
   text-align: center;
-  font-weight: bold;
+  font-weight: $font-semibold;
+  font-size: 15px;
 }
 
 .video-bottom {

client/src/app/videos/+video-watch/video-watch.module.ts

@@ -1,15 +1,15 @@
 import { NgModule } from '@angular/core'
-
+import { TooltipModule } from 'ngx-bootstrap/tooltip'
-import { VideoWatchRoutingModule } from './video-watch-routing.module'
-import { MarkdownService } from '../shared'
-import { SharedModule } from '../../shared'
 import { ClipboardModule } from 'ngx-clipboard'
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { SharedModule } from '../../shared'
-
+import { MarkdownService } from '../shared'
-import { VideoWatchComponent } from './video-watch.component'
+import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
 import { VideoShareComponent } from './video-share.component'
-import { VideoDownloadComponent } from './video-download.component'
+
+import { VideoWatchRoutingModule } from './video-watch-routing.module'
+
+import { VideoWatchComponent } from './video-watch.component'
 
 @NgModule({
   imports: [

client/src/sass/application.scss

@@ -158,6 +158,9 @@ p-datatable {
   td {
     border: 1px solid #E5E5E5 !important;
     padding-left: 15px !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
   }
 
   tr {
@@ -191,17 +194,31 @@ p-datatable {
     font-weight: $font-semibold !important;
     color: #000 !important;
 
-    &.ui-sortable-column:hover:not(.ui-state-active) {
+    &.ui-sortable-column:hover {
       background-color: #f0f0f0 !important;
       border: 1px solid #f0f0f0 !important;
       border-width: 0 1px !important;
+
+      &:first-child {
+        border-width: 0 1px 0 0 !important;
+      }
     }
 
     &.ui-state-active {
-      color: #fff !important;
+      background-color: #fff !important;
-      background-color: $orange-color !important;
+
-      border: 1px solid $orange-color !important;
+      .fa {
-      border-width: 0 1px !important;
+        @extend .glyphicon;
+        font-size: 11px;
+
+        &.fa-sort-asc {
+          @extend .glyphicon-triangle-top;
+        }
+
+        &.fa-sort-desc {
+          @extend .glyphicon-triangle-bottom;
+        }
+      }
     }
   }
 
@@ -347,6 +364,15 @@ p-datatable {
   @include grey-button;
 }
 
+// In tables, don't have a hover different background
+table {
+  .action-button-edit, .action-button-delete {
+    &:hover, &:active, &:focus, &[disabled], &.disabled {
+      background-color: $grey-color !important;
+    }
+  }
+}
+
 // On small screen, menu is absolute
 @media screen and (max-width: 800px) {
   .title-menu-left {