Client: add ability to hide left menu

This commit is contained in:
Chocobozzz 2017-04-26 21:22:00 +02:00
parent d1a00ddbe2
commit 6716739082
4 changed files with 115 additions and 72 deletions

View File

@ -1,13 +1,29 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
<div class="row header">
<div class="col-md-2 col-sm-3 col-xs-3 top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
<div class="hamburger-block">
<span (click)="toggleMenu()" class="glyphicon glyphicon-menu-hamburger"></span>
</div>
<div id="peertube-title" class="title-menu-left-block header">
<a [routerLink]="['/videos/list']" title="Homepage"></a>
</div>
</div>
<!-- Used for the fixed title -->
<div class="col-md-2 col-sm-3 col-xs-3 fake-title-block"></div>
<!-- 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="row">
<div class="col-md-2 col-sm-3 col-xs-3 title-menu-left">
<div class="title-menu-left-block menu">
<my-menu *ngIf="isInAdmin() === false"></my-menu>
<my-menu-admin *ngIf="isInAdmin() === true"></my-menu-admin>
<my-menu *ngIf="isMenuDisplayed && isInAdmin() === false"></my-menu>
<my-menu-admin *ngIf="isMenuDisplayed && isInAdmin() === true"></my-menu-admin>
</div>
</div>
@ -15,11 +31,7 @@
<div class="col-md-2 col-sm-3 col-xs-3">
</div>
<div class="col-md-10 col-sm-9 col-xs-9 main-col">
<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 [ngClass]="getMainColClasses()">
<div class="main-row">
<router-outlet></router-outlet>

View File

@ -1,49 +1,79 @@
.main-row {
min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
}
.title-menu-left {
position: fixed;
height: calc(100vh - #{$header-height});
padding-right: 0;
padding: 0;
.title-menu-left-block {
margin-left: -15px;
&.menu {
height: 100%;
}
}
#peertube-title {
background-color: #fff;
border-right: 1px solid $header-border-color;
font-size: 25px;
line-height: $header-height;
text-align: center;
margin-top: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
a {
color: inherit !important;
display: block;
background: url(/client/assets/logo.png) no-repeat;
background-size: contain;
width: 180px;
height: 22px;
margin: auto;
&:hover {
color: inherit !important;
text-decoration: none !important;
}
}
.title-menu-left-block.menu {
height: 100%;
}
}
my-search {
// Fix col-md-* padding
padding: 0;
.header {
height: $header-height;
.fake-title-block {
display: inline-block;
}
.top-left-block {
background-color: #fff;
border-right: 1px solid $header-border-color;
line-height: $header-height;
margin-top: 0;
margin-bottom: 0;
display: flex;
position: fixed;
&.border-bottom {
border-bottom: 1px solid $header-border-color;
}
.hamburger-block {
margin-right: 20px;
margin-left: 15px;
.glyphicon {
position: relative;
top: 4px;
}
}
#peertube-title {
a {
color: inherit !important;
display: block;
background: url(/client/assets/logo.png) no-repeat;
background-size: contain;
background-position: center;
width: 180px;
height: 100%;
margin: auto;
&:hover {
color: inherit !important;
text-decoration: none !important;
}
}
}
}
my-search {
position: fixed;
z-index: 1000;
// Fix col-md-* padding
padding: 0;
}
.search-col {
height: 100%;
margin-left: -15px;
padding: 0;
}
}
footer {

View File

@ -24,6 +24,8 @@ export class AppComponent implements OnInit {
rtl: false
};
isMenuDisplayed = true;
constructor(
private router: Router,
private authService: AuthService,
@ -48,4 +50,26 @@ export class AppComponent implements OnInit {
isInAdmin() {
return this.router.url.indexOf('/admin/') !== -1;
}
toggleMenu() {
this.isMenuDisplayed = !this.isMenuDisplayed;
}
getMainColClasses() {
const colSizes = {
md: 10,
sm: 9,
xs: 9
}
// Take all width is the menu is not displayed
if (this.isMenuDisplayed === false) {
Object.keys(colSizes).forEach(col => colSizes[col] = 12);
}
const classes = [ "main-col" ];
Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`));
return classes;
}
}

View File

@ -21,29 +21,6 @@ input.readonly {
color: black;
}
.header {
height: $header-height;
my-search {
position: fixed;
z-index: 1000;
}
.search-col {
height: 100%;
margin-left: -15px;
padding: 0;
}
}
.title-menu-left {
position: fixed;
}
.main-row {
min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin});
}
.main-col {
.content-padding {