From: Chocobozzz <florian.bigard@gmail.com>
Date: Fri, 21 Apr 2017 16:26:09 +0000 (+0200)
Subject: Client: beautiful watch page
X-Git-Tag: v0.0.1-alpha~461
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=897ec54d766902878d78abe04aa5b749f6b627f3;p=oweals%2Fpeertube.git

Client: beautiful watch page
---

diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.html b/client/src/app/+admin/friends/friend-add/friend-add.component.html
index eebe033f9..29c045414 100644
--- a/client/src/app/+admin/friends/friend-add/friend-add.component.html
+++ b/client/src/app/+admin/friends/friend-add/friend-add.component.html
@@ -1,30 +1,35 @@
-<h3>Make friends</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <h3>Make friends</h3>
 
-<form (ngSubmit)="makeFriends()" [formGroup]="form">
-  <div class="form-group"  *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
-    <label for="username">Host</label>
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-    <div class="input-group">
-      <input
-        type="text" class="form-control" placeholder="domain.tld"
-        [id]="'host-' + id" [formControlName]="'host-' + id"
-      />
-      <span class="input-group-btn">
-        <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
-        <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
-      </span>
-    </div>
+    <form (ngSubmit)="makeFriends()" [formGroup]="form">
+      <div class="form-group"  *ngFor="let host of hosts; let id = index; trackBy:customTrackBy">
+        <label for="username">Host</label>
 
-    <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
-      It should be a valid host.
-    </div>
-  </div>
+        <div class="input-group">
+          <input
+            type="text" class="form-control" placeholder="domain.tld"
+            [id]="'host-' + id" [formControlName]="'host-' + id"
+          />
+          <span class="input-group-btn">
+            <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
+            <button *ngIf="displayRemoveField(id)" (click)="removeField(id)" class="btn btn-default" type="button">-</button>
+          </span>
+        </div>
 
-  <div *ngIf="canMakeFriends() === false"  class="alert alert-warning">
-    It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends.
-  </div>
+        <div [hidden]="form.controls['host-' + id].valid || form.controls['host-' + id].pristine" class="alert alert-warning">
+          It should be a valid host.
+        </div>
+      </div>
 
-  <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
-</form>
+      <div *ngIf="canMakeFriends() === false"  class="alert alert-warning">
+        It seems that you are not on a HTTPS pod. Your webserver need to have TLS activated in order to make friends.
+      </div>
+
+      <input type="submit" value="Make friends" class="btn btn-default" [disabled]="!isFormValid()">
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html
index e15ecde14..45695f7c8 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.html
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html
@@ -1,11 +1,15 @@
-<h3>Friends list</h3>
+<div class="row">
+  <div class="content-padding">
+    <h3>Friends list</h3>
 
-<ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
+    <ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
 
-<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
-  Quit friends
-</a>
+    <a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
+      Quit friends
+    </a>
 
-<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
-  Make friends
-</a>
+    <a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
+      Make friends
+    </a>
+  </div>
+</div>
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.html b/client/src/app/+admin/requests/request-stats/request-stats.component.html
index f35da6535..29e7f7052 100644
--- a/client/src/app/+admin/requests/request-stats/request-stats.component.html
+++ b/client/src/app/+admin/requests/request-stats/request-stats.component.html
@@ -1,36 +1,41 @@
-<h3>Requests stats</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
-  <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
-    <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
+    <h3>Requests stats</h3>
 
-    <div class="panel-body">
-      <div class="requests-general">
-        <div>
-          <span class="label-description">Remaining requests:</span>
-          {{ stats[requestSchedulerName].totalRequests }}
-        </div>
+    <div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
+      <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
+        <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
 
-        <div>
-          <span class="label-description">Interval seconds between requests:</span>
-          {{ stats[requestSchedulerName].secondsInterval }}
-        </div>
+        <div class="panel-body">
+          <div class="requests-general">
+            <div>
+              <span class="label-description">Remaining requests:</span>
+              {{ stats[requestSchedulerName].totalRequests }}
+            </div>
 
-        <div>
-          <span class="label-description">Remaining time before the scheduled request:</span>
-          {{ stats[requestSchedulerName].remainingSeconds }}
-        </div>
-      </div>
+            <div>
+              <span class="label-description">Interval seconds between requests:</span>
+              {{ stats[requestSchedulerName].secondsInterval }}
+            </div>
 
-      <div class="requests-limit">
-        <div>
-          <span class="label-description">Maximum number of different pods for a scheduled request:</span>
-          {{ stats[requestSchedulerName].requestsLimitPods }}
-        </div>
+            <div>
+              <span class="label-description">Remaining time before the scheduled request:</span>
+              {{ stats[requestSchedulerName].remainingSeconds }}
+            </div>
+          </div>
+
+          <div class="requests-limit">
+            <div>
+              <span class="label-description">Maximum number of different pods for a scheduled request:</span>
+              {{ stats[requestSchedulerName].requestsLimitPods }}
+            </div>
 
-        <div>
-          <span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
-          {{ stats[requestSchedulerName].requestsLimitPerPod }}
+            <div>
+              <span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
+              {{ stats[requestSchedulerName].requestsLimitPerPod }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/app/+admin/users/user-add/user-add.component.html b/client/src/app/+admin/users/user-add/user-add.component.html
index 105760f48..9b487aa75 100644
--- a/client/src/app/+admin/users/user-add/user-add.component.html
+++ b/client/src/app/+admin/users/user-add/user-add.component.html
@@ -1,40 +1,45 @@
-<h3>Add user</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <h3>Add user</h3>
 
-<form role="form" (ngSubmit)="addUser()" [formGroup]="form">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input
-      type="text" class="form-control" id="username" placeholder="Username"
-      formControlName="username"
-    >
-    <div *ngIf="formErrors.username" class="alert alert-danger">
-      {{ formErrors.username }}
-    </div>
-  </div>
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-  <div class="form-group">
-    <label for="email">Email</label>
-    <input
-      type="text" class="form-control" id="email" placeholder="Email"
-      formControlName="email"
-    >
-    <div *ngIf="formErrors.email" class="alert alert-danger">
-      {{ formErrors.email }}
-    </div>
-  </div>
+    <form role="form" (ngSubmit)="addUser()" [formGroup]="form">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input
+          type="text" class="form-control" id="username" placeholder="Username"
+          formControlName="username"
+        >
+        <div *ngIf="formErrors.username" class="alert alert-danger">
+          {{ formErrors.username }}
+        </div>
+      </div>
 
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input
-      type="password" class="form-control" id="password" placeholder="Password"
-      formControlName="password"
-    >
-    <div *ngIf="formErrors.password" class="alert alert-danger">
-      {{ formErrors.password }}
-    </div>
-  </div>
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+          type="text" class="form-control" id="email" placeholder="Email"
+          formControlName="email"
+        >
+        <div *ngIf="formErrors.email" class="alert alert-danger">
+          {{ formErrors.email }}
+        </div>
+      </div>
 
-  <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
-</form>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          type="password" class="form-control" id="password" placeholder="Password"
+          formControlName="password"
+        >
+        <div *ngIf="formErrors.password" class="alert alert-danger">
+          {{ formErrors.password }}
+        </div>
+      </div>
+
+      <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 3d3d7e054..bb4c99a3f 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -1,11 +1,16 @@
-<h3>Users list</h3>
+<div class="row">
+  <div class="content-padding">
 
-<ng2-smart-table
-  [settings]="tableSettings" [source]="usersSource"
-  (delete)="removeUser($event)"
-></ng2-smart-table>
+    <h3>Users list</h3>
 
-<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
-  <span class="glyphicon glyphicon-plus"></span>
-  Add user
-</a>
+    <ng2-smart-table
+      [settings]="tableSettings" [source]="usersSource"
+      (delete)="removeUser($event)"
+    ></ng2-smart-table>
+
+    <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
+      <span class="glyphicon glyphicon-plus"></span>
+      Add user
+    </a>
+  </div>
+</div>
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 b2fd17bf0..c6723a734 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,5 +1,11 @@
-<h3>Video abuses list</h3>
+<div class="row">
+  <div class="content-padding">
 
-<ng2-smart-table
-  [settings]="tableSettings" [source]="videoAbusesSource"
-></ng2-smart-table>
+  <h3>Video abuses list</h3>
+
+  <ng2-smart-table
+    [settings]="tableSettings" [source]="videoAbusesSource"
+  ></ng2-smart-table>
+
+  </div>
+</div>
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index c0995dad0..177e54999 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -1,21 +1,25 @@
-<h3>Account</h3>
+<div class="row">
+  <div class="content-padding">
+    <h3>Account</h3>
 
-<div class="col-md-6 col-sm-12">
-<div class="panel panel-default">
-  <div class="panel-heading">Change password</div>
+    <div class="col-md-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Change password</div>
 
-  <div class="panel-body">
-    <my-account-change-password></my-account-change-password>
-  </div>
-</div>
-</div>
+        <div class="panel-body">
+          <my-account-change-password></my-account-change-password>
+        </div>
+      </div>
+    </div>
 
-<div class="col-md-6 col-sm-12">
-<div class="panel panel-default">
-  <div class="panel-heading">Update my informations</div>
+    <div class="col-md-6 col-sm-12">
+      <div class="panel panel-default">
+        <div class="panel-heading">Update my informations</div>
 
-  <div class="panel-body">
-    <my-account-details [user]="user"></my-account-details>
+        <div class="panel-body">
+          <my-account-details [user]="user"></my-account-details>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
-</div>
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 061ebe134..3f946d581 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -16,15 +16,16 @@
     </div>
 
     <div class="col-md-10 col-sm-9 col-xs-9 main-col">
-      <div class="header">
-        <my-search></my-search>
+      <div class="row header">
+        <!-- We need to reset col-md-* because my-search is in fixed position -->
+        <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
       </div>
 
       <div class="main-row">
         <router-outlet></router-outlet>
       </div>
 
-      <footer>
+      <footer class="row">
         PeerTube, CopyLeft 2015-2017
       </footer>
     </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index dc4dcf28b..2d0487cd8 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -30,10 +30,15 @@
   }
 }
 
+my-search {
+  // Fix col-md-* padding
+  padding: 0;
+}
+
 footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 10px;
+  border-top: 1px solid $footer-border-color;
+  padding: 10px 0;
   text-align: center;
-  font-size: small;
-  margin: 30px 10px 0 10px;
+  font-size: 11px;
+  margin-top: 30px;
 }
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 94a405405..bcea0a27a 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,29 +1,34 @@
-<h3>Login</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <h3>Login</h3>
 
-<form role="form" (ngSubmit)="login()" [formGroup]="form">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input
-      type="text" class="form-control" id="username" placeholder="Username" required
-      formControlName="username"
-    >
-    <div *ngIf="formErrors.username" class="alert alert-danger">
-      {{ formErrors.username }}
-    </div>
-  </div>
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input
-      type="password" class="form-control" name="password" id="password" placeholder="Password" required
-      formControlName="password"
-    >
-    <div *ngIf="formErrors.password" class="alert alert-danger">
-      {{ formErrors.password }}
-    </div>
-  </div>
+    <form role="form" (ngSubmit)="login()" [formGroup]="form">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input
+          type="text" class="form-control" id="username" placeholder="Username" required
+          formControlName="username"
+        >
+        <div *ngIf="formErrors.username" class="alert alert-danger">
+          {{ formErrors.username }}
+        </div>
+      </div>
 
-  <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
-</form>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          type="password" class="form-control" name="password" id="password" placeholder="Password" required
+          formControlName="password"
+        >
+        <div *ngIf="formErrors.password" class="alert alert-danger">
+          {{ formErrors.password }}
+        </div>
+      </div>
+
+      <input type="submit" value="Login" class="btn btn-default" [disabled]="!form.valid">
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index 6c9c60e8b..b8b7826eb 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -1,40 +1,46 @@
-<h3>Signup</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+  <h3>Signup</h3>
 
-<form role="form" (ngSubmit)="signup()" [formGroup]="form">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input
-      type="text" class="form-control" id="username" placeholder="Username"
-      formControlName="username"
-    >
-    <div *ngIf="formErrors.username" class="alert alert-danger">
-      {{ formErrors.username }}
+  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+  <form role="form" (ngSubmit)="signup()" [formGroup]="form">
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input
+        type="text" class="form-control" id="username" placeholder="Username"
+        formControlName="username"
+      >
+      <div *ngIf="formErrors.username" class="alert alert-danger">
+        {{ formErrors.username }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="email">Email</label>
-    <input
-      type="text" class="form-control" id="email" placeholder="Email"
-      formControlName="email"
-    >
-    <div *ngIf="formErrors.email" class="alert alert-danger">
-      {{ formErrors.email }}
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input
+        type="text" class="form-control" id="email" placeholder="Email"
+        formControlName="email"
+      >
+      <div *ngIf="formErrors.email" class="alert alert-danger">
+        {{ formErrors.email }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input
-      type="password" class="form-control" id="password" placeholder="Password"
-      formControlName="password"
-    >
-    <div *ngIf="formErrors.password" class="alert alert-danger">
-      {{ formErrors.password }}
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input
+        type="password" class="form-control" id="password" placeholder="Password"
+        formControlName="password"
+      >
+      <div *ngIf="formErrors.password" class="alert alert-danger">
+        {{ formErrors.password }}
+      </div>
     </div>
-  </div>
 
-  <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
-</form>
+    <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
+  </form>
+
+  </div>
+</div>
diff --git a/client/src/app/videos/video-edit/video-add.component.html b/client/src/app/videos/video-edit/video-add.component.html
index 04f4f85b0..7ad671ae7 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/video-edit/video-add.component.html
@@ -1,114 +1,119 @@
-<h3>Upload a video</h3>
-
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
-<form novalidate [formGroup]="form">
-  <div class="form-group">
-    <label for="name">Name</label>
-    <input
-      type="text" class="form-control" id="name"
-      formControlName="name"
-    >
-    <div *ngIf="formErrors.name" class="alert alert-danger">
-      {{ formErrors.name }}
-    </div>
+<div class="row">
+  <div class="content-padding">
+
+    <h3>Upload a video</h3>
+
+    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+    <form novalidate [formGroup]="form">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input
+          type="text" class="form-control" id="name"
+          formControlName="name"
+        >
+        <div *ngIf="formErrors.name" class="alert alert-danger">
+          {{ formErrors.name }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="nsfw">NSFW</label>
+        <input
+          type="checkbox" id="nsfw"
+          formControlName="nsfw"
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="category">Category</label>
+        <select class="form-control" id="category" formControlName="category">
+          <option></option>
+          <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+        </select>
+
+        <div *ngIf="formErrors.category" class="alert alert-danger">
+          {{ formErrors.category }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="licence">Licence</label>
+        <select class="form-control" id="licence" formControlName="licence">
+          <option></option>
+          <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+        </select>
+
+        <div *ngIf="formErrors.licence" class="alert alert-danger">
+          {{ formErrors.licence }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="language">Language</label>
+        <select class="form-control" id="language" formControlName="language">
+          <option></option>
+          <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+        </select>
+
+        <div *ngIf="formErrors.language" class="alert alert-danger">
+          {{ formErrors.language }}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+        <tag-input
+          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+          formControlName="tags" maxItems="3" modelAsStrings="true"
+        ></tag-input>
+      </div>
+
+      <div class="form-group">
+        <label for="videofile">File</label>
+        <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
+          <span>Select the video...</span>
+          <input
+            type="file" name="videofile" id="videofile"
+            ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
+            (change)="fileChanged()"
+          >
+        </div>
+      </div>
+
+      <div class="file-to-upload">
+        <div class="file" *ngIf="uploader.queue.length > 0">
+          <span class="filename">{{ filename }}</span>
+          <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
+        </div>
+      </div>
+
+      <div *ngIf="fileError" class="alert alert-danger">
+        {{ fileError }}
+      </div>
+
+      <div class="form-group">
+        <label for="description">Description</label>
+        <textarea
+          id="description" class="form-control" placeholder="Description..."
+          formControlName="description"
+        >
+        </textarea>
+        <div *ngIf="formErrors.description" class="alert alert-danger">
+          {{ formErrors.description }}
+        </div>
+      </div>
+
+      <div class="progress">
+        <progressbar [value]="uploader.progress" max="100"></progressbar>
+      </div>
+
+      <div class="form-group">
+        <input
+          type="button" value="Upload" class="btn btn-default form-control"
+          (click)="upload()"
+        >
+      </div>
+    </form>
   </div>
-
-  <div class="form-group">
-    <label for="nsfw">NSFW</label>
-    <input
-      type="checkbox" id="nsfw"
-      formControlName="nsfw"
-    >
-  </div>
-
-  <div class="form-group">
-    <label for="category">Category</label>
-    <select class="form-control" id="category" formControlName="category">
-      <option></option>
-      <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-    </select>
-
-    <div *ngIf="formErrors.category" class="alert alert-danger">
-      {{ formErrors.category }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="licence">Licence</label>
-    <select class="form-control" id="licence" formControlName="licence">
-      <option></option>
-      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-    </select>
-
-    <div *ngIf="formErrors.licence" class="alert alert-danger">
-      {{ formErrors.licence }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="language">Language</label>
-    <select class="form-control" id="language" formControlName="language">
-      <option></option>
-      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-    </select>
-
-    <div *ngIf="formErrors.language" class="alert alert-danger">
-      {{ formErrors.language }}
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-    <tag-input
-      [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-      formControlName="tags" maxItems="3" modelAsStrings="true"
-    ></tag-input>
-  </div>
-
-  <div class="form-group">
-    <label for="videofile">File</label>
-    <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
-      <span>Select the video...</span>
-      <input
-        type="file" name="videofile" id="videofile"
-        ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
-        (change)="fileChanged()"
-      >
-    </div>
-  </div>
-
-  <div class="file-to-upload">
-    <div class="file" *ngIf="uploader.queue.length > 0">
-      <span class="filename">{{ filename }}</span>
-      <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
-    </div>
-  </div>
-
-  <div *ngIf="fileError" class="alert alert-danger">
-    {{ fileError }}
-  </div>
-
-  <div class="form-group">
-    <label for="description">Description</label>
-    <textarea
-      id="description" class="form-control" placeholder="Description..."
-      formControlName="description"
-    >
-    </textarea>
-    <div *ngIf="formErrors.description" class="alert alert-danger">
-      {{ formErrors.description }}
-    </div>
-  </div>
-
-  <div class="progress">
-    <progressbar [value]="uploader.progress" max="100"></progressbar>
-  </div>
-
-  <div class="form-group">
-    <input
-      type="button" value="Upload" class="btn btn-default form-control"
-      (click)="upload()"
-    >
-  </div>
-</form>
+</div>
diff --git a/client/src/app/videos/video-edit/video-update.component.html b/client/src/app/videos/video-edit/video-update.component.html
index bedbc91b8..7f4faf21b 100644
--- a/client/src/app/videos/video-edit/video-update.component.html
+++ b/client/src/app/videos/video-edit/video-update.component.html
@@ -1,87 +1,92 @@
-<h3>Update {{ video?.name }}</h3>
+<div class="row">
+  <div class="content-padding">
 
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+  <h3>Update {{ video?.name }}</h3>
 
-<form novalidate [formGroup]="form">
-  <div class="form-group">
-    <label for="name">Name</label>
-    <input
-      type="text" class="form-control" id="name"
-      formControlName="name"
-    >
-    <div *ngIf="formErrors.name" class="alert alert-danger">
-      {{ formErrors.name }}
+  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+  <form novalidate [formGroup]="form">
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input
+        type="text" class="form-control" id="name"
+        formControlName="name"
+      >
+      <div *ngIf="formErrors.name" class="alert alert-danger">
+        {{ formErrors.name }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="nsfw">NSFW</label>
-    <input
-      type="checkbox" id="nsfw"
-      formControlName="nsfw"
-    >
-  </div>
+    <div class="form-group">
+      <label for="nsfw">NSFW</label>
+      <input
+        type="checkbox" id="nsfw"
+        formControlName="nsfw"
+      >
+    </div>
 
-  <div class="form-group">
-    <label for="category">Category</label>
-    <select class="form-control" id="category" formControlName="category">
-      <option></option>
-      <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-    </select>
+    <div class="form-group">
+      <label for="category">Category</label>
+      <select class="form-control" id="category" formControlName="category">
+        <option></option>
+        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.category" class="alert alert-danger">
-      {{ formErrors.category }}
+      <div *ngIf="formErrors.category" class="alert alert-danger">
+        {{ formErrors.category }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="licence">Licence</label>
-    <select class="form-control" id="licence" formControlName="licence">
-      <option></option>
-      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-    </select>
+    <div class="form-group">
+      <label for="licence">Licence</label>
+      <select class="form-control" id="licence" formControlName="licence">
+        <option></option>
+        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.licence" class="alert alert-danger">
-      {{ formErrors.licence }}
+      <div *ngIf="formErrors.licence" class="alert alert-danger">
+        {{ formErrors.licence }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="language">Language</label>
-    <select class="form-control" id="language" formControlName="language">
-      <option></option>
-      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-    </select>
+    <div class="form-group">
+      <label for="language">Language</label>
+      <select class="form-control" id="language" formControlName="language">
+        <option></option>
+        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+      </select>
 
-    <div *ngIf="formErrors.language" class="alert alert-danger">
-      {{ formErrors.language }}
+      <div *ngIf="formErrors.language" class="alert alert-danger">
+        {{ formErrors.language }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-    <tag-input
-      [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-      formControlName="tags" maxItems="3" modelAsStrings="true"
-    ></tag-input>
-  </div>
+    <div class="form-group">
+      <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+      <tag-input
+        [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+        formControlName="tags" maxItems="3" modelAsStrings="true"
+      ></tag-input>
+    </div>
 
-  <div class="form-group">
-    <label for="description">Description</label>
-    <textarea
-      id="description" class="form-control" placeholder="Description..."
-      formControlName="description"
-    >
-    </textarea>
-    <div *ngIf="formErrors.description" class="alert alert-danger">
-      {{ formErrors.description }}
+    <div class="form-group">
+      <label for="description">Description</label>
+      <textarea
+        id="description" class="form-control" placeholder="Description..."
+        formControlName="description"
+      >
+      </textarea>
+      <div *ngIf="formErrors.description" class="alert alert-danger">
+        {{ formErrors.description }}
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <input
-      type="button" value="Update" class="btn btn-default form-control"
-      (click)="update()"
-    >
+    <div class="form-group">
+      <input
+        type="button" value="Update" class="btn btn-default form-control"
+        (click)="update()"
+      >
+    </div>
+  </form>
   </div>
-</form>
+</div>
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 2a753adba..72d5512a6 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,16 +1,19 @@
-<div class="row col-md-12 videos-info">
-  <div class="col-md-9 col-xs-5 videos-total-results">
-    <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
-
-    <my-loader [loading]="loading | async"></my-loader>
-  </div>
+<div class="row">
+  <div class="content-padding">
+    <div class="videos-info">
+      <div class="col-md-9 col-xs-5 videos-total-results">
+        <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
 
+        <my-loader [loading]="loading | async"></my-loader>
+      </div>
 
-  <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+      <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+    </div>
+  </div>
 </div>
 
-<div class="videos-miniatures">
-  <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
+<div class="content-padding videos-miniatures">
+  <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
 
   <my-video-miniature
     class="ng-animate"
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 5ece9d003..eddcf0776 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -3,18 +3,12 @@
     margin-left: 0;
   }
 
-  margin-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;
   height: 40px;
   line-height: 40px;
 
-  my-video-sort {
-    padding-right: 0;
-  }
-
   .videos-total-results {
     font-size: 13px;
-    padding-left: 0;
   }
 
   my-loader {
@@ -26,6 +20,7 @@
 .videos-miniatures {
   min-height: 720px;
   text-align: center;
+  padding-top: 0;
 
   my-video-miniature {
     text-align: left;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 0b0b0d944..826aa6a29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -25,9 +25,6 @@
     </span>
 
     <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
-    <span class="video-miniature-views-created-at">
-      <span class="video-miniature-views">{{ video.views }} views</span>
-      <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
-    </span>
+    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
   </div>
 </div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 1a73648c4..778bffa29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -64,7 +64,6 @@
       font-weight: bold;
       transition: color 0.2s;
       font-size: 15px;
-      color: $video-miniature-title-color;
 
       &:hover {
         text-decoration: none;
@@ -88,17 +87,12 @@
       }
     }
 
-    .video-miniature-author, .video-miniature-views-created-at {
+    .video-miniature-author, .video-miniature-created-at {
       display: block;
       margin-left: 1px;
       font-size: 11px;
       color: $video-miniature-other-infos;
       opacity: 0.9;
-
-      .video-miniature-created-at::before {
-        content: '\002022';
-        margin: 0 2px 0 1px;
-      }
     }
 
     .video-miniature-author {
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 989de0de4..059465d65 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -14,14 +14,12 @@
 </div>
 
 <div class="row">
-  <div class="col-md-12">
-    <!-- We need the video container for videojs so we just hide it -->
-    <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
-       <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
-    </div>
-
-    <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
+  <!-- We need the video container for videojs so we just hide it -->
+  <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
+     <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
   </div>
+
+  <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
 </div>
 
 <div id="torrent-info" class="row">
@@ -32,7 +30,7 @@
 
 <div *ngIf="video !== null" id="video-info">
   <div class="row video-name-views">
-    <div id="video-name" class="col-md-8">
+    <div class="col-md-8 video-name">
       {{ video.name }}
     </div>
 
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index abd2832df..a8c7fdbac 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -37,10 +37,15 @@
     font-size: 18px;
     height: $video-watch-title-height;
     line-height: $video-watch-title-height;
-    padding: 0 30px;
+
+    .video-name {
+      padding-left: $video-watch-info-padding-left;
+    }
 
     .video-views {
       text-align: right;
+      // Keep a symmetry with the video name
+      padding-right: $video-watch-info-padding-left
     }
   }
 
@@ -94,6 +99,8 @@
     .video-small-block-author {
       font-size: 15px;
       font-weight: bold;
+      text-align: left;
+      padding-left: $video-watch-info-padding-left;
     }
 
     .video-small-block-share, .video-small-block-more {
@@ -144,7 +151,7 @@
     margin-top: 30px;
 
     .video-details-date-description {
-      padding-left: 30px;
+      padding-left: $video-watch-info-padding-left;
 
       .video-details-date {
         font-weight: bold;
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index bb6799665..723b2bcc8 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -9,10 +9,12 @@ $menu-color-block: #686f77;
 $header-height: 65px;
 $header-border-color: #e9eff6;
 
-$video-miniature-title-color: #16a2b7;
+$footer-border-color: $header-border-color;
+
 $video-miniature-other-infos: #686767;
 
 $video-watch-border-color: #eceef4;
 $video-watch-title-height: 90px;
 $video-watch-info-color: #8e909b;
 $video-watch-info-height: 120px;
+$video-watch-info-padding-left: 40px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 571372c2b..c0b40445e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -41,9 +41,8 @@ input.readonly {
 }
 
 .main-col {
-  padding: 0;
 
-  .main-row {
+  .content-padding {
     padding: 15px 30px;
 
     @media screen and (min-width: 1400px) {