Client: responsive design

client/.bootstraprc

@@ -10,9 +10,9 @@ useCustomIconFontPath: true
 
 # Webpack loaders, order matters
 styleLoaders:
-  - style
+  - style-loader
-  - css
+  - css-loader
-  - sass
+  - sass-loader
 
 # Extract styles to stand-alone css file
 # Different settings for different environments can be used,
@@ -94,7 +94,7 @@ styles:
   progress-bars: true
   media: true
   list-group: false
-  panels: false
+  panels: true
   wells: false
   responsive-embed: true
   close: true

client/config/webpack.common.js

@@ -119,8 +119,25 @@ module.exports = function (options) {
 
         {
           test: /\.(sass|scss)$/,
-          use: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url-loader', 'sass-loader?sourceMap'],
+          use: [
-          exclude: [ helpers.root('src', 'styles') ]
+            'css-to-string-loader',
+            'css-loader?sourceMap',
+            'resolve-url-loader',
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true
+              }
+            },
+            {
+              loader: 'sass-resources-loader',
+              options: {
+                resources: [
+                  helpers.root('src/sass/_variables.scss')
+                ]
+              }
+            }
+          ]
         },
         { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&minetype=application/font-woff' },
         { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'file-loader' },
@@ -133,7 +150,10 @@ module.exports = function (options) {
         {
           test: /\.html$/,
           loader: 'raw-loader',
-          exclude: [ helpers.root('src/index.html'), helpers.root('src/standalone/videos/embed.html') ]
+          exclude: [
+            helpers.root('src/index.html'),
+            helpers.root('src/standalone/videos/embed.html')
+          ]
         }
 
       ]
@@ -262,7 +282,8 @@ module.exports = function (options) {
       new LoaderOptionsPlugin({
         options: {
           sassLoader: {
-            precision: 10
+            precision: 10,
+            includePaths: [ helpers.root('src/sass') ]
           }
         }
       }),

client/config/webpack.dev.js

@@ -90,23 +90,24 @@ module.exports = function (env) {
 
     module: {
 
-      rules: [
+      // Too slow, life is short
-        {
+      // rules: [
-          test: /\.ts$/,
+      //   {
-          use: [
+      //     test: /\.ts$/,
-            {
+      //     use: [
-              loader: 'tslint-loader',
+      //       {
-              options: {
+      //         loader: 'tslint-loader',
-                configFile: 'tslint.json'
+      //         options: {
-              }
+      //           configFile: 'tslint.json'
-            }
+      //         }
-          ],
+      //       }
-          exclude: [
+      //     ],
-            /\.(spec|e2e)\.ts$/,
+      //     exclude: [
-            /node_modules\//
+      //       /\.(spec|e2e)\.ts$/,
-          ]
+      //       /node_modules\//
-        }
+      //     ]
-      ]
+      //   }
+      // ]
     },
 
     plugins: [
@@ -202,6 +203,7 @@ module.exports = function (env) {
           tslint: {
             emitErrors: false,
             failOnHint: false,
+            typeCheck: true,
             resourcePath: 'src'
           },
 

client/package.json

@@ -18,10 +18,10 @@
   },
   "license": "GPLv3",
   "dependencies": {
-    "@angular/animations": "^4.0.2",
+    "@angular/animations": "~4.0.0",
     "@angular/common": "~4.0.0",
     "@angular/compiler": "~4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "~4.0.0",
     "@angular/core": "~4.0.0",
     "@angular/forms": "~4.0.0",
     "@angular/http": "~4.0.0",
@@ -43,14 +43,14 @@
     "assets-webpack-plugin": "^3.4.0",
     "awesome-typescript-loader": "3.0.0-beta.18",
     "bootstrap": "^3.3.6",
-    "bootstrap-loader": "2.0.0-beta.18",
+    "bootstrap-loader": "2.0.0",
     "bootstrap-sass": "^3.3.6",
     "copy-webpack-plugin": "^4.0.0",
     "core-js": "^2.4.1",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.28.0",
     "css-to-string-loader": "^0.1.2",
     "es6-shim": "^0.35.0",
-    "file-loader": "^0.9.0",
+    "file-loader": "^0.11.0",
     "html-webpack-plugin": "^2.19.0",
     "ie-shim": "^0.1.0",
     "intl": "^1.2.4",
@@ -59,7 +59,7 @@
     "ng2-file-upload": "^1.1.4-2",
     "ng2-smart-table": "1.0.3",
     "ng2-tag-input": "^1.0.5",
-    "ngc-webpack": "1.1.0",
+    "ngc-webpack": "2.0.0",
     "ngx-bootstrap": "1.6.6",
     "node-sass": "^4.1.1",
     "normalize.css": "^5.0.0",
@@ -68,11 +68,12 @@
     "reflect-metadata": "^0.1.9",
     "resolve-url-loader": "^1.6.0",
     "rxjs": "~5.0.0-rc.5",
-    "sass-loader": "^4.0.2",
+    "sass-loader": "^6.0.3",
+    "sass-resources-loader": "^1.2.1",
     "script-ext-html-webpack-plugin": "^1.3.2",
-    "source-map-loader": "^0.1.5",
+    "source-map-loader": "^0.2.1",
     "string-replace-loader": "^1.0.3",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.16.1",
     "tslib": "^1.5.0",
     "tslint": "~4.3.1",
     "tslint-loader": "^3.3.0",
@@ -82,14 +83,14 @@
     "videojs-dock": "^2.0.2",
     "webpack": "^2.2.0",
     "webpack-md5-hash": "0.0.5",
-    "webpack-merge": "~2.3.1",
+    "webpack-merge": "~4.1.0",
     "webpack-notifier": "^1.3.0",
     "webtorrent": "^0.98.0",
-    "zone.js": "~0.7.2"
+    "zone.js": "~0.8.5"
   },
   "devDependencies": {
     "add-asset-html-webpack-plugin": "^1.0.2",
-    "codelyzer": "^2.0.0",
+    "codelyzer": "^3.0.0-beta.4",
     "standard": "^10.0.0",
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5"

client/src/app/+admin/friends/friend-list/friend-list.component.html

@@ -2,10 +2,10 @@
 
 <ng2-smart-table [settings]="tableSettings" [source]="friendsSource"></ng2-smart-table>
 
-<a *ngIf="hasFriends()" class="add-user btn btn-danger pull-left" (click)="quitFriends()">
+<a *ngIf="hasFriends()" class="btn btn-danger pull-left" (click)="quitFriends()">
   Quit friends
 </a>
 
-<a *ngIf="!hasFriends()" class="add-user btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
+<a *ngIf="!hasFriends()" class="btn btn-success pull-right" [routerLink]="['/admin/friends/add']">
   Make friends
 </a>

client/src/app/+admin/friends/friend-list/friend-list.component.scss

@@ -1,3 +1,3 @@
-table {
+.btn {
-  margin-bottom: 40px;
+  margin-top: 10px;
 }

client/src/app/+admin/requests/request-stats/request-stats.component.html

@@ -1,37 +1,38 @@
 <h3>Requests stats</h3>
 
-<div *ngFor="let requestSchedulerName of statsTitles | keys">
+<div *ngFor="let requestSchedulerName of statsTitles | keys" class="col-lg-4 col-md-12">
-  <div class="block" *ngIf="stats[requestSchedulerName] !== null">
+  <div class="panel panel-default" *ngIf="stats[requestSchedulerName] !== null">
-    <h4>{{ statsTitles[requestSchedulerName] }}</h4>
+    <div class="panel-heading">{{ statsTitles[requestSchedulerName] }}</div>
 
-    <div class="requests-general">
+    <div class="panel-body">
-      <div>
+      <div class="requests-general">
-        <span class="label-description">Remaining requests:</span>
+        <div>
-        {{ stats[requestSchedulerName].totalRequests }}
+          <span class="label-description">Remaining requests:</span>
+          {{ stats[requestSchedulerName].totalRequests }}
+        </div>
+
+        <div>
+          <span class="label-description">Interval seconds between requests:</span>
+          {{ stats[requestSchedulerName].secondsInterval }}
+        </div>
+
+        <div>
+          <span class="label-description">Remaining time before the scheduled request:</span>
+          {{ stats[requestSchedulerName].remainingSeconds }}
+        </div>
       </div>
 
-      <div>
+      <div class="requests-limit">
-        <span class="label-description">Interval seconds between requests:</span>
+        <div>
-        {{ stats[requestSchedulerName].secondsInterval }}
+          <span class="label-description">Maximum number of different pods for a scheduled request:</span>
-      </div>
+          {{ stats[requestSchedulerName].requestsLimitPods }}
+        </div>
 
-      <div>
+        <div>
-        <span class="label-description">Remaining time before the scheduled request:</span>
+          <span class="label-description">Maximum number of requests per pod for a scheduled request:</span>
-        {{ stats[requestSchedulerName].remainingSeconds }}
+          {{ stats[requestSchedulerName].requestsLimitPerPod }}
+        </div>
       </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>
-    </div>
-
   </div>
 </div>

client/src/app/+admin/requests/request-stats/request-stats.component.scss

@@ -1,23 +1,8 @@
-.block {
-  margin-bottom: 40px;
-}
-
 .label-description {
-  display: inline-block;
   font-weight: bold;
   color: black;
 }
 
-.requests-general {
-  .label-description {
-    width: 320px;
-  }
-}
-
 .requests-limit {
   margin-top: 20px;
-
-  .label-description {
-    width: 430px;
-  }
 }

client/src/app/account/account.component.html

@@ -1,11 +1,17 @@
 <h3>Account</h3>
 
-<div class="block">
+<div class="panel panel-default">
-  <h4>Change password</h4>
+  <div class="panel-heading">Change password</div>
-  <my-account-change-password></my-account-change-password>
+
+  <div class="panel-body">
+    <my-account-change-password></my-account-change-password>
+  </div>
 </div>
 
-<div class="block">
+<div class="panel panel-default">
-  <h4>Update my informations</h4>
+  <div class="panel-heading">Update my informations</div>
-  <my-account-details [user]="user"></my-account-details>
+
+  <div class="panel-body">
+    <my-account-details [user]="user"></my-account-details>
+  </div>
 </div>

client/src/app/account/account.component.scss

@@ -1,3 +1,3 @@
-.block {
+.panel {
   margin-top: 40px;
 }

client/src/app/app.component.html

@@ -1,31 +1,31 @@
-<div class="container">
+<div class="container-fluid">
-
+  <div class="row">
-  <header class="row">
+    <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
-    <div class="col-md-2">
+      <h4 id="peertube-title" class="title-menu-left-block header">
-      <h4 id="peertube-title">
         <a [routerLink]="['/videos/list']">PeerTube</a>
       </h4>
+
+      <div class="title-menu-left-block menu">
+        <my-menu *ngIf="isInAdmin() === false"></my-menu>
+        <my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin>
+      </div>
     </div>
 
-    <div class="col-md-9">
+    <div class="col-md-10 col-sm-9 col-xs-9 main-col">
-      <my-search></my-search>
+      <div class="header">
-    </div>
+        <my-search></my-search>
-  </header>
+      </div>
 
-
+      <div class="main-row">
-  <div class="row">
+        <router-outlet></router-outlet>
-    <my-menu *ngIf="isInAdmin() === false"></my-menu>
+      </div>
-    <my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin>
-
-    <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
-      <router-outlet></router-outlet>
     </div>
   </div>
 
-  <simple-notifications [options]="notificationOptions"></simple-notifications>
-  <my-confirm></my-confirm>
-
   <footer>
     PeerTube, CopyLeft 2015-2017
   </footer>
 </div>
+
+<my-confirm></my-confirm>
+<simple-notifications [options]="notificationOptions"></simple-notifications>

client/src/app/app.component.scss

@@ -1,23 +0,0 @@
-#peertube-title a {
-  color: inherit !important;
-
-  &:hover {
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-}
-
-header div {
-  line-height: 25px;
-  margin-bottom: 30px;
-}
-
-.router-outlet-container {
-  @media screen and (max-width: 400px) {
-    padding: 0 3px 0 3px;
-  }
-}
-
-[hidden] {
-  display: none !important;
-}

client/src/app/core/menu/menu-admin.component.html

@@ -1,31 +1,31 @@
-<menu class="col-md-2 col-sm-3 col-xs-3">
+<menu>
 
   <div class="panel-block">
-    <div id="panel-users" class="panel-button">
+    <a routerLink="/admin/users/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-user"></span>
-      <a [routerLink]="['/admin/users/list']">List users</a>
+      List users
-    </div>
+    </a>
 
-    <div id="panel-friends" class="panel-button">
+    <a routerLink="/admin/friends/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cloud"></span>
-      <a [routerLink]="['/admin/friends/list']">List friends</a>
+      List friends
-    </div>
+    </a>
 
-    <div id="panel-request-stats" class="panel-button">
+    <a routerLink="/admin/requests/stats" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-stats"></span>
-      <a [routerLink]="['/admin/requests/stats']">Request stats</a>
+      Request stats
-    </div>
+    </a>
 
-    <div id="panel-video-abuses" class="panel-button">
+    <a routerLink="/admin/video-abuses/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-alert"></span>
-      <a [routerLink]="['/admin/video-abuses/list']">Video abuses</a>
+      Video abuses
-    </div>
+    </a>
   </div>
 
   <div class="panel-block">
-    <div id="panel-quit-administration" class="panel-button">
+    <a routerLink="/videos/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      <a [routerLink]="['/videos/list']">Quit admin.</a>
+      Quit admin.
-    </div>
+    </a>
   </div>
 </menu>

client/src/app/core/menu/menu-admin.component.scss

@@ -0,0 +1,26 @@
+menu {
+  background-color: $black-background;
+  padding: 20px;
+  margin: 0;
+  height: 100%;
+
+  a {
+    display: block;
+    height: 30px;
+    color: #9cabb8;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      text-decoration: none !important;
+      outline: none !important;
+    }
+
+    .glyphicon {
+      margin-right: 20px;
+    }
+
+    &:hover, &.active {
+      color: #fff;
+    }
+  }
+}

client/src/app/core/menu/menu-admin.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-menu-admin',
-  templateUrl: './menu-admin.component.html'
+  templateUrl: './menu-admin.component.html',
+  styleUrls: [ './menu-admin.component.scss' ]
 })
 export class MenuAdminComponent { }

client/src/app/core/menu/menu.component.html

@@ -1,44 +1,44 @@
-<menu class="col-md-2 col-sm-3 col-xs-3">
+<menu>
   <div class="panel-block">
     <div id="panel-user-login" class="panel-button">
-      <span *ngIf="!isLoggedIn" >
+      <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active">
         <span class="hidden-xs glyphicon glyphicon-log-in"></span>
-        <a [routerLink]="['/login']">Login</a>
+        Login
-      </span>
+      </a>
 
-      <span *ngIf="isLoggedIn">
+      <a *ngIf="isLoggedIn" (click)="logout()">
         <span class="hidden-xs glyphicon glyphicon-log-out"></span>
-        <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
+        Logout
-      </span>
+      </a>
     </div>
 
-    <div *ngIf="!isLoggedIn && isRegistrationEnabled()" id="panel-user-register" class="panel-button">
+    <a *ngIf="!isLoggedIn && isRegistrationEnabled()" routerLink="/signup" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-user"></span>
-      <a [routerLink]="['/signup']">Signup</a>
+      Signup
-    </div>
+    </a>
 
-    <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
+    <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-user"></span>
-      <a [routerLink]="['/account']">My account</a>
+      My account
-    </div>
+    </a>
   </div>
 
   <div class="panel-block">
-    <div id="panel-get-videos" class="panel-button">
+    <a routerLink="/videos/list" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-list"></span>
-      <a [routerLink]="['/videos/list']">See videos</a>
+      See videos
-    </div>
+    </a>
 
-    <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
+    <a *ngIf="isLoggedIn" routerLink="/videos/add" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
-      <a [routerLink]="['/videos/add']">Upload a video</a>
+      Upload a video
-    </div>
+    </a>
   </div>
 
-  <div class="panel-block" *ngIf="isUserAdmin()">
+  <div class="panel-block">
-    <div id="panel-get-videos" class="panel-button">
+    <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      <a [routerLink]="['/admin']">Administration</a>
+      Administration
-    </div>
+    </a>
   </div>
 </menu>

client/src/app/core/menu/menu.component.ts

@@ -6,7 +6,8 @@ import { ConfigService } from '../config';
 
 @Component({
   selector: 'my-menu',
-  templateUrl: './menu.component.html'
+  templateUrl: './menu.component.html',
+  styleUrls: [ './menu-admin.component.scss' ]
 })
 export class MenuComponent implements OnInit {
   isLoggedIn: boolean;

client/src/app/shared/search/search.component.html

@@ -1,17 +1,23 @@
+
 <div class="input-group">
-  <div class="input-group-btn" dropdown>
+
+  <span class="input-group-addon icon-addon">
+    <span class="glyphicon glyphicon-search"></span>
+  </span>
+
+  <input
+    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search" class="form-control"
+    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
+  >
+
+  <div class="input-group-btn" dropdown placement="bottom right">
     <button id="simple-btn-keyboard-nav" type="button" class="btn btn-default" dropdownToggle>
       {{ getStringChoice(searchCriterias.field) }} <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
+    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="simple-btn-keyboard-nav" *dropdownMenu>
       <li *ngFor="let choice of choiceKeys" class="dropdown-item" role="menu-item">
         <a class="dropdown-item" href="#" (click)="choose($event, choice)">{{ getStringChoice(choice) }}</a>
       </li>
     </ul>
   </div>
-
-  <input
-    type="text" id="search-video" name="search-video" class="form-control" placeholder="Search a video..." class="form-control"
-    [(ngModel)]="searchCriterias.value" (keyup.enter)="doSearch()"
-  >
 </div>

client/src/app/shared/search/search.component.scss

@@ -0,0 +1,51 @@
+.icon-addon {
+  background-color: #fff;
+  border-radius: 0;
+  border-color: $header-border-color;
+  border-width: 0 0 1px 0;
+  text-align: right;
+
+  .glyphicon-search {
+    width: 30px;
+    font-size: 20px;
+  }
+}
+
+input, button, .input-group {
+  height: 100%;
+}
+
+input, .input-group-btn {
+  border-radius: 0;
+  border-top: none;
+  border-left: none;
+}
+
+input {
+  height: $header-height;
+  border-right: none;
+  font-weight: bold;
+  box-shadow: none;
+
+  &, &:focus {
+    border-bottom: 1px solid $header-border-color !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+}
+
+button {
+
+  &, &:hover, &:focus, &:active, &:visited {
+    background-color: #fff !important;
+    border-color: $header-border-color !important;
+    color: #858585 !important;
+    outline: none !important;
+
+    height: $header-height;
+    border-width: 0 0 1px 0;
+    font-weight: bold;
+    text-decoration: none;
+    box-shadow: none;
+  }
+}

client/src/app/shared/search/search.component.ts

@@ -7,7 +7,8 @@ import { SearchService } from './search.service';
 
 @Component({
   selector: 'my-search',
-  templateUrl: './search.component.html'
+  templateUrl: './search.component.html',
+  styleUrls: [ './search.component.scss' ]
 })
 
 export class SearchComponent implements OnInit {

client/src/app/videos/video-list/video-list.component.scss

@@ -25,8 +25,10 @@
 
 .videos-miniatures {
   min-height: 720px;
+  text-align: center;
 
   my-video-miniature {
+    text-align: left;
     transition: all 0.5s ease;
 
     &.ng-enter {

client/src/app/videos/video-list/video-list.component.ts

@@ -22,7 +22,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
   loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
   pagination: RestPagination = {
     currentPage: 1,
-    itemsPerPage: 9,
+    itemsPerPage: 25,
     totalItems: null
   };
   sort: SortField;

client/src/app/videos/video-list/video-miniature.component.html

@@ -1,4 +1,4 @@
-<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+<div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()">
   <a
     [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
     class="video-miniature-thumbnail"
@@ -8,18 +8,20 @@
       NSFW
     </div>
 
-    <span class="video-miniature-duration">{{ video.duration }}</span>
+    <div class="video-miniature-thumbnail-overlay">
+      <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
+      <span class="video-miniature-thumbnail-overlay-duration">{{ video.duration }}</span>
+    </div>
   </a>
 
-  <div class="video-miniature-informations">
+  <span
-    <span class="video-miniature-name-tags">
+    *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
-      <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
+    class="video-miniature-remove glyphicon glyphicon-remove"
+  ></span>
 
-      <div class="video-miniature-tags">
+  <div class="video-miniature-informations">
-        <span *ngFor="let tag of video.tags" class="video-miniature-tag">
+    <span class="video-miniature-name">
-          <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
+      <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
-        </span>
-      </div>
     </span>
 
     <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>

client/src/app/videos/video-list/video-miniature.component.scss

@@ -1,15 +1,11 @@
 @import "../../../sass/pre-customizations.scss";
 
 .video-miniature {
-  @media screen and (max-width: 400px) {
-    padding: 0;
-  }
-
   margin-top: 30px;
   display: inline-block;
   position: relative;
-  min-width: 220px;
   height: 190px;
+  width: 220px;
 
   .video-miniature-thumbnail {
     display: inline-block;
@@ -30,37 +26,48 @@
       height: 110px;
     }
 
-    .video-miniature-duration {
+    img, .thumbnail-nsfw {
+      border-radius: 3px;
+    }
+
+    .video-miniature-thumbnail-overlay {
       position: absolute;
-      right: 5px;
+      right: 0px;
-      bottom: 2px;
+      bottom: 0px;
       display: inline-block;
-      background-color: rgba(0, 0, 0, 0.8);
+      background-color: rgba(0, 0, 0, 0.7);
-      color: rgba(255, 255, 255, 0.8);
+      color: #fff;
-      padding: 2px;
+      padding: 3px 5px;
       font-size: 11px;
+      font-weight: bold;
+      width: 100%;
+
+      .video-miniature-thumbnail-overlay-views {
+
+      }
+
+      .video-miniature-thumbnail-overlay-duration {
+        float: right;
+      }
     }
   }
 
   .video-miniature-informations {
     width: 200px;
 
-    .video-miniature-name-tags {
+    .video-miniature-name {
+      height: 23px;
       display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: bold;
+      transition: color 0.2s;
+      font-size: 15px;
+      color: $video-miniature-title-color;
 
-      .video-miniature-name {
+      &:hover {
-        height: 23px;
+        text-decoration: none;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-weight: bold;
-        transition: color 0.2s;
-        font-size: 15px;
-
-        &:hover {
-          text-decoration: none;
-        }
       }
 
       .video-miniature-tags {
@@ -84,8 +91,8 @@
     .video-miniature-author, .video-miniature-views-created-at {
       display: block;
       margin-left: 1px;
-      font-size: 12px;
+      font-size: 11px;
-      color: #337ab7;
+      color: $video-miniature-other-infos;
       opacity: 0.9;
 
       .video-miniature-created-at::before {

client/src/sass/_variables.scss

@@ -0,0 +1,8 @@
+$black-background: #1d2125;
+$grey-background: #f6f2f2;
+
+$header-height: 60px;
+$header-border-color: #e9eff6;
+
+$video-miniature-title-color: #16a2b7;
+$video-miniature-other-infos: #686767;

client/src/sass/application.scss

@@ -1,44 +1,81 @@
 @import '../../node_modules/video.js/dist/video-js.css';
 
-body {
+[hidden] {
-  padding: 20px;
+  display: none !important;
+}
 
-  @media screen and (max-width: 400px) {
+input.readonly {
-    padding: 3px;
+  /* Force blank on readonly inputs */
+  background-color: #fff !important;
+}
+
+.form-control, .btn {
+  border-radius: 0;
+}
+
+.glyphicon-black {
+  color: black;
+}
+
+.header {
+  height: $header-height;
+
+  .search-col {
+    height: 100%;
+    margin-left: -15px;
+    padding: 0;
   }
 }
 
-menu {
+.main-col {
-  @media screen and (max-width: 600px) {
+  padding: 0;
-    margin-right: 3px !important;
-    padding: 3px !important;
-    min-height: 400px !important;
-  }
 
-  min-height: 600px;
+  .main-row {
-  margin-right: 20px;
+    padding: 15px 30px;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
 
-  .panel-block:not(:last-child) {
+    @media screen and (min-width: 1400px) {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 15px 40px;
-  }
-
-  .panel-button {
-    margin: 8px;
-    cursor: pointer;
-    transition: margin 0.2s;
-
-    &:hover {
-      margin-left: 15px;
     }
 
+    @media screen and (min-width: 1600px) {
+      padding: 15px 50px;
+    }
+
+    @media screen and (min-width: 1800px) {
+      padding: 15px 60px;
+    }
+  }
+}
+
+.title-menu-left {
+  height: calc(100vh - #{$header-height});
+  padding-right: 0;
+
+  .title-menu-left-block {
+    margin-left: -15px;
+
+    &.menu {
+      height: 100%;
+    }
+  }
+
+  #peertube-title {
+    background-color: #fff;
+    border-right: 2px solid $header-border-color;
+    font-size: 25px;
+    line-height: $header-height;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 0;
+
     a {
-      color: #333333;
+      color: inherit !important;
-    }
-  }
 
-  .glyphicon {
+      &:hover {
-    margin: 5px;
+        color: inherit !important;
+        text-decoration: none !important;
+      }
+    }
   }
 }
 
@@ -63,19 +100,6 @@ ng2-smart-table {
   }
 }
 
-[hidden] {
-  display: none !important;
-}
-
-input.readonly {
-  /* Force blank on readonly inputs */
-  background-color: #fff !important;
-}
-
-.glyphicon-black {
-  color: black;
-}
-
 footer {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   padding-top: 10px;

client/src/sass/pre-customizations.scss

@@ -1,3 +1,5 @@
+@import '_variables.scss';
+
 $bootstrap-sass-asset-helper: false !default;
 //
 // Variables

client/tslint.json

@@ -46,7 +46,6 @@
     "pipe-naming": [true, "camelCase", "my"],
     "component-class-suffix": true,
     "directive-class-suffix": true,
-    "import-destructuring-spacing": true,
     "templates-use-public": true,
     "no-access-missing-member": true,
     "invoke-injectable": true,