aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-26 21:22:00 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit67167390827ca0c6c10849f26d0deb8b32186a7e (patch)
treef2c2732c287b175bad289968721de3063b633ee6 /client
parentd1a00ddbe245ee6cd2837025fb7757b22465dd11 (diff)
downloadPeerTube-67167390827ca0c6c10849f26d0deb8b32186a7e.tar.gz
PeerTube-67167390827ca0c6c10849f26d0deb8b32186a7e.tar.zst
PeerTube-67167390827ca0c6c10849f26d0deb8b32186a7e.zip
Client: add ability to hide left menu
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.html30
-rw-r--r--client/src/app/app.component.scss88
-rw-r--r--client/src/app/app.component.ts24
-rw-r--r--client/src/sass/application.scss23
4 files changed, 104 insertions, 61 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 04cdbb1f8..a1e38cdb1 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,13 +1,29 @@
1<div class="container-fluid"> 1<div class="container-fluid">
2 <div class="row"> 2 <div class="row header">
3 <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left"> 3
4 <div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
5 <div class="hamburger-block">
6 <span (click)="toggleMenu()" class="glyphicon glyphicon-menu-hamburger"></span>
7 </div>
8
4 <div id="peertube-title" class="title-menu-left-block header"> 9 <div id="peertube-title" class="title-menu-left-block header">
5 <a [routerLink]="['/videos/list']" title="Homepage"></a> 10 <a [routerLink]="['/videos/list']" title="Homepage"></a>
6 </div> 11 </div>
12 </div>
13
14 <!-- Used for the fixed title -->
15 <div class="col-md-2 col-sm-3 col-xs-3 fake-title-block"></div>
16
17 <!-- We need to reset col-md-* because my-search is in fixed position -->
18 <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
19 </div>
20
21 <div class="row">
22 <div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
7 23
8 <div class="title-menu-left-block menu"> 24 <div class="title-menu-left-block menu">
9 <my-menu *ngIf="isInAdmin() === false"></my-menu> 25 <my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu>
10 <my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin> 26 <my-menu-admin *ngIf="isMenuDisplayed && isInAdmin() === true"></my-menu-admin>
11 </div> 27 </div>
12 </div> 28 </div>
13 29
@@ -15,11 +31,7 @@
15 <div class="col-md-2 col-sm-3 col-xs-3"> 31 <div class="col-md-2 col-sm-3 col-xs-3">
16 </div> 32 </div>
17 33
18 <div class="col-md-10 col-sm-9 col-xs-9 main-col"> 34 <div [ngClass]="getMainColClasses()">
19 <div class="row header">
20 <!-- We need to reset col-md-* because my-search is in fixed position -->
21 <my-search class="col-md-10 col-sm-9 col-xs-9"></my-search>
22 </div>
23 35
24 <div class="main-row"> 36 <div class="main-row">
25 <router-outlet></router-outlet> 37 <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 627187bd0..ca0030922 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,49 +1,79 @@
1.main-row {
2 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
3}
4
1.title-menu-left { 5.title-menu-left {
6 position: fixed;
2 height: calc(100vh - #{$header-height}); 7 height: calc(100vh - #{$header-height});
3 padding-right: 0; 8 padding: 0;
4 9
5 .title-menu-left-block { 10 .title-menu-left-block.menu {
6 margin-left: -15px; 11 height: 100%;
12 }
13}
7 14
8 &.menu { 15.header {
9 height: 100%; 16 height: $header-height;
10 } 17
18 .fake-title-block {
19 display: inline-block;
11 } 20 }
12 21
13 #peertube-title { 22 .top-left-block {
14 background-color: #fff; 23 background-color: #fff;
15 border-right: 1px solid $header-border-color; 24 border-right: 1px solid $header-border-color;
16 font-size: 25px;
17 line-height: $header-height; 25 line-height: $header-height;
18 text-align: center;
19 margin-top: 0; 26 margin-top: 0;
20 margin-bottom: 0; 27 margin-bottom: 0;
21
22 display: flex; 28 display: flex;
23 flex-direction: column; 29 position: fixed;
24 justify-content: center; 30
25 text-align: center; 31 &.border-bottom {
26 32 border-bottom: 1px solid $header-border-color;
27 a { 33 }
28 color: inherit !important; 34
29 display: block; 35 .hamburger-block {
30 background: url(/client/assets/logo.png) no-repeat; 36 margin-right: 20px;
31 background-size: contain; 37 margin-left: 15px;
32 width: 180px; 38
33 height: 22px; 39 .glyphicon {
34 margin: auto; 40 position: relative;
35 41 top: 4px;
36 &:hover { 42 }
43 }
44
45 #peertube-title {
46
47 a {
37 color: inherit !important; 48 color: inherit !important;
38 text-decoration: none !important; 49 display: block;
50 background: url(/client/assets/logo.png) no-repeat;
51 background-size: contain;
52 background-position: center;
53 width: 180px;
54 height: 100%;
55 margin: auto;
56
57 &:hover {
58 color: inherit !important;
59 text-decoration: none !important;
60 }
39 } 61 }
40 } 62 }
41 } 63 }
42}
43 64
44my-search { 65 my-search {
45 // Fix col-md-* padding 66 position: fixed;
46 padding: 0; 67 z-index: 1000;
68 // Fix col-md-* padding
69 padding: 0;
70 }
71
72 .search-col {
73 height: 100%;
74 margin-left: -15px;
75 padding: 0;
76 }
47} 77}
48 78
49footer { 79footer {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index c29790d96..14870bb5f 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -24,6 +24,8 @@ export class AppComponent implements OnInit {
24 rtl: false 24 rtl: false
25 }; 25 };
26 26
27 isMenuDisplayed = true;
28
27 constructor( 29 constructor(
28 private router: Router, 30 private router: Router,
29 private authService: AuthService, 31 private authService: AuthService,
@@ -48,4 +50,26 @@ export class AppComponent implements OnInit {
48 isInAdmin() { 50 isInAdmin() {
49 return this.router.url.indexOf('/admin/') !== -1; 51 return this.router.url.indexOf('/admin/') !== -1;
50 } 52 }
53
54 toggleMenu() {
55 this.isMenuDisplayed = !this.isMenuDisplayed;
56 }
57
58 getMainColClasses() {
59 const colSizes = {
60 md: 10,
61 sm: 9,
62 xs: 9
63 }
64
65 // Take all width is the menu is not displayed
66 if (this.isMenuDisplayed === false) {
67 Object.keys(colSizes).forEach(col => colSizes[col] = 12);
68 }
69
70 const classes = [ "main-col" ];
71 Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`));
72
73 return classes;
74 }
51} 75}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index b446dde2a..db23afd0d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -21,29 +21,6 @@ input.readonly {
21 color: black; 21 color: black;
22} 22}
23 23
24.header {
25 height: $header-height;
26
27 my-search {
28 position: fixed;
29 z-index: 1000;
30 }
31
32 .search-col {
33 height: 100%;
34 margin-left: -15px;
35 padding: 0;
36 }
37}
38
39.title-menu-left {
40 position: fixed;
41}
42
43.main-row {
44 min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
45}
46
47.main-col { 24.main-col {
48 25
49 .content-padding { 26 .content-padding {