Client: add ability to hide left menu
This commit is contained in:
parent
d1a00ddbe2
commit
6716739082
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue