From 1c66ccd9e2c146a9d09953ef50059bb20ef2e5f5 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 1 Aug 2017 12:32:25 +0300 Subject: [PATCH] added left sidenav 3 & right sidenav 3 + page layouts header size modifications + page layouts header text alignment --- .../components/navigation/navigation.model.ts | 5 + src/app/core/scss/partials/_helpers.scss | 30 +++-- src/app/core/scss/partials/_page-layouts.scss | 119 +++++++++++++----- .../fullwidth-2/fullwidth-2.component.html | 2 +- .../carded/fullwidth/fullwidth.component.html | 2 +- .../left-sidenav/left-sidenav.component.html | 2 + .../ui/page-layouts/page-layouts.module.ts | 8 +- .../simple/fullwidth/fullwidth.component.html | 2 +- .../left-sidenav-2.component.html | 2 +- .../left-sidenav-3.component.html | 6 +- .../left-sidenav/left-sidenav.component.html | 2 +- .../right-sidenav-2.component.html | 2 +- .../right-sidenav-3.component.html | 46 +++++++ .../right-sidenav-3.component.scss | 0 .../right-sidenav-3.component.ts | 14 +++ .../right-sidenav.component.html | 2 +- 16 files changed, 188 insertions(+), 56 deletions(-) create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss create mode 100644 src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 9128bea2..88b2dd87 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -327,6 +327,11 @@ export class FuseNavigation 'type' : 'nav-item', 'url' : '/ui/page-layouts/simple/right-sidenav-2' }, + { + 'title': 'Right Sidenav 3', + 'type' : 'nav-item', + 'url' : '/ui/page-layouts/simple/right-sidenav-3' + }, { 'title': 'Tabbed', 'type' : 'nav-item', diff --git a/src/app/core/scss/partials/_helpers.scss b/src/app/core/scss/partials/_helpers.scss index 50b87164..da366495 100644 --- a/src/app/core/scss/partials/_helpers.scss +++ b/src/app/core/scss/partials/_helpers.scss @@ -37,6 +37,26 @@ .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + } + + @for $index from 0 through 64 { + $size: $index * 4; + $length: #{$size}px; + + .#{$abbrev}x-#{$size} { + #{$prop}-right: $length !important; + #{$prop}-left: $length !important; + } + + .#{$abbrev}y-#{$size} { + #{$prop}-top: $length !important; + #{$prop}-bottom: $length !important; + } + } + + @for $index from 0 through 64 { + $size: $index * 4; + $length: #{$size}px; .#{$abbrev}t-#{$size} { #{$prop}-top: $length !important; @@ -53,16 +73,6 @@ .#{$abbrev}l-#{$size} { #{$prop}-left: $length !important; } - - .#{$abbrev}x-#{$size} { - #{$prop}-right: $length !important; - #{$prop}-left: $length !important; - } - - .#{$abbrev}y-#{$size} { - #{$prop}-top: $length !important; - #{$prop}-bottom: $length !important; - } } } diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index d59da5b5..71a01ca3 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -1,26 +1,21 @@ // Page Layouts -$header-height: 200px; -$header-height-sm: 160px; +$carded-header-height: 200px !default; +$carded-header-height-sm: 160px !default; +$carded-toolbar-height: 64px !default; -$card-toolbar-height: 64px; -$card-header-height: $header-height - $card-toolbar-height; -$card-header-height-sm: $header-height-sm - $card-toolbar-height; +$header-height: 120px !default; +$header-height-sm: 100px !default; + +// Calculate toolbarless header height +$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height; +$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height; .page-layout { position: relative; overflow: hidden; - // Top bg - .top-bg { - position: absolute; - z-index: 1; - top: 0; - right: 0; - left: 0; - height: $header-height; - } - // Carded layout + &.carded { display: flex; flex-direction: row; @@ -29,6 +24,20 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; min-width: 100%; min-height: 100%; + // Top bg + .top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: $carded-header-height; + + @include media-breakpoint('sm') { + height: $carded-header-height-sm; + } + } + // Fullwidth &.fullwidth { @@ -58,34 +67,40 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; margin-right: 32px; .header { - height: $card-header-height; - min-height: $card-header-height; - max-height: $card-header-height; + height: $carded-header-height-without-toolbar; + min-height: $carded-header-height-without-toolbar; + max-height: $carded-header-height-without-toolbar; + + @include media-breakpoint('sm') { + height: $carded-header-height-without-toolbar-sm; + min-height: $carded-header-height-without-toolbar-sm; + max-height: $carded-header-height-without-toolbar-sm; + } } .content-card { display: flex; flex-direction: column; flex: 1; - background: mat-color($background, background); overflow: hidden; + background: mat-color($background, background); @include mat-elevation(7); .toolbar { display: flex; justify-content: flex-start; align-items: center; - height: $card-toolbar-height; - min-height: $card-toolbar-height; - max-height: $card-toolbar-height; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + height: $carded-toolbar-height; + min-height: $carded-toolbar-height; + max-height: $carded-toolbar-height; } .content { display: flex; flex: 1; - background: mat-color($background, background); overflow: auto; + background: mat-color($background, background); } } } @@ -130,9 +145,9 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } .header { - height: $header-height; - min-height: $header-height; - max-height: $header-height; + height: $carded-header-height; + min-height: $carded-header-height; + max-height: $carded-header-height; } .content { @@ -158,17 +173,17 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; .header { display: flex; - height: $card-header-height; - min-height: $card-header-height; - max-height: $card-header-height; + height: $carded-header-height-without-toolbar; + min-height: $carded-header-height-without-toolbar; + max-height: $carded-header-height-without-toolbar; } .content-card { display: flex; flex-direction: column; flex: 1; - background: mat-color($background, background); overflow: hidden; + background: mat-color($background, background); @include mat-elevation(7); .toolbar { @@ -176,10 +191,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; justify-content: flex-start; align-items: center; flex: 1; - height: $card-toolbar-height; - min-height: $card-toolbar-height; - max-height: $card-toolbar-height; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + height: $carded-toolbar-height; + min-height: $carded-toolbar-height; + max-height: $carded-toolbar-height; .sidenav-toggle { margin: 0 8px 0 0 !important; @@ -249,6 +264,16 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; // Simple layout &.simple { + // Top bg + .top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: $header-height; + } + // Fullwidth &.fullwidth, &.inner-sidenav { @@ -279,6 +304,33 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } } + // Inner Sidenav + &.inner-sidenav { + + > md-sidenav-container { + + .sidenav { + + &.md-is-locked-open { + height: auto; + } + } + + .mat-sidenav-content { + display: flex; + height: auto; + + .center { + @include mat-elevation(0); + + .content { + @include mat-elevation(4); + } + } + } + } + } + > md-sidenav-container { display: flex; background: none; @@ -309,6 +361,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height; } .mat-sidenav-content { + display: flex; flex: 1; overflow: visible; diff --git a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 1218a10c..68212d69 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -8,7 +8,7 @@
-
+

Fullwidth with page scroll

diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html index 30340713..e2e62fbd 100644 --- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html @@ -8,7 +8,7 @@
-
+

Fullwidth with content scroll

diff --git a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html index 4fbe7da7..62837067 100644 --- a/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html +++ b/src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html @@ -18,7 +18,9 @@
+ +
diff --git a/src/app/main/ui/page-layouts/page-layouts.module.ts b/src/app/main/ui/page-layouts/page-layouts.module.ts index 23faa3aa..ac8a862c 100644 --- a/src/app/main/ui/page-layouts/page-layouts.module.ts +++ b/src/app/main/ui/page-layouts/page-layouts.module.ts @@ -11,11 +11,12 @@ import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sid import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component'; import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component'; import { SimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component'; +import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component'; import { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component'; import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component'; +import { SimpleRightSidenav3Component } from './simple/right-sidenav-3/right-sidenav-3.component'; import { TabbedComponent } from './simple/tabbed/tabbed.component'; import { BlankComponent } from './blank/blank.component'; -import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component'; const routes: Routes = [ { @@ -66,10 +67,10 @@ const routes: Routes = [ path : 'ui/page-layouts/simple/right-sidenav-2', component: SimpleRightSidenav2Component }, - /*{ + { path : 'ui/page-layouts/simple/right-sidenav-3', component: SimpleRightSidenav3Component - },*/ + }, { path : 'ui/page-layouts/simple/tabbed', component: TabbedComponent @@ -99,6 +100,7 @@ const routes: Routes = [ SimpleLeftSidenav3Component, SimpleRightSidenavComponent, SimpleRightSidenav2Component, + SimpleRightSidenav3Component, TabbedComponent, BlankComponent ] diff --git a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html index b03eecd3..55a3714a 100644 --- a/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html +++ b/src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html @@ -1,7 +1,7 @@
-
+

Fullwidth

diff --git a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index 796caaf5..25b56605 100644 --- a/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -15,7 +15,7 @@
-
+
+ +
+

Right inner sidenav with content scroll

+
+ +
+ + + + + +
+ + +
+ + + +
+ + +
+ + + + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts new file mode 100644 index 00000000..5b1b3c7c --- /dev/null +++ b/src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-simple-right-sidenav-3', + templateUrl: './right-sidenav-3.component.html', + styleUrls : ['./right-sidenav-3.component.scss'] +}) +export class SimpleRightSidenav3Component +{ + constructor() + { + } + +} diff --git a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html index 5a4cd662..97fd6ae6 100644 --- a/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html +++ b/src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html @@ -6,7 +6,7 @@
-
+