purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

page layouts

Browse Source
This commit is contained in:
Sercan Yemen 2017-08-01 11:14:39 +03:00
parent 156b859ecc
commit e8a6b0fb3b
10 changed files with 136 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/core/components/navigation/navigation.model.ts
View File

@ -312,6 +312,11 @@ export class FuseNavigation
'type' : 'nav-item', 'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/left-sidenav-2' 'url' : '/ui/page-layouts/simple/left-sidenav-2'
}, },
{
'title': 'Left Sidenav 3',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/left-sidenav-3'
},
{ {
'title': 'Right Sidenav', 'title': 'Right Sidenav',
'type' : 'nav-item', 'type' : 'nav-item',

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

@ -280,6 +280,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
} }
> md-sidenav-container { > md-sidenav-container {
display: flex;
background: none;
z-index: 2;
width: 100%;
.sidenav { .sidenav {
width: 240px; width: 240px;
@ -305,6 +309,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
} }
.mat-sidenav-content { .mat-sidenav-content {
flex: 1;
overflow: visible; overflow: visible;
.header { .header {

38
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -6,25 +6,6 @@
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</md-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center"> <div class="center">
@ -63,6 +44,25 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</md-sidenav>
<!-- / SIDENAV -->
</md-sidenav-container> </md-sidenav-container>
</div> </div>

38
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
View File

@ -6,25 +6,6 @@
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</md-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center"> <div class="center">
@ -63,6 +44,25 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" perfect-scrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</md-sidenav>
<!-- / SIDENAV -->
</md-sidenav-container> </md-sidenav-container>
</div> </div>

10
src/app/main/ui/page-layouts/page-layouts.module.ts
View File

@ -15,6 +15,7 @@ import { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidena
import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component'; import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component';
import { TabbedComponent } from './simple/tabbed/tabbed.component'; import { TabbedComponent } from './simple/tabbed/tabbed.component';
import { BlankComponent } from './blank/blank.component'; import { BlankComponent } from './blank/blank.component';
import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -53,6 +54,10 @@ const routes: Routes = [
path : 'ui/page-layouts/simple/left-sidenav-2', path : 'ui/page-layouts/simple/left-sidenav-2',
component: SimpleLeftSidenav2Component component: SimpleLeftSidenav2Component
}, },
{
path : 'ui/page-layouts/simple/left-sidenav-3',
component: SimpleLeftSidenav3Component
},
{ {
path : 'ui/page-layouts/simple/right-sidenav', path : 'ui/page-layouts/simple/right-sidenav',
component: SimpleRightSidenavComponent component: SimpleRightSidenavComponent
@ -61,6 +66,10 @@ const routes: Routes = [
path : 'ui/page-layouts/simple/right-sidenav-2', path : 'ui/page-layouts/simple/right-sidenav-2',
component: SimpleRightSidenav2Component component: SimpleRightSidenav2Component
}, },
/*{
path : 'ui/page-layouts/simple/right-sidenav-3',
component: SimpleRightSidenav3Component
},*/
{ {
path : 'ui/page-layouts/simple/tabbed', path : 'ui/page-layouts/simple/tabbed',
component: TabbedComponent component: TabbedComponent
@ -87,6 +96,7 @@ const routes: Routes = [
SimpleFullWidthComponent, SimpleFullWidthComponent,
SimpleLeftSidenavComponent, SimpleLeftSidenavComponent,
SimpleLeftSidenav2Component, SimpleLeftSidenav2Component,
SimpleLeftSidenav3Component,
SimpleRightSidenavComponent, SimpleRightSidenavComponent,
SimpleRightSidenav2Component, SimpleRightSidenav2Component,
TabbedComponent, TabbedComponent,

46
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html Normal file
View File

@ -0,0 +1,46 @@
<div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
<div>
<h2>Left inner sidenav with content scroll</h2>
</div>
</div>
<!-- / HEADER -->
<md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT -->
<div class="content p-24" perfect-scrollbar>
<fuse-demo-content></fuse-demo-content>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</md-sidenav-container>
</div>

0
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.scss Normal file
View File

14
src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-simple-left-sidenav-3',
templateUrl: './left-sidenav-3.component.html',
styleUrls : ['./left-sidenav-3.component.scss']
})
export class SimpleLeftSidenav3Component
{
constructor()
{
}
}

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

@ -2,15 +2,6 @@
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav-2" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" fxFlex perfect-scrollbar>
@ -41,6 +32,15 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav-2" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
</md-sidenav-container> </md-sidenav-container>
</div> </div>

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

@ -2,15 +2,6 @@
<md-sidenav-container> <md-sidenav-container>
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CENTER -->
<div class="center" fxFlex perfect-scrollbar> <div class="center" fxFlex perfect-scrollbar>
@ -41,6 +32,15 @@
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
<!-- SIDENAV -->
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
fuseMdSidenavHelper="simple-right-sidenav" md-is-locked-open="gt-md">
<fuse-demo-sidenav></fuse-demo-sidenav>
</md-sidenav>
<!-- / SIDENAV -->
</md-sidenav-container> </md-sidenav-container>
</div> </div>