From 67167390827ca0c6c10849f26d0deb8b32186a7e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 26 Apr 2017 21:22:00 +0200 Subject: Client: add ability to hide left menu --- client/src/app/app.component.html | 30 +++++++++---- client/src/app/app.component.scss | 88 ++++++++++++++++++++++++++------------- client/src/app/app.component.ts | 24 +++++++++++ 3 files changed, 104 insertions(+), 38 deletions(-) (limited to 'client/src/app') 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 @@
-
-
+
+ +
+
+ +
+
+
+ + +
+ + + +
+ +
+
@@ -15,11 +31,7 @@
-
-
- - -
+
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 @@ +.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; + .title-menu-left-block.menu { + height: 100%; + } +} - &.menu { - height: 100%; - } +.header { + height: $header-height; + + .fake-title-block { + display: inline-block; } - #peertube-title { + .top-left-block { 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 { + 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; - text-decoration: none !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 { - // Fix col-md-* padding - padding: 0; + my-search { + position: fixed; + z-index: 1000; + // Fix col-md-* padding + padding: 0; + } + + .search-col { + height: 100%; + margin-left: -15px; + padding: 0; + } } footer { 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 { 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; + } } -- cgit v1.2.3