purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-30 09:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout firefox + safari stuff

Browse Source
This commit is contained in:
Sercan Yemen 2017-08-14 17:09:00 +03:00
parent 71d8c37752
commit 2b92320185
51 changed files with 1935 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2110
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -12,39 +12,39 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^4.3.3",
"@angular/animations": "^4.3.4",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.3",
"@angular/compiler": "^4.3.3",
"@angular/core": "^4.3.3",
"@angular/common": "^4.3.4",
"@angular/compiler": "^4.3.4",
"@angular/core": "^4.3.4",
"@angular/flex-layout": "2.0.0-beta.8",
"@angular/forms": "^4.3.3",
"@angular/http": "^4.3.3",
"@angular/forms": "^4.3.4",
"@angular/http": "^4.3.4",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.3",
"@angular/platform-browser-dynamic": "^4.3.3",
"@angular/router": "^4.3.3",
"@angular/platform-browser": "^4.3.4",
"@angular/platform-browser-dynamic": "^4.3.4",
"@angular/router": "^4.3.4",
"@swimlane/ngx-charts": "^6.0.1",
"@swimlane/ngx-datatable": "^9.3.1",
"@swimlane/ngx-dnd": "^2.2.0",
"angular-calendar": "^0.19.0",
"angular-in-memory-web-api": "^0.3.2",
"core-js": "^2.5.0",
"d3": "^4.10.0",
"firebase": "^4.2.0",
"hammerjs": "^2.0.8",
"highlight.js": "^9.12.0",
"moment": "^2.18.1",
"d3": "^4.10.0",
"@swimlane/ngx-charts": "^6.0.1",
"ngx-color-picker": "^4.3.0",
"ngx-perfect-scrollbar": "^4.5.3",
"rxjs": "^5.4.2",
"rxjs": "^5.4.3",
"zone.js": "^0.8.16"
},
"devDependencies": {
"@angular/cli": "^1.2.7",
"@angular/compiler-cli": "^4.3.3",
"@angular/language-service": "^4.3.3",
"@ngtools/webpack": "^1.5.5",
"@angular/cli": "^1.3.0",
"@angular/compiler-cli": "^4.3.4",
"@angular/language-service": "^4.3.4",
"@ngtools/webpack": "^1.6.0",
"@types/jasmine": "^2.5.53",
"@types/jasminewd2": "^2.0.2",
"@types/node": "^6.0.83",

8
src/app/app.module.ts
View File

@ -11,16 +11,16 @@ import 'hammerjs';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
// import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
import { FuseMainModule } from './main/main.module';
import { PagesModule } from './main/content/pages/pages.module';
import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
/*const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
};*/
const appRoutes: Routes = [
{
@ -67,7 +67,7 @@ const appRoutes: Routes = [
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
// PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
FuseMainModule,

6
src/app/core/modules/shared.module.ts
View File

@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@ -36,7 +36,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
CommonModule,
FormsModule,
FusePipesModule,
PerfectScrollbarModule,
// PerfectScrollbarModule,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
@ -52,7 +52,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
FusePipesModule,
FuseCountdownComponent,
FuseHljsComponent,
PerfectScrollbarModule,
// PerfectScrollbarModule,
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,

71
src/app/core/scss/partials/_page-layouts.scss
View File

@ -12,17 +12,16 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.page-layout {
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: auto;
// Carded layout
&.carded {
display: flex;
flex-direction: row;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
// Top bg
.top-bg {
@ -43,16 +42,10 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Single scroll
&.single-scroll {
height: auto;
> .center {
.content-card {
.content {
overflow: hidden;
}
}
flex: 1 0 auto;
max-height: none;
}
}
@ -63,8 +56,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
flex: 1;
position: relative;
z-index: 2;
margin-left: 32px;
margin-right: 32px;
padding: 0 32px;
width: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
.header {
height: $carded-header-height-without-toolbar;
@ -112,11 +108,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Single scroll
&.single-scroll {
height: auto;
> md-sidenav-container {
flex: 1 0 auto;
}
}
> md-sidenav-container {
display: flex;
flex: 1;
background: none;
z-index: 2;
width: 100%;
@ -124,9 +124,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.sidenav {
display: flex;
flex-direction: column;
flex: 1;
width: 240px;
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 2;
overflow-y: hidden;
@include mat-elevation(7);
@ -156,8 +158,10 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
.mat-sidenav-content {
> .mat-sidenav-content {
display: flex;
flex: 1;
height: auto;
overflow: visible;
// Center
@ -167,7 +171,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
flex: 1;
position: relative;
z-index: 3;
height: 100%;
margin-left: 32px;
margin-right: 32px;
@ -263,6 +266,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Simple layout
&.simple {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-width: 100%;
// Top bg
.top-bg {
@ -289,17 +297,20 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Left sidenav - Right sidenav
&.left-sidenav,
&.right-sidenav {
min-height: 100%;
height: 100%;
// Single scroll
&.single-scroll {
height: auto;
> md-sidenav-container {
flex: 1 0 auto;
> .center {
overflow: hidden;
> .mat-sidenav-content {
flex: 1 0 auto;
max-height: none;
> .center {
overflow: hidden;
}
}
}
}
@ -317,7 +328,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
.mat-sidenav-content {
> .mat-sidenav-content {
display: flex;
height: auto;
@ -328,7 +339,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.content {
display: flex;
flex: 1;
flex: 1 0 auto;
}
}
}
@ -337,6 +348,8 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> md-sidenav-container {
display: flex;
flex-direction: column;
flex: 1;
background: none;
z-index: 2;
width: 100%;
@ -368,10 +381,12 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
.mat-sidenav-content {
> .mat-sidenav-content {
display: flex;
flex: 1;
height: auto;
overflow: visible;
max-height: 100%;
.header {
height: $header-height;
@ -380,6 +395,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
.center {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
@include mat-elevation(7);
@ -415,6 +433,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Blank layout
&.blank {
width: 100%;
min-height: 100%;
}
}

2
src/app/main/content/apps/calendar/calendar.component.html
View File

@ -1,4 +1,4 @@
<div id="calendar" class="page-layout simple fullwidth" fxLayout="column">
<div id="calendar" class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header" [ngClass]="viewDate | date:'MMM'">

1
src/app/main/content/apps/calendar/calendar.component.scss
View File

@ -184,7 +184,6 @@
#calendar {
background: #FFFFFF;
height: 100%;
.header {
height: 200px;

1
src/app/main/content/apps/chat/chat-start/chat-start.component.scss
View File

@ -3,7 +3,6 @@
:host {
display: flex;
flex: 1;
height: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
.big-circle {

4
src/app/main/content/apps/chat/chat-view/chat-view.component.scss
View File

@ -1,12 +1,10 @@
:host {
display: flex;
flex: 1;
height: 100%;
flex: 1 0 auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
overflow: hidden;
.chat {
height: 100%;
.chat-toolbar {
min-height: 64px;

2
src/app/main/content/apps/chat/chat.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout carded fullwidth">
<div id="calendar" class="page-layout carded fullwidth">
<!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div>

21
src/app/main/content/apps/chat/chat.component.scss
View File

@ -1,22 +1,31 @@
:host {
height: 100% !important;
#calendar {
display: flex;
flex: 1;
.center {
padding: 32px 0;
padding: 32px !important;
max-width: 1400px;
height: 100%;
margin: 0 auto;
.content-card {
display: flex;
flex: 1;
position: relative;
background: url('/assets/images/patterns/rain-grey.png') repeat;
height: 100%;
.mat-sidenav-container {
display: flex;
flex: 1;
width: 100%;
height: 100%;
background: transparent;
.mat-sidenav-content {
display: flex;
flex: 1 0 auto;
min-height: 100%;
height: auto;
}
md-sidenav {
display: flex;
flex-direction: column;

7
src/app/main/content/apps/chat/chat.component.ts
View File

@ -2,9 +2,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChatService } from './chat.service';
@Component({
selector : 'fuse-chat',
templateUrl: './chat.component.html',
styleUrls : ['./chat.component.scss']
selector : 'fuse-chat',
templateUrl : './chat.component.html',
styleUrls : ['./chat.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChatComponent implements OnInit
{

2
src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.scss
View File

@ -41,6 +41,8 @@
}
.sidenav-content {
overflow: auto;
.contact-list, .chat-list {
.mat-subheader {

2
src/app/main/content/apps/file-manager/file-list/file-list.component.scss
View File

@ -1,6 +1,8 @@
@import "src/app/core/scss/fuse";
:host {
width: 100%;
.mat-table {
background: transparent;
box-shadow: none;

7
src/app/main/content/apps/file-manager/file-manager.component.scss
View File

@ -34,8 +34,15 @@
position: absolute;
bottom: -28px;
left: 16px;
z-index: 999;
}
}
.content{
display: flex;
flex: 1;
overflow: auto;
}
}
}
}

4
src/app/main/content/apps/mail/mail-details/mail-details.component.scss
View File

@ -4,6 +4,10 @@
display: flex;
flex-direction: column;
flex: 1;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
padding: 24px;
.select-message-text {

7
src/app/main/content/apps/mail/mail-list/mail-list.component.scss
View File

@ -1,7 +1,12 @@
:host{
position: relative;
display: flex;
flex-direction: column;
position: relative;
flex: 1;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
padding: 0;
border-right: 1px solid rgba(0,0,0,.12);

16
src/app/main/content/apps/mail/mail.component.html
View File

@ -69,14 +69,18 @@
<md-icon>folder</md-icon>
</button>
<md-menu #folderMenu="mdMenu">
<button md-menu-item *ngFor="let folder of folders" (click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}</button>
<button md-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<md-icon>label</md-icon>
</button>
<md-menu #labelMenu="mdMenu">
<button md-menu-item *ngFor="let label of labels" (click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}</button>
<button md-menu-item *ngFor="let label of labels"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button>
</md-menu>
</div>
@ -85,13 +89,9 @@
<!-- CONTENT -->
<div class="content">
<div fxLayout="row" fxFill>
<fuse-mail-list perfect-scrollbar></fuse-mail-list>
<fuse-mail-list fxFlex perfect-scrollbar></fuse-mail-list>
<fuse-mail-details fxFlex perfect-scrollbar></fuse-mail-details>
</div>
<fuse-mail-details perfect-scrollbar></fuse-mail-details>
</div>
<!-- / CONTENT -->

1
src/app/main/content/apps/mail/mail.component.scss
View File

@ -2,7 +2,6 @@
:host {
width: 100%;
height: 100%;
.center {

4
src/app/main/content/apps/mail/mail.component.ts
View File

@ -58,12 +58,12 @@ export class MailComponent implements OnInit, OnDestroy
});
this.searchInput.valueChanges
/*this.searchInput.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.subscribe(searchText => {
this.mailService.onSearchTextChanged.next(searchText);
});
});*/
}
ngOnDestroy()

6
src/app/main/content/apps/todo/todo-details/todo-details.component.scss
View File

@ -2,8 +2,12 @@
:host {
display: flex;
flex: 1 0 auto;
flex-direction: column;
flex: 1;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
background: #FFFFFF;
padding: 24px;

6
src/app/main/content/apps/todo/todo-list/todo-list.component.scss
View File

@ -1,5 +1,11 @@
:host {
display: flex;
flex: 1 0 auto;
flex-direction: column;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
background: #FAFAFA;
position: relative;
padding: 0;

8
src/app/main/content/apps/todo/todo.component.html
View File

@ -76,13 +76,9 @@
<!-- CONTENT -->
<div class="content">
<div fxLayout="row" fxFill>
<fuse-todo-list perfect-scrollbar></fuse-todo-list>
<fuse-todo-list perfect-scrollbar fxFlex></fuse-todo-list>
<fuse-todo-details fxFlex perfect-scrollbar></fuse-todo-details>
</div>
<fuse-todo-details perfect-scrollbar></fuse-todo-details>
</div>
<!-- / CONTENT -->

1
src/app/main/content/apps/todo/todo.component.scss
View File

@ -2,7 +2,6 @@
:host {
width: 100%;
height: 100%;
.center {

6
src/app/main/content/components/price-tables/price-tables.component.html
View File

@ -17,7 +17,7 @@
<div class="content p-24" fxLayout="column">
<!-- STYLE 1 -->
<div fxLayout="column">
<div fxLayout="column" fxFlex="1 0 auto">
<div class="mat-title">Style 1</div>
@ -127,7 +127,7 @@
<!-- / STYLE 1 -->
<!-- STYLE 2 -->
<div fxLayout="column" class="mt-48">
<div fxLayout="column" fxFlex="1 0 auto" class="mt-48">
<div class="mat-title">Style 2</div>
@ -224,7 +224,7 @@
<!-- / STYLE 2 -->
<!-- STYLE 3 -->
<div fxLayout="column" class="mt-48">
<div fxLayout="column" fxFlex="1 0 auto" class="mt-48">
<div class="mat-title">Style 3</div>

6
src/app/main/content/content.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
// import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { NavigationEnd, Router } from '@angular/router';
@Component({
@ -11,7 +11,7 @@ export class FuseContentComponent implements OnInit
{
constructor(
private router: Router,
private perfectScrollbarDirective: PerfectScrollbarDirective
// private perfectScrollbarDirective: PerfectScrollbarDirective
)
{
@ -25,7 +25,7 @@ export class FuseContentComponent implements OnInit
{
setTimeout(() =>
{
this.perfectScrollbarDirective.scrollToTop();
// this.perfectScrollbarDirective.scrollToTop();
}, 0);
}
}

3
src/app/main/content/pages/authentication/forgot-password/forgot-password.component.scss
View File

@ -3,7 +3,8 @@
:host {
#forgot-password {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/lock/lock.component.scss
View File

@ -3,7 +3,8 @@
:host {
#lock {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/login-2/login-2.component.scss
View File

@ -3,7 +3,8 @@
:host {
#login {
height: 100%;
width: 100%;
overflow: auto;
overflow: hidden;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/login/login.component.scss
View File

@ -3,7 +3,8 @@
:host {
#login {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/register-2/register-2.component.scss
View File

@ -3,7 +3,8 @@
:host {
#register {
height: 100%;
width: 100%;
overflow: auto;
overflow: hidden;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/register/register.component.scss
View File

@ -3,7 +3,8 @@
:host {
#register {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/authentication/reset-password/reset-password.component.scss
View File

@ -3,7 +3,8 @@
:host {
#reset-password {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/coming-soon/coming-soon.component.scss
View File

@ -3,7 +3,8 @@
:host {
#coming-soon {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

3
src/app/main/content/pages/errors/404/error-404.component.scss
View File

@ -3,11 +3,12 @@
:host {
#error-404 {
width: 100%;
overflow: auto;
.content {
width: 90%;
max-width: 512px !important;
margin-top: 128px;
.error-code {
font-size: 112px;

3
src/app/main/content/pages/errors/500/error-500.component.scss
View File

@ -3,11 +3,12 @@
:host {
#error-500 {
width: 100%;
overflow: auto;
.content {
width: 90%;
max-width: 512px !important;
margin-top: 128px;
.error-code {
font-size: 112px;

3
src/app/main/content/pages/maintenance/maintenance.component.scss
View File

@ -3,7 +3,8 @@
:host {
#maintenance {
height: 100%;
width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover;

11
src/app/main/content/ui/forms/forms.component.html
View File

@ -26,12 +26,11 @@
<div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-sm="row">
<form class="md-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start"
fxFlex="1"
name="form" [formGroup]="form">
fxFlex="1 0 auto" name="form" [formGroup]="form">
<div class="h2 mb-24">Reactive Form Example</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<md-input-container fxFlex="100">
<input mdInput placeholder="Company (disabled)" formControlName="company">
@ -39,7 +38,7 @@
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<md-input-container fxFlex="50">
<input mdInput placeholder="First name" formControlName="firstName">
@ -57,7 +56,7 @@
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" fxLayoutWrap>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" fxLayoutWrap>
<md-input-container fxFlex="100">
<textarea mdInput placeholder="Address" formControlName="address">
@ -77,7 +76,7 @@
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<md-input-container fxFlex="33">
<input mdInput placeholder="City" formControlName="city">

4
src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav single-scroll" fxLayout="row">
<div class="page-layout simple left-sidenav single-scroll">
<md-sidenav-container>
@ -12,7 +12,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<div class="center" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

2
src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
<div class="page-layout simple left-sidenav inner-sidenav">
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

4
src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple left-sidenav" fxLayout="row">
<div class="page-layout simple left-sidenav">
<md-sidenav-container>
@ -16,7 +16,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<div class="center" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

4
src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -1,9 +1,9 @@
<div class="page-layout simple right-sidenav single-scroll" fxLayout="row">
<div class="page-layout simple right-sidenav single-scroll">
<md-sidenav-container>
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<div class="center" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

2
src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple right-sidenav inner-sidenav" fxLayout="column">
<div class="page-layout simple right-sidenav inner-sidenav">
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

4
src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
View File

@ -1,9 +1,9 @@
<div class="page-layout simple right-sidenav" fxLayout="row">
<div class="page-layout simple right-sidenav">
<md-sidenav-container>
<!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar>
<div class="center" perfect-scrollbar>
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">

2
src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html
View File

@ -1,4 +1,4 @@
<div class="page-layout simple tabbed" fxLayout="column">
<div class="page-layout simple tabbed">
<!-- HEADER -->
<div class="header md-accent-bg p-24">

2
src/app/main/footer/footer.component.scss
View File

@ -1,4 +1,6 @@
:host {
display: flex;
flex: 0 1 auto;
z-index: 3;
&.above {

2
src/app/main/main.component.html
View File

@ -1,6 +1,6 @@
<md-sidenav-container>
<div id="fuse-main-content">
<div id="fuse-main-content" fxFlexFill>
<!-- TOOLBAR: Above -->
<ng-container *ngIf="layoutSettings.toolbar === 'above'">

6
src/app/main/main.component.scss
View File

@ -8,10 +8,11 @@ fuse-main {
display: flex;
flex: 1;
.mat-sidenav-content {
> .mat-sidenav-content {
display: flex;
flex: 1;
overflow: hidden;
height: 100vh;
#fuse-main-content {
display: flex;
@ -22,6 +23,7 @@ fuse-main {
#wrapper {
display: flex;
flex: 1;
overflow: hidden;
.content-wrapper {
display: flex;
@ -38,6 +40,8 @@ fuse-main {
overflow-y: auto;
> *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
display: flex;
flex: 1;
width: 100%;
min-width: 100%;
}

1
src/app/main/navbar/navbar.component.scss
View File

@ -16,7 +16,6 @@ fuse-navbar {
width: 256px;
min-width: 256px;
max-width: 256px;
height: 100%;
background-color: #FFFFFF;
overflow-y: auto;
overflow-x: hidden;

2
src/app/main/toolbar/toolbar.component.scss
View File

@ -1,5 +1,7 @@
:host {
position: relative;
display: flex;
flex: 0 1 auto;
z-index: 4;
&.below{

2
src/styles.scss
View File

@ -1,2 +1,2 @@
// Import Fuse main library
@import "app/core/scss/core";
@import "app/core/scss/core";