diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-04-21 11:06:33 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-04-26 21:23:19 +0200 |
commit | 383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (patch) | |
tree | ae0541d99056d75b08f14e8e4ea73f67f173d942 /client/src/app/core/menu | |
parent | 240c64c5f4277f0ce36c094f0663bd30d264ec40 (diff) | |
download | PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.gz PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.zst PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.zip |
Client: responsive design
Diffstat (limited to 'client/src/app/core/menu')
-rw-r--r-- | client/src/app/core/menu/menu-admin.component.html | 32 | ||||
-rw-r--r-- | client/src/app/core/menu/menu-admin.component.scss | 26 | ||||
-rw-r--r-- | client/src/app/core/menu/menu-admin.component.ts | 3 | ||||
-rw-r--r-- | client/src/app/core/menu/menu.component.html | 46 | ||||
-rw-r--r-- | client/src/app/core/menu/menu.component.ts | 3 |
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 @@ | |||
1 | <menu class="col-md-2 col-sm-3 col-xs-3"> | 1 | <menu> |
2 | 2 | ||
3 | <div class="panel-block"> | 3 | <div class="panel-block"> |
4 | <div id="panel-users" class="panel-button"> | 4 | <a routerLink="/admin/users/list" routerLinkActive="active"> |
5 | <span class="hidden-xs glyphicon glyphicon-user"></span> | 5 | <span class="hidden-xs glyphicon glyphicon-user"></span> |
6 | <a [routerLink]="['/admin/users/list']">List users</a> | 6 | List users |
7 | </div> | 7 | </a> |
8 | 8 | ||
9 | <div id="panel-friends" class="panel-button"> | 9 | <a routerLink="/admin/friends/list" routerLinkActive="active"> |
10 | <span class="hidden-xs glyphicon glyphicon-cloud"></span> | 10 | <span class="hidden-xs glyphicon glyphicon-cloud"></span> |
11 | <a [routerLink]="['/admin/friends/list']">List friends</a> | 11 | List friends |
12 | </div> | 12 | </a> |
13 | 13 | ||
14 | <div id="panel-request-stats" class="panel-button"> | 14 | <a routerLink="/admin/requests/stats" routerLinkActive="active"> |
15 | <span class="hidden-xs glyphicon glyphicon-stats"></span> | 15 | <span class="hidden-xs glyphicon glyphicon-stats"></span> |
16 | <a [routerLink]="['/admin/requests/stats']">Request stats</a> | 16 | Request stats |
17 | </div> | 17 | </a> |
18 | 18 | ||
19 | <div id="panel-video-abuses" class="panel-button"> | 19 | <a routerLink="/admin/video-abuses/list" routerLinkActive="active"> |
20 | <span class="hidden-xs glyphicon glyphicon-alert"></span> | 20 | <span class="hidden-xs glyphicon glyphicon-alert"></span> |
21 | <a [routerLink]="['/admin/video-abuses/list']">Video abuses</a> | 21 | Video abuses |
22 | </div> | 22 | </a> |
23 | </div> | 23 | </div> |
24 | 24 | ||
25 | <div class="panel-block"> | 25 | <div class="panel-block"> |
26 | <div id="panel-quit-administration" class="panel-button"> | 26 | <a routerLink="/videos/list" routerLinkActive="active"> |
27 | <span class="hidden-xs glyphicon glyphicon-cog"></span> | 27 | <span class="hidden-xs glyphicon glyphicon-cog"></span> |
28 | <a [routerLink]="['/videos/list']">Quit admin.</a> | 28 | Quit admin. |
29 | </div> | 29 | </a> |
30 | </div> | 30 | </div> |
31 | </menu> | 31 | </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 @@ | |||
1 | menu { | ||
2 | background-color: $black-background; | ||
3 | padding: 20px; | ||
4 | margin: 0; | ||
5 | height: 100%; | ||
6 | |||
7 | a { | ||
8 | display: block; | ||
9 | height: 30px; | ||
10 | color: #9cabb8; | ||
11 | cursor: pointer; | ||
12 | |||
13 | &:hover, &:focus { | ||
14 | text-decoration: none !important; | ||
15 | outline: none !important; | ||
16 | } | ||
17 | |||
18 | .glyphicon { | ||
19 | margin-right: 20px; | ||
20 | } | ||
21 | |||
22 | &:hover, &.active { | ||
23 | color: #fff; | ||
24 | } | ||
25 | } | ||
26 | } | ||
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'; | |||
2 | 2 | ||
3 | @Component({ | 3 | @Component({ |
4 | selector: 'my-menu-admin', | 4 | selector: 'my-menu-admin', |
5 | templateUrl: './menu-admin.component.html' | 5 | templateUrl: './menu-admin.component.html', |
6 | styleUrls: [ './menu-admin.component.scss' ] | ||
6 | }) | 7 | }) |
7 | export class MenuAdminComponent { } | 8 | 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 @@ | |||
1 | <menu class="col-md-2 col-sm-3 col-xs-3"> | 1 | <menu> |
2 | <div class="panel-block"> | 2 | <div class="panel-block"> |
3 | <div id="panel-user-login" class="panel-button"> | 3 | <div id="panel-user-login" class="panel-button"> |
4 | <span *ngIf="!isLoggedIn" > | 4 | <a *ngIf="!isLoggedIn" routerLink="/login" routerLinkActive="active"> |
5 | <span class="hidden-xs glyphicon glyphicon-log-in"></span> | 5 | <span class="hidden-xs glyphicon glyphicon-log-in"></span> |
6 | <a [routerLink]="['/login']">Login</a> | 6 | Login |
7 | </span> | 7 | </a> |
8 | 8 | ||
9 | <span *ngIf="isLoggedIn"> | 9 | <a *ngIf="isLoggedIn" (click)="logout()"> |
10 | <span class="hidden-xs glyphicon glyphicon-log-out"></span> | 10 | <span class="hidden-xs glyphicon glyphicon-log-out"></span> |
11 | <a *ngIf="isLoggedIn" (click)="logout()">Logout</a> | 11 | Logout |
12 | </span> | 12 | </a> |
13 | </div> | 13 | </div> |
14 | 14 | ||
15 | <div *ngIf="!isLoggedIn && isRegistrationEnabled()" id="panel-user-register" class="panel-button"> | 15 | <a *ngIf="!isLoggedIn && isRegistrationEnabled()" routerLink="/signup" routerLinkActive="active"> |
16 | <span class="hidden-xs glyphicon glyphicon-user"></span> | 16 | <span class="hidden-xs glyphicon glyphicon-user"></span> |
17 | <a [routerLink]="['/signup']">Signup</a> | 17 | Signup |
18 | </div> | 18 | </a> |
19 | 19 | ||
20 | <div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button"> | 20 | <a *ngIf="isLoggedIn" routerLink="/account" routerLinkActive="active"> |
21 | <span class="hidden-xs glyphicon glyphicon-user"></span> | 21 | <span class="hidden-xs glyphicon glyphicon-user"></span> |
22 | <a [routerLink]="['/account']">My account</a> | 22 | My account |
23 | </div> | 23 | </a> |
24 | </div> | 24 | </div> |
25 | 25 | ||
26 | <div class="panel-block"> | 26 | <div class="panel-block"> |
27 | <div id="panel-get-videos" class="panel-button"> | 27 | <a routerLink="/videos/list" routerLinkActive="active"> |
28 | <span class="hidden-xs glyphicon glyphicon-list"></span> | 28 | <span class="hidden-xs glyphicon glyphicon-list"></span> |
29 | <a [routerLink]="['/videos/list']">See videos</a> | 29 | See videos |
30 | </div> | 30 | </a> |
31 | 31 | ||
32 | <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn"> | 32 | <a *ngIf="isLoggedIn" routerLink="/videos/add" routerLinkActive="active"> |
33 | <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span> | 33 | <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span> |
34 | <a [routerLink]="['/videos/add']">Upload a video</a> | 34 | Upload a video |
35 | </div> | 35 | </a> |
36 | </div> | 36 | </div> |
37 | 37 | ||
38 | <div class="panel-block" *ngIf="isUserAdmin()"> | 38 | <div class="panel-block"> |
39 | <div id="panel-get-videos" class="panel-button"> | 39 | <a *ngIf="isUserAdmin()" routerLink="/admin" routerLinkActive="active"> |
40 | <span class="hidden-xs glyphicon glyphicon-cog"></span> | 40 | <span class="hidden-xs glyphicon glyphicon-cog"></span> |
41 | <a [routerLink]="['/admin']">Administration</a> | 41 | Administration |
42 | </div> | 42 | </a> |
43 | </div> | 43 | </div> |
44 | </menu> | 44 | </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'; | |||
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'my-menu', | 8 | selector: 'my-menu', |
9 | templateUrl: './menu.component.html' | 9 | templateUrl: './menu.component.html', |
10 | styleUrls: [ './menu-admin.component.scss' ] | ||
10 | }) | 11 | }) |
11 | export class MenuComponent implements OnInit { | 12 | export class MenuComponent implements OnInit { |
12 | isLoggedIn: boolean; | 13 | isLoggedIn: boolean; |