mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
added left sidenav 3 & right sidenav 3
+ page layouts header size modifications + page layouts header text alignment
This commit is contained in:
Sercan Yemen
parent
0a049ff9f4
commit
1c66ccd9e2
|
|
@ -327,6 +327,11 @@ export class FuseNavigation
|
|||
'type' : 'nav-item',
|
||||
'url' : '/ui/page-layouts/simple/right-sidenav-2'
|
||||
},
|
||||
{
|
||||
'title': 'Right Sidenav 3',
|
||||
'type' : 'nav-item',
|
||||
'url' : '/ui/page-layouts/simple/right-sidenav-3'
|
||||
},
|
||||
{
|
||||
'title': 'Tabbed',
|
||||
'type' : 'nav-item',
|
||||
|
|
|
|||
|
|
@ -37,6 +37,26 @@
|
|||
.#{$abbrev}-#{$size} {
|
||||
#{$prop}: $length !important;
|
||||
}
|
||||
}
|
||||
|
||||
@for $index from 0 through 64 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
}
|
||||
|
||||
@for $index from 0 through 64 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
.#{$abbrev}t-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
|
|
@ -53,16 +73,6 @@
|
|||
.#{$abbrev}l-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
// Page Layouts
|
||||
$header-height: 200px;
|
||||
$header-height-sm: 160px;
|
||||
$carded-header-height: 200px !default;
|
||||
$carded-header-height-sm: 160px !default;
|
||||
$carded-toolbar-height: 64px !default;
|
||||
|
||||
$card-toolbar-height: 64px;
|
||||
$card-header-height: $header-height - $card-toolbar-height;
|
||||
$card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||
$header-height: 120px !default;
|
||||
$header-height-sm: 100px !default;
|
||||
|
||||
// Calculate toolbarless header height
|
||||
$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
|
||||
$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
|
||||
|
||||
.page-layout {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Carded layout
|
||||
|
||||
&.carded {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
// Top bg
|
||||
.top-bg {
|
||||
position: absolute;
|
||||
|
|
@ -17,17 +31,12 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $header-height;
|
||||
}
|
||||
height: $carded-header-height;
|
||||
|
||||
// Carded layout
|
||||
&.carded {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
@include media-breakpoint('sm') {
|
||||
height: $carded-header-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullwidth
|
||||
&.fullwidth {
|
||||
|
|
@ -58,34 +67,40 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
margin-right: 32px;
|
||||
|
||||
.header {
|
||||
height: $card-header-height;
|
||||
min-height: $card-header-height;
|
||||
max-height: $card-header-height;
|
||||
height: $carded-header-height-without-toolbar;
|
||||
min-height: $carded-header-height-without-toolbar;
|
||||
max-height: $carded-header-height-without-toolbar;
|
||||
|
||||
@include media-breakpoint('sm') {
|
||||
height: $carded-header-height-without-toolbar-sm;
|
||||
min-height: $carded-header-height-without-toolbar-sm;
|
||||
max-height: $carded-header-height-without-toolbar-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.content-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: mat-color($background, background);
|
||||
overflow: hidden;
|
||||
background: mat-color($background, background);
|
||||
@include mat-elevation(7);
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: $card-toolbar-height;
|
||||
min-height: $card-toolbar-height;
|
||||
max-height: $card-toolbar-height;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
height: $carded-toolbar-height;
|
||||
min-height: $carded-toolbar-height;
|
||||
max-height: $carded-toolbar-height;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
background: mat-color($background, background);
|
||||
overflow: auto;
|
||||
background: mat-color($background, background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,9 +145,9 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
}
|
||||
|
||||
.header {
|
||||
height: $header-height;
|
||||
min-height: $header-height;
|
||||
max-height: $header-height;
|
||||
height: $carded-header-height;
|
||||
min-height: $carded-header-height;
|
||||
max-height: $carded-header-height;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -158,17 +173,17 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
|
||||
.header {
|
||||
display: flex;
|
||||
height: $card-header-height;
|
||||
min-height: $card-header-height;
|
||||
max-height: $card-header-height;
|
||||
height: $carded-header-height-without-toolbar;
|
||||
min-height: $carded-header-height-without-toolbar;
|
||||
max-height: $carded-header-height-without-toolbar;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: mat-color($background, background);
|
||||
overflow: hidden;
|
||||
background: mat-color($background, background);
|
||||
@include mat-elevation(7);
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -176,10 +191,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: $card-toolbar-height;
|
||||
min-height: $card-toolbar-height;
|
||||
max-height: $card-toolbar-height;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
height: $carded-toolbar-height;
|
||||
min-height: $carded-toolbar-height;
|
||||
max-height: $carded-toolbar-height;
|
||||
|
||||
.sidenav-toggle {
|
||||
margin: 0 8px 0 0 !important;
|
||||
|
|
@ -249,6 +264,16 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
// Simple layout
|
||||
&.simple {
|
||||
|
||||
// Top bg
|
||||
.top-bg {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $header-height;
|
||||
}
|
||||
|
||||
// Fullwidth
|
||||
&.fullwidth,
|
||||
&.inner-sidenav {
|
||||
|
|
@ -279,6 +304,33 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
}
|
||||
}
|
||||
|
||||
// Inner Sidenav
|
||||
&.inner-sidenav {
|
||||
|
||||
> md-sidenav-container {
|
||||
|
||||
.sidenav {
|
||||
|
||||
&.md-is-locked-open {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-sidenav-content {
|
||||
display: flex;
|
||||
height: auto;
|
||||
|
||||
.center {
|
||||
@include mat-elevation(0);
|
||||
|
||||
.content {
|
||||
@include mat-elevation(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> md-sidenav-container {
|
||||
display: flex;
|
||||
background: none;
|
||||
|
|
@ -309,6 +361,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|||
}
|
||||
|
||||
.mat-sidenav-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="center">
|
||||
|
||||
<!-- CONTENT HEADER -->
|
||||
<div class="header md-accent-bg p-24">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
<h2>Fullwidth with page scroll</h2>
|
||||
</div>
|
||||
<!-- / CONTENT HEADER -->
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="center">
|
||||
|
||||
<!-- CONTENT HEADER -->
|
||||
<div class="header md-accent-bg p-24">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
<h2>Fullwidth with content scroll</h2>
|
||||
</div>
|
||||
<!-- / CONTENT HEADER -->
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@
|
|||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfect-scrollbar>
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
</div>
|
||||
<!-- / SIDENAV CONTENT -->
|
||||
|
||||
|
|
|
|||
|
|
@ -11,11 +11,12 @@ import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sid
|
|||
import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
|
||||
import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
|
||||
import { SimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component';
|
||||
import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
|
||||
import { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component';
|
||||
import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component';
|
||||
import { SimpleRightSidenav3Component } from './simple/right-sidenav-3/right-sidenav-3.component';
|
||||
import { TabbedComponent } from './simple/tabbed/tabbed.component';
|
||||
import { BlankComponent } from './blank/blank.component';
|
||||
import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
@ -66,10 +67,10 @@ const routes: Routes = [
|
|||
path : 'ui/page-layouts/simple/right-sidenav-2',
|
||||
component: SimpleRightSidenav2Component
|
||||
},
|
||||
/*{
|
||||
{
|
||||
path : 'ui/page-layouts/simple/right-sidenav-3',
|
||||
component: SimpleRightSidenav3Component
|
||||
},*/
|
||||
},
|
||||
{
|
||||
path : 'ui/page-layouts/simple/tabbed',
|
||||
component: TabbedComponent
|
||||
|
|
@ -99,6 +100,7 @@ const routes: Routes = [
|
|||
SimpleLeftSidenav3Component,
|
||||
SimpleRightSidenavComponent,
|
||||
SimpleRightSidenav2Component,
|
||||
SimpleRightSidenav3Component,
|
||||
TabbedComponent,
|
||||
BlankComponent
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="page-layout simple fullwidth">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
<h2>Fullwidth</h2>
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="center" fxFlex perfect-scrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-left-sidenav-2"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-left-sidenav"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<md-sidenav-container>
|
||||
|
||||
<!-- SIDENAV -->
|
||||
<md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
|
||||
<md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<!-- / SIDENAV -->
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center">
|
||||
<div class="center p-24">
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfect-scrollbar>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="center" fxFlex perfect-scrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-left-sidenav"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="center" fxFlex perfect-scrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-right-sidenav-2"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="page-layout simple right-sidenav inner-sidenav" fxLayout="column">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-left-sidenav"
|
||||
fxHide.gt-md>
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<h2>Right inner sidenav with content scroll</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / HEADER -->
|
||||
|
||||
<md-sidenav-container>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="center p-24">
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content p-24" perfect-scrollbar>
|
||||
|
||||
<fuse-demo-content></fuse-demo-content>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
||||
</div>
|
||||
<!-- / CENTER -->
|
||||
|
||||
<!-- SIDENAV -->
|
||||
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
|
||||
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
|
||||
|
||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||
|
||||
</md-sidenav>
|
||||
<!-- / SIDENAV -->
|
||||
|
||||
</md-sidenav-container>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-simple-right-sidenav-3',
|
||||
templateUrl: './right-sidenav-3.component.html',
|
||||
styleUrls : ['./right-sidenav-3.component.scss']
|
||||
})
|
||||
export class SimpleRightSidenav3Component
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="center" fxFlex perfect-scrollbar>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header md-accent-bg p-24" fxLayout="row">
|
||||
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="simple-right-sidenav"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user