Client: responsive design

5 files changed, 69 insertions, 41 deletions

diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html
index ad7a7a1b4..027799ee1 100644
--- a/client/src/app/core/menu/menu-admin.component.html
+++ b/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>
-    </div>
+      List users
+    </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>
-    </div>
+      List friends
+    </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>
-    </div>
+      Request stats
+    </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>
-    </div>
+      Video abuses
+    </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>
-    </div>
+      Quit admin.
+    </a>
   </div>
 </menu>
diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss
new file mode 100644
index 000000000..487461224
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts
index 59ffccf9f..a3d920fdd 100644
--- a/client/src/app/core/menu/menu-admin.component.ts
+++ b/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 { }
diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html
index de17940a1..0b093882f 100644
--- a/client/src/app/core/menu/menu.component.html
+++ b/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>
-      </span>
+        Login
+      </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>
-      </span>
+        Logout
+      </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>
-    </div>
+      Signup
+    </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>
-    </div>
+      My account
+    </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>
-    </div>
+      See videos
+    </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>
-    </div>
+      Upload a video
+    </a>
   </div>
 
-  <div class="panel-block" *ngIf="isUserAdmin()">
-    <div id="panel-get-videos" class="panel-button">
+  <div class="panel-block">
+    <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active">
       <span class="hidden-xs glyphicon glyphicon-cog"></span>
-      <a [routerLink]="['/admin']">Administration</a>
-    </div>
+      Administration
+    </a>
   </div>
 </menu>
diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts
index d1f0fa807..e2b998747 100644
--- a/client/src/app/core/menu/menu.component.ts
+++ b/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;