diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 74fa994a..8f521bfe 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -27,8 +27,9 @@ Vertical Layout #2 - Horizontal Layout #1 - Horizontal Layout #2 + + Horizontal Layout #1 + @@ -38,7 +39,7 @@ -
+

Layout Width

@@ -82,7 +83,6 @@ Above Below Static - Below Sticky Below Fixed @@ -101,7 +101,6 @@ Above Below Static - Below Sticky Below Fixed @@ -113,7 +112,7 @@ -
+

Layout Width

@@ -156,7 +155,6 @@

Position:

Above Static - Above Sticky Above Fixed Below @@ -175,7 +173,6 @@

Position:

Above Static - Above Sticky Above Fixed Below @@ -188,7 +185,7 @@ -
+

Layout Width

@@ -231,7 +228,6 @@

Position:

Above Static - Above Sticky Above Fixed @@ -249,7 +245,6 @@

Position:

Above Static - Above Sticky Above Fixed @@ -257,6 +252,72 @@ + + + + +
+ +

Layout Width

+ + Fullwidth + Boxed + + +
+ + +
+ +

Navbar

+ + + Hide + + +

Position:

+ + Top + + +
+ + +
+ +

Toolbar

+ + + Hide + + +

Position:

+ + Above + Below + + +
+ + +
+ +

Footer

+ + + Hide + + +

Position:

+ + Above Fixed + Above Static + + +
+ +
+
diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index c5230167..c801768f 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -250,6 +250,34 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy break; } + + // Horizontal Layout #1 + case 'horizontal-layout-1': + { + this.form.patchValue({ + layout: { + width : 'fullwidth', + navbar : { + hidden : false, + position : 'top', + folded : false, + background: 'mat-fuse-dark-700-bg' + }, + toolbar: { + hidden : false, + position : 'above', + background: 'mat-white-500-bg' + }, + footer : { + hidden : false, + position : 'above-fixed', + background: 'mat-fuse-dark-900-bg' + } + } + }); + + break; + } } } diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index 9458a935..2172caac 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -11,12 +11,12 @@ export interface FuseConfig }, toolbar: { hidden: boolean, - position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', + position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed', background: string } footer: { hidden: boolean, - position: 'above' | 'above-static' | 'above-sticky' | 'above-fixed' | 'below' | 'below-static' | 'below-sticky' | 'below-fixed', + position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed', background: string } }; diff --git a/src/app/app.component.html b/src/app/app.component.html index 669f1e7c..2048afa4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -15,7 +15,7 @@ - + diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html index 1294d2da..1585d402 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.html +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -1,91 +1,100 @@ -
+
- - + + - + + + + + + + + +
- - - + + +
- - - - - - -
- - - - - - +
- -
+ +
- - -
-
- -
- - - - - -
- -
+ +
- + - \ No newline at end of file + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss index 1d854f63..bb3a3b3b 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.scss +++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss @@ -4,6 +4,7 @@ horizontal-layout-1 { display: flex; flex: 1 1 auto; width: 100%; + height: 100%; #main { position: relative; @@ -11,14 +12,24 @@ horizontal-layout-1 { flex: 1 1 auto; flex-direction: column; width: 100%; + height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 > .container { position: relative; display: flex; flex: 1 1 auto; width: 100%; + min-height: 0; + min-width: 0; // Container 2 > .container { @@ -35,17 +46,18 @@ horizontal-layout-1 { flex: 1 1 auto; flex-direction: column; transform: translateZ(0); + overflow-x: hidden; + overflow-y: auto; - &.container-scroll { - overflow-x: hidden; - overflow-y: auto; + // Content component + content { - // Content component - content { - flex: 1 0 auto; + &.inner-scroll { + flex: 1 1 auto; + min-height: 0; > *:not(router-outlet) { - flex: 1 0 auto; + flex: 1 1 auto; } } } @@ -54,78 +66,3 @@ horizontal-layout-1 { } } } - -vertical-layout-111 { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - - /* > .mat-sidenav-container { - display: flex; - flex: 1; - - > .mat-sidenav-content, - > .mat-drawer-content { - display: flex; - flex: 1; - overflow: hidden; - height: 100vh;*/ - - @include media-breakpoint-down('sm') { - height: auto !important; - } - - #main-content { - display: flex; - flex: 1; - flex-direction: column; - overflow: hidden; - background: #FAFAFA; - - #wrapper { - display: flex; - position: relative; - flex: 1; - overflow: hidden; - - .content-wrapper { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - - content { - position: relative; - display: flex; - flex: 1; - flex-direction: row; - width: 100%; - overflow: hidden; - - > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { - display: flex; - flex: 1; - width: 100%; - min-width: 100%; - } - - > *.ng-animating { - - .mat-tab-body { - height: 100vh; - } - } - } - } - //} - //} - } - } - - &[fuse-layout-mode="boxed"] { - max-width: 1200px; - margin: 0 auto; - @include mat-elevation(8); - } -} diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts index 008361c7..42cd08a8 100644 --- a/src/app/layout/layout.module.ts +++ b/src/app/layout/layout.module.ts @@ -5,18 +5,24 @@ import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1 import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module'; +import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module'; + @NgModule({ imports: [ VerticalLayout1BodyScrollModule, VerticalLayout1ContentScrollModule, - VerticalLayout2Module + VerticalLayout2Module, + + HorizontalLayout1Module ], exports: [ VerticalLayout1BodyScrollModule, VerticalLayout1ContentScrollModule, - VerticalLayout2Module + VerticalLayout2Module, + + HorizontalLayout1Module ] }) export class LayoutModule diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html index aea612bd..fb79bfec 100644 --- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss index fbe43795..951fe8d1 100644 --- a/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss +++ b/src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.scss @@ -15,6 +15,13 @@ vertical-layout-1-body-scroll { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 (Scrollable) > .container { position: relative; diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html index 9d1217cf..b0dc5ea4 100644 --- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss index 0af78cae..db1a6bcf 100644 --- a/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss +++ b/src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.scss @@ -15,6 +15,13 @@ vertical-layout-1-content-scroll { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 > .container { position: relative; diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index 7b719f1f..ddb30b83 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss index b863500e..cf112512 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.scss +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -15,6 +15,13 @@ vertical-layout-2 { height: 100%; z-index: 1; + // Boxed + &.boxed { + max-width: 1200px; + margin: 0 auto; + @include mat-elevation(8); + } + // Container 1 (Scrollable) > .container { position: relative;