+
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;