purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +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, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^4.3.3", "@angular/animations": "^4.3.4",
"@angular/cdk": "^2.0.0-beta.8", "@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.3", "@angular/common": "^4.3.4",
"@angular/compiler": "^4.3.3", "@angular/compiler": "^4.3.4",
"@angular/core": "^4.3.3", "@angular/core": "^4.3.4",
"@angular/flex-layout": "2.0.0-beta.8", "@angular/flex-layout": "2.0.0-beta.8",
"@angular/forms": "^4.3.3", "@angular/forms": "^4.3.4",
"@angular/http": "^4.3.3", "@angular/http": "^4.3.4",
"@angular/material": "^2.0.0-beta.8", "@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.3", "@angular/platform-browser": "^4.3.4",
"@angular/platform-browser-dynamic": "^4.3.3", "@angular/platform-browser-dynamic": "^4.3.4",
"@angular/router": "^4.3.3", "@angular/router": "^4.3.4",
"@swimlane/ngx-charts": "^6.0.1",
"@swimlane/ngx-datatable": "^9.3.1", "@swimlane/ngx-datatable": "^9.3.1",
"@swimlane/ngx-dnd": "^2.2.0", "@swimlane/ngx-dnd": "^2.2.0",
"angular-calendar": "^0.19.0", "angular-calendar": "^0.19.0",
"angular-in-memory-web-api": "^0.3.2", "angular-in-memory-web-api": "^0.3.2",
"core-js": "^2.5.0", "core-js": "^2.5.0",
"d3": "^4.10.0",
"firebase": "^4.2.0", "firebase": "^4.2.0",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"highlight.js": "^9.12.0", "highlight.js": "^9.12.0",
"moment": "^2.18.1", "moment": "^2.18.1",
"d3": "^4.10.0",
"@swimlane/ngx-charts": "^6.0.1",
"ngx-color-picker": "^4.3.0", "ngx-color-picker": "^4.3.0",
"ngx-perfect-scrollbar": "^4.5.3", "ngx-perfect-scrollbar": "^4.5.3",
"rxjs": "^5.4.2", "rxjs": "^5.4.3",
"zone.js": "^0.8.16" "zone.js": "^0.8.16"
}, },
"devDependencies": { "devDependencies": {
"@angular/cli": "^1.2.7", "@angular/cli": "^1.3.0",
"@angular/compiler-cli": "^4.3.3", "@angular/compiler-cli": "^4.3.4",
"@angular/language-service": "^4.3.3", "@angular/language-service": "^4.3.4",
"@ngtools/webpack": "^1.5.5", "@ngtools/webpack": "^1.6.0",
"@types/jasmine": "^2.5.53", "@types/jasmine": "^2.5.53",
"@types/jasminewd2": "^2.0.2", "@types/jasminewd2": "^2.0.2",
"@types/node": "^6.0.83", "@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 { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { ProjectModule } from './main/content/apps/dashboards/project/project.module'; 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 { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
import { FuseMainModule } from './main/main.module'; import { FuseMainModule } from './main/main.module';
import { PagesModule } from './main/content/pages/pages.module'; import { PagesModule } from './main/content/pages/pages.module';
import { UIModule } from './main/content/ui/ui.module'; import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module'; import { ComponentsModule } from './main/content/components/components.module';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { /*const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true suppressScrollX: true
}; };*/
const appRoutes: Routes = [ const appRoutes: Routes = [
{ {
@ -67,7 +67,7 @@ const appRoutes: Routes = [
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}), InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG), // PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
FuseMainModule, 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 { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout'; 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 { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@ -36,7 +36,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
CommonModule, CommonModule,
FormsModule, FormsModule,
FusePipesModule, FusePipesModule,
PerfectScrollbarModule, // PerfectScrollbarModule,
ReactiveFormsModule, ReactiveFormsModule,
ColorPickerModule, ColorPickerModule,
NgxDnDModule, NgxDnDModule,
@ -52,7 +52,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
FusePipesModule, FusePipesModule,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHljsComponent,
PerfectScrollbarModule, // PerfectScrollbarModule,
ReactiveFormsModule, ReactiveFormsModule,
ColorPickerModule, ColorPickerModule,
NgxDnDModule, 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 { .page-layout {
position: relative; position: relative;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
// Carded layout // Carded layout
&.carded { &.carded {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex: 1 0 auto;
width: 100%; width: 100%;
height: 100%;
min-width: 100%; min-width: 100%;
min-height: 100%;
// Top bg // Top bg
.top-bg { .top-bg {
@ -43,16 +42,10 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
height: auto;
> .center { > .center {
flex: 1 0 auto;
.content-card { max-height: none;
.content {
overflow: hidden;
}
}
} }
} }
@ -63,8 +56,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
flex: 1; flex: 1;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-left: 32px; padding: 0 32px;
margin-right: 32px; width: 100%;
min-width: 100%;
max-width: 100%;
max-height: 100%;
.header { .header {
height: $carded-header-height-without-toolbar; 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
&.single-scroll { &.single-scroll {
height: auto;
> md-sidenav-container {
flex: 1 0 auto;
}
} }
> md-sidenav-container { > md-sidenav-container {
display: flex; display: flex;
flex: 1;
background: none; background: none;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
@ -124,9 +124,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.sidenav { .sidenav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
width: 240px; width: 240px;
min-width: 240px; min-width: 240px;
max-width: 240px; max-width: 240px;
height: auto;
z-index: 2; z-index: 2;
overflow-y: hidden; overflow-y: hidden;
@include mat-elevation(7); @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; flex: 1;
height: auto;
overflow: visible; overflow: visible;
// Center // Center
@ -167,7 +171,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
flex: 1; flex: 1;
position: relative; position: relative;
z-index: 3; z-index: 3;
height: 100%;
margin-left: 32px; margin-left: 32px;
margin-right: 32px; margin-right: 32px;
@ -263,6 +266,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Simple layout // Simple layout
&.simple { &.simple {
display: flex;
flex-direction: column;
flex: 1 0 auto;
width: 100%;
min-width: 100%;
// Top bg // Top bg
.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
&.left-sidenav, &.left-sidenav,
&.right-sidenav { &.right-sidenav {
min-height: 100%;
height: 100%;
// Single scroll // Single scroll
&.single-scroll { &.single-scroll {
height: auto;
> md-sidenav-container { > md-sidenav-container {
flex: 1 0 auto;
> .center { > .mat-sidenav-content {
overflow: hidden; 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; display: flex;
height: auto; height: auto;
@ -328,7 +339,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
.content { .content {
display: flex; 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 { > md-sidenav-container {
display: flex; display: flex;
flex-direction: column;
flex: 1;
background: none; background: none;
z-index: 2; z-index: 2;
width: 100%; 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; display: flex;
flex: 1; flex: 1;
height: auto;
overflow: visible; overflow: visible;
max-height: 100%;
.header { .header {
height: $header-height; height: $header-height;
@ -380,6 +395,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
} }
.center { .center {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto; overflow: auto;
@include mat-elevation(7); @include mat-elevation(7);
@ -415,6 +433,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
// Blank layout // Blank layout
&.blank { &.blank {
width: 100%;
min-height: 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 --> <!-- HEADER -->
<div class="header" [ngClass]="viewDate | date:'MMM'"> <div class="header" [ngClass]="viewDate | date:'MMM'">

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

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

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

@ -3,7 +3,6 @@
:host { :host {
display: flex; display: flex;
flex: 1; 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)); 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 { .big-circle {

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

@ -1,12 +1,10 @@
:host { :host {
display: flex; display: flex;
flex: 1; flex: 1 0 auto;
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)); 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; overflow: hidden;
.chat { .chat {
height: 100%;
.chat-toolbar { .chat-toolbar {
min-height: 64px; 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 --> <!-- TOP BACKGROUND -->
<div class="top-bg md-accent-bg"></div> <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 { #calendar {
height: 100% !important; display: flex;
flex: 1;
.center { .center {
padding: 32px 0; padding: 32px !important;
max-width: 1400px; max-width: 1400px;
height: 100%;
margin: 0 auto; margin: 0 auto;
.content-card { .content-card {
display: flex;
flex: 1;
position: relative; position: relative;
background: url('/assets/images/patterns/rain-grey.png') repeat; background: url('/assets/images/patterns/rain-grey.png') repeat;
height: 100%;
.mat-sidenav-container { .mat-sidenav-container {
display: flex;
flex: 1;
width: 100%; width: 100%;
height: 100%;
background: transparent; background: transparent;
.mat-sidenav-content {
display: flex;
flex: 1 0 auto;
min-height: 100%;
height: auto;
}
md-sidenav { md-sidenav {
display: flex; display: flex;
flex-direction: column; 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'; import { ChatService } from './chat.service';
@Component({ @Component({
selector : 'fuse-chat', selector : 'fuse-chat',
templateUrl: './chat.component.html', templateUrl : './chat.component.html',
styleUrls : ['./chat.component.scss'] styleUrls : ['./chat.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class ChatComponent implements OnInit 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 { .sidenav-content {
overflow: auto;
.contact-list, .chat-list { .contact-list, .chat-list {
.mat-subheader { .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"; @import "src/app/core/scss/fuse";
:host { :host {
width: 100%;
.mat-table { .mat-table {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;

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

@ -34,8 +34,15 @@
position: absolute; position: absolute;
bottom: -28px; bottom: -28px;
left: 16px; 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; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
padding: 24px; padding: 24px;
.select-message-text { .select-message-text {

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

@ -1,7 +1,12 @@
:host{ :host{
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; flex: 1;
width: 50%;
min-width: 50%;
max-width: 50%;
overflow-y: auto;
padding: 0; padding: 0;
border-right: 1px solid rgba(0,0,0,.12); 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> <md-icon>folder</md-icon>
</button> </button>
<md-menu #folderMenu="mdMenu"> <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> </md-menu>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails"> <button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<md-icon>label</md-icon> <md-icon>label</md-icon>
</button> </button>
<md-menu #labelMenu="mdMenu"> <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> </md-menu>
</div> </div>
@ -85,13 +89,9 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="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 perfect-scrollbar></fuse-mail-details>
<fuse-mail-details fxFlex perfect-scrollbar></fuse-mail-details>
</div>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->

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

@ -2,7 +2,6 @@
:host { :host {
width: 100%; width: 100%;
height: 100%;
.center { .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) .debounceTime(300)
.distinctUntilChanged() .distinctUntilChanged()
.subscribe(searchText => { .subscribe(searchText => {
this.mailService.onSearchTextChanged.next(searchText); this.mailService.onSearchTextChanged.next(searchText);
}); });*/
} }
ngOnDestroy() ngOnDestroy()

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

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

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

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

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

@ -76,13 +76,9 @@
<!-- CONTENT --> <!-- CONTENT -->
<div class="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 perfect-scrollbar></fuse-todo-details>
<fuse-todo-details fxFlex perfect-scrollbar></fuse-todo-details>
</div>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->

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

@ -2,7 +2,6 @@
:host { :host {
width: 100%; width: 100%;
height: 100%;
.center { .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"> <div class="content p-24" fxLayout="column">
<!-- STYLE 1 --> <!-- STYLE 1 -->
<div fxLayout="column"> <div fxLayout="column" fxFlex="1 0 auto">
<div class="mat-title">Style 1</div> <div class="mat-title">Style 1</div>
@ -127,7 +127,7 @@
<!-- / STYLE 1 --> <!-- / STYLE 1 -->
<!-- STYLE 2 --> <!-- 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> <div class="mat-title">Style 2</div>
@ -224,7 +224,7 @@
<!-- / STYLE 2 --> <!-- / STYLE 2 -->
<!-- STYLE 3 --> <!-- 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> <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 { Component, OnInit } from '@angular/core';
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar'; // import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
@Component({ @Component({
@ -11,7 +11,7 @@ export class FuseContentComponent implements OnInit
{ {
constructor( constructor(
private router: Router, private router: Router,
private perfectScrollbarDirective: PerfectScrollbarDirective // private perfectScrollbarDirective: PerfectScrollbarDirective
) )
{ {
@ -25,7 +25,7 @@ export class FuseContentComponent implements OnInit
{ {
setTimeout(() => setTimeout(() =>
{ {
this.perfectScrollbarDirective.scrollToTop(); // this.perfectScrollbarDirective.scrollToTop();
}, 0); }, 0);
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,7 +3,8 @@
:host { :host {
#maintenance { #maintenance {
height: 100%; width: 100%;
overflow: auto;
background: url('/assets/images/backgrounds/march.jpg') no-repeat; background: url('/assets/images/backgrounds/march.jpg') no-repeat;
background-size: cover; 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"> <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" <form class="md-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start"
fxFlex="1" fxFlex="1 0 auto" name="form" [formGroup]="form">
name="form" [formGroup]="form">
<div class="h2 mb-24">Reactive Form Example</div> <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"> <md-input-container fxFlex="100">
<input mdInput placeholder="Company (disabled)" formControlName="company"> <input mdInput placeholder="Company (disabled)" formControlName="company">
@ -39,7 +38,7 @@
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<md-input-container fxFlex="50"> <md-input-container fxFlex="50">
<input mdInput placeholder="First name" formControlName="firstName"> <input mdInput placeholder="First name" formControlName="firstName">
@ -57,7 +56,7 @@
</div> </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"> <md-input-container fxFlex="100">
<textarea mdInput placeholder="Address" formControlName="address"> <textarea mdInput placeholder="Address" formControlName="address">
@ -77,7 +76,7 @@
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100"> <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<md-input-container fxFlex="33"> <md-input-container fxFlex="33">
<input mdInput placeholder="City" formControlName="city"> <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> <md-sidenav-container>
@ -12,7 +12,7 @@
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" perfect-scrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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 --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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> <md-sidenav-container>
@ -16,7 +16,7 @@
<!-- / SIDENAV --> <!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" perfect-scrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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> <md-sidenav-container>
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" perfect-scrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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 --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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> <md-sidenav-container>
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" perfect-scrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center"> <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 --> <!-- HEADER -->
<div class="header md-accent-bg p-24"> <div class="header md-accent-bg p-24">

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

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

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

@ -1,6 +1,6 @@
<md-sidenav-container> <md-sidenav-container>
<div id="fuse-main-content"> <div id="fuse-main-content" fxFlexFill>
<!-- TOOLBAR: Above --> <!-- TOOLBAR: Above -->
<ng-container *ngIf="layoutSettings.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; display: flex;
flex: 1; flex: 1;
.mat-sidenav-content { > .mat-sidenav-content {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
height: 100vh;
#fuse-main-content { #fuse-main-content {
display: flex; display: flex;
@ -22,6 +23,7 @@ fuse-main {
#wrapper { #wrapper {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden;
.content-wrapper { .content-wrapper {
display: flex; display: flex;
@ -38,6 +40,8 @@ fuse-main {
overflow-y: auto; overflow-y: auto;
> *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) { > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
display: flex;
flex: 1;
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
} }

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

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

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

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

2
src/styles.scss
View File

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