mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Merge remote-tracking branch 'origin/master'
# Conflicts: # src/app/fuse-fake-db/fuse-fake-db.service.ts
This commit is contained in:
mustafahlvc
commit
4d477561b7
|
|
@ -139,12 +139,12 @@ export class FuseNavigation
|
||||||
{
|
{
|
||||||
'title': 'Modern',
|
'title': 'Modern',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/pages/invoice/modern'
|
'url' : '/pages/invoices/modern'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Classic',
|
'title': 'Compact',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/pages/invoice/classic'
|
'url' : '/pages/invoices/compact'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -327,6 +327,11 @@ export class FuseNavigation
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/ui/page-layouts/simple/right-sidenav-2'
|
'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',
|
'title': 'Tabbed',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,26 @@
|
||||||
.#{$abbrev}-#{$size} {
|
.#{$abbrev}-#{$size} {
|
||||||
#{$prop}: $length !important;
|
#{$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} {
|
.#{$abbrev}t-#{$size} {
|
||||||
#{$prop}-top: $length !important;
|
#{$prop}-top: $length !important;
|
||||||
|
|
@ -53,16 +73,6 @@
|
||||||
.#{$abbrev}l-#{$size} {
|
.#{$abbrev}l-#{$size} {
|
||||||
#{$prop}-left: $length !important;
|
#{$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
|
// Page Layouts
|
||||||
$header-height: 200px;
|
$carded-header-height: 200px !default;
|
||||||
$header-height-sm: 160px;
|
$carded-header-height-sm: 160px !default;
|
||||||
|
$carded-toolbar-height: 64px !default;
|
||||||
|
|
||||||
$card-toolbar-height: 64px;
|
$header-height: 120px !default;
|
||||||
$card-header-height: $header-height - $card-toolbar-height;
|
$header-height-sm: 100px !default;
|
||||||
$card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
|
||||||
|
// 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 {
|
.page-layout {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Carded layout
|
||||||
|
|
||||||
|
&.carded {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
// Top bg
|
// Top bg
|
||||||
.top-bg {
|
.top-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -17,17 +31,12 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: $header-height;
|
height: $carded-header-height;
|
||||||
}
|
|
||||||
|
|
||||||
// Carded layout
|
@include media-breakpoint('sm') {
|
||||||
&.carded {
|
height: $carded-header-height-sm;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: row;
|
}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
// Fullwidth
|
// Fullwidth
|
||||||
&.fullwidth {
|
&.fullwidth {
|
||||||
|
|
@ -58,34 +67,40 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
margin-right: 32px;
|
margin-right: 32px;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: $card-header-height;
|
height: $carded-header-height-without-toolbar;
|
||||||
min-height: $card-header-height;
|
min-height: $carded-header-height-without-toolbar;
|
||||||
max-height: $card-header-height;
|
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 {
|
.content-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: mat-color($background, background);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: mat-color($background, background);
|
||||||
@include mat-elevation(7);
|
@include mat-elevation(7);
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
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);
|
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 {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: mat-color($background, background);
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
background: mat-color($background, background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -130,9 +145,9 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: $header-height;
|
height: $carded-header-height;
|
||||||
min-height: $header-height;
|
min-height: $carded-header-height;
|
||||||
max-height: $header-height;
|
max-height: $carded-header-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
@ -158,17 +173,17 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $card-header-height;
|
height: $carded-header-height-without-toolbar;
|
||||||
min-height: $card-header-height;
|
min-height: $carded-header-height-without-toolbar;
|
||||||
max-height: $card-header-height;
|
max-height: $carded-header-height-without-toolbar;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-card {
|
.content-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: mat-color($background, background);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: mat-color($background, background);
|
||||||
@include mat-elevation(7);
|
@include mat-elevation(7);
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
|
|
@ -176,10 +191,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
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);
|
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 {
|
.sidenav-toggle {
|
||||||
margin: 0 8px 0 0 !important;
|
margin: 0 8px 0 0 !important;
|
||||||
|
|
@ -249,6 +264,16 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
// Simple layout
|
// Simple layout
|
||||||
&.simple {
|
&.simple {
|
||||||
|
|
||||||
|
// Top bg
|
||||||
|
.top-bg {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: $header-height;
|
||||||
|
}
|
||||||
|
|
||||||
// Fullwidth
|
// Fullwidth
|
||||||
&.fullwidth,
|
&.fullwidth,
|
||||||
&.inner-sidenav {
|
&.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 {
|
> md-sidenav-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
@ -309,6 +361,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-sidenav-content {
|
.mat-sidenav-content {
|
||||||
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import { CalendarFakeDb } from './calendar';
|
||||||
import { TodoFakeDb } from './todo';
|
import { TodoFakeDb } from './todo';
|
||||||
import { ProfileFakeDb } from './profile';
|
import { ProfileFakeDb } from './profile';
|
||||||
import { ContactsFakeDb } from './contacts';
|
import { ContactsFakeDb } from './contacts';
|
||||||
|
import { InvoiceFakeDb } from './invoice';
|
||||||
import { FileManagerFakeDb } from './file-manager';
|
import { FileManagerFakeDb } from './file-manager';
|
||||||
|
|
||||||
export class FuseFakeDbService implements InMemoryDbService
|
export class FuseFakeDbService implements InMemoryDbService
|
||||||
|
|
@ -28,6 +29,7 @@ export class FuseFakeDbService implements InMemoryDbService
|
||||||
'profile-photos-videos': ProfileFakeDb.photosVideos,
|
'profile-photos-videos': ProfileFakeDb.photosVideos,
|
||||||
'profile-about' : ProfileFakeDb.about,
|
'profile-about' : ProfileFakeDb.about,
|
||||||
'contacts' : ContactsFakeDb.contacts,
|
'contacts' : ContactsFakeDb.contacts,
|
||||||
|
'invoice' : InvoiceFakeDb.invoice,
|
||||||
'file-manager' : FileManagerFakeDb.files
|
'file-manager' : FileManagerFakeDb.files
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
59
src/app/fuse-fake-db/invoice.ts
Normal file
59
src/app/fuse-fake-db/invoice.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
export class InvoiceFakeDb
|
||||||
|
{
|
||||||
|
public static invoice = {
|
||||||
|
'from' : {
|
||||||
|
'title' : 'Fuse Inc.',
|
||||||
|
'address': '2810 Country Club Road Cranford, NJ 07016',
|
||||||
|
'phone' : '+66 123 455 87',
|
||||||
|
'email' : 'hello@fuseinc.com',
|
||||||
|
'website': 'www.fuseinc.com'
|
||||||
|
},
|
||||||
|
'client' : {
|
||||||
|
'title' : 'John Doe',
|
||||||
|
'address': '9301 Wood Street Philadelphia, PA 19111',
|
||||||
|
'phone' : '+55 552 455 87',
|
||||||
|
'email' : 'johndoe@mail.com'
|
||||||
|
},
|
||||||
|
'number' : 'P9-0004',
|
||||||
|
'date' : 'Jul 19, 2015',
|
||||||
|
'dueDate' : 'Aug 24, 2015',
|
||||||
|
'services': [
|
||||||
|
{
|
||||||
|
'title' : 'Prototype & Design',
|
||||||
|
'detail' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan, quam sed eleifend imperdiet.',
|
||||||
|
'unit' : 'Hour',
|
||||||
|
'unitPrice': '12.00',
|
||||||
|
'quantity' : '240',
|
||||||
|
'total' : '2880'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'title' : 'Coding',
|
||||||
|
'detail' : 'Vestibulum ligula sem, rutrum et libero id, porta vehicula metus. Cras dapibus neque sit amet laoreet vestibulum.',
|
||||||
|
'unit' : 'Hour',
|
||||||
|
'unitPrice': '10.50',
|
||||||
|
'quantity' : '350',
|
||||||
|
'total' : '3675'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'title' : 'Testing',
|
||||||
|
'detail' : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
|
||||||
|
'unit' : 'Hour',
|
||||||
|
'unitPrice': '4.00',
|
||||||
|
'quantity' : '50',
|
||||||
|
'total' : '200'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'title' : 'Documentation & Training',
|
||||||
|
'detail' : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
|
||||||
|
'unit' : 'Hour',
|
||||||
|
'unitPrice': '6.50',
|
||||||
|
'quantity' : '260',
|
||||||
|
'total' : '1690'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'subtotal': '8445',
|
||||||
|
'tax' : '675.60',
|
||||||
|
'discount': '120.60',
|
||||||
|
'total' : '9000'
|
||||||
|
};
|
||||||
|
}
|
||||||
147
src/app/main/pages/invoices/compact/compact.component.html
Normal file
147
src/app/main/pages/invoices/compact/compact.component.html
Normal file
|
|
@ -0,0 +1,147 @@
|
||||||
|
<div id="invoice" class="compact page-layout blank" fxLayout="row" perfect-scrollbar>
|
||||||
|
|
||||||
|
<div class="invoice-container">
|
||||||
|
|
||||||
|
<!-- INVOICE -->
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div class="invoice-date">{{invoice.date}}</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" fxLayoutAlign="space-between stretch">
|
||||||
|
<div class="client">
|
||||||
|
<div class="invoice-number" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<span class="title">INVOICE</span>
|
||||||
|
<span class="number">{{invoice.number}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="due-date" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<span class="title">DUE DATE</span>
|
||||||
|
<span class="date">{{invoice.dueDate}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">{{invoice.client.title}}</div>
|
||||||
|
<div *ngIf="invoice?.client.address" class="address">{{invoice.client.address}}</div>
|
||||||
|
<div *ngIf="invoice?.client.phone" class="phone">{{invoice.client.phone}}</div>
|
||||||
|
<div *ngIf="invoice?.client.email" class="email">{{invoice.client.email}}</div>
|
||||||
|
<div *ngIf="invoice?.client.website" class="website">{{invoice.client.website}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="logo" fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
<span>F</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">{{invoice.from.title}}</div>
|
||||||
|
<div *ngIf="invoice?.from.address" class="address">{{invoice.from.address}}</div>
|
||||||
|
<div *ngIf="invoice?.from.phone" class="phone">{{invoice.from.phone}}</div>
|
||||||
|
<div *ngIf="invoice?.from.email" class="email">{{invoice.from.email}}</div>
|
||||||
|
<div *ngIf="invoice?.from.website" class="website">{{invoice.from.website}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<table class="simple invoice-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>SERVICE</th>
|
||||||
|
<th>UNIT</th>
|
||||||
|
<th class="text-right">UNIT PRICE</th>
|
||||||
|
<th class="text-right">QUANTITY</th>
|
||||||
|
<th class="text-right">TOTAL</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let service of invoice.services">
|
||||||
|
<td>
|
||||||
|
<div class="title">
|
||||||
|
{{service.title}}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{service.unit}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.unitPrice | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.quantity}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.total | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Double the invoice data for demo purposes -->
|
||||||
|
<tr *ngFor="let service of invoice.services">
|
||||||
|
<td>
|
||||||
|
<div class="title">
|
||||||
|
{{service.title}}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{service.unit}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.unitPrice | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.quantity}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.total | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table class="simple invoice-table-footer">
|
||||||
|
<tbody>
|
||||||
|
<tr class="subtotal">
|
||||||
|
<td>SUBTOTAL</td>
|
||||||
|
<td>{{invoice.subtotal | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tax">
|
||||||
|
<td>TAX</td>
|
||||||
|
<td>{{invoice.tax | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="discount">
|
||||||
|
<td>DISCOUNT</td>
|
||||||
|
<td>-{{invoice.discount | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="total">
|
||||||
|
<td>TOTAL</td>
|
||||||
|
<td>{{invoice.total | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="note">Please pay within 15 days. Thank you for your business.</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start start">
|
||||||
|
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
<div>F</div>
|
||||||
|
</div>
|
||||||
|
<div class="small-note">
|
||||||
|
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
|
||||||
|
scelerisque lacus sed feugiat fermentum. Cras aliquet facilisis pellentesque. Nunc hendrerit
|
||||||
|
quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia.
|
||||||
|
Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero
|
||||||
|
tincidunt lacinia et eget eros.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / INVOICE -->
|
||||||
|
|
||||||
|
<!-- Use the following element to add breaks to your pages -->
|
||||||
|
<!-- This will make sure that the section after this element will be printed on a new page -->
|
||||||
|
<div class="page-break"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
358
src/app/main/pages/invoices/compact/compact.component.scss
Normal file
358
src/app/main/pages/invoices/compact/compact.component.scss
Normal file
|
|
@ -0,0 +1,358 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 64px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 1020px;
|
||||||
|
min-width: 1020px;
|
||||||
|
max-width: 1020px;
|
||||||
|
padding: 64px 88px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #FFFFFF;
|
||||||
|
@include mat-elevation(7);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
|
||||||
|
.invoice-number {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.due-date {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
margin-right: -88px;
|
||||||
|
padding-right: 66px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
font-size: 72px;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 64px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 32px 0 72px 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 24px 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE10 fix
|
||||||
|
.logo, .small-note {
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 24px;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRINT STYLES */
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
/* Invoice Specific Styles */
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.invoice-date {
|
||||||
|
margin-bottom: 16pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.issuer {
|
||||||
|
padding-right: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 16pt;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 10pt;
|
||||||
|
max-width: 60pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 4pt;
|
||||||
|
font-size: 9pt;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 16pt 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: 13pt;
|
||||||
|
padding: 4pt 4pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 16pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 16pt 4pt 0 4pt;
|
||||||
|
font-size: 16pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-bottom: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 14pt;
|
||||||
|
margin-right: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 8pt;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/main/pages/invoices/compact/compact.component.ts
Normal file
21
src/app/main/pages/invoices/compact/compact.component.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { InvoiceService } from '../invoice.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-invoice-compact',
|
||||||
|
templateUrl: './compact.component.html',
|
||||||
|
styleUrls : ['./compact.component.scss']
|
||||||
|
})
|
||||||
|
export class InvoiceCompactComponent
|
||||||
|
{
|
||||||
|
invoice: any;
|
||||||
|
|
||||||
|
constructor(private invoiceService: InvoiceService)
|
||||||
|
{
|
||||||
|
this.invoiceService.invoiceOnChanged
|
||||||
|
.subscribe((invoice) => {
|
||||||
|
this.invoice = invoice;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
53
src/app/main/pages/invoices/invoice.service.ts
Normal file
53
src/app/main/pages/invoices/invoice.service.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
import { Http } from '@angular/http';
|
||||||
|
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class InvoiceService implements Resolve<any>
|
||||||
|
{
|
||||||
|
invoice: any;
|
||||||
|
|
||||||
|
invoiceOnChanged: BehaviorSubject<any> = new BehaviorSubject({});
|
||||||
|
|
||||||
|
constructor(private http: Http)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resolve
|
||||||
|
* @param {ActivatedRouteSnapshot} route
|
||||||
|
* @param {RouterStateSnapshot} state
|
||||||
|
* @returns {Observable<any> | Promise<any> | any}
|
||||||
|
*/
|
||||||
|
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Promise.all([
|
||||||
|
this.getInvoice()
|
||||||
|
]).then(
|
||||||
|
() => {
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
reject
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get invoice
|
||||||
|
*/
|
||||||
|
getInvoice(): Promise<any[]>
|
||||||
|
{
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
|
||||||
|
this.http.get('api/invoice')
|
||||||
|
.subscribe(timeline => {
|
||||||
|
this.invoice = timeline.json().data;
|
||||||
|
this.invoiceOnChanged.next(this.invoice);
|
||||||
|
resolve(this.invoice);
|
||||||
|
}, reject);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
169
src/app/main/pages/invoices/modern/modern.component.html
Normal file
169
src/app/main/pages/invoices/modern/modern.component.html
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
<div id="invoice" class="modern page-layout blank" fxLayout="row" perfect-scrollbar>
|
||||||
|
|
||||||
|
<div class="invoice-container">
|
||||||
|
|
||||||
|
<!-- INVOICE -->
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
<div class="header" fxLayout="row" fxLayoutAlign="space-between start">
|
||||||
|
|
||||||
|
<div class="ids" fxLayout="column">
|
||||||
|
|
||||||
|
<div fxLayout="row" class="seller" fxLayoutAlign="start center">
|
||||||
|
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
<div>F</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
<div class="title">{{invoice.from.title}}</div>
|
||||||
|
<div *ngIf="invoice?.from.address" class="address">
|
||||||
|
{{invoice.from.address}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.from.phone" class="phone">
|
||||||
|
<span>Phone:</span>
|
||||||
|
{{invoice.from.phone}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.from.email" class="email">
|
||||||
|
<span>Email:</span>
|
||||||
|
{{invoice.from.email}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.from.website" class="website">
|
||||||
|
<span>Web:</span>
|
||||||
|
{{invoice.from.website}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div fxLayout="row" class="client" fxLayoutAlign="start center">
|
||||||
|
<div class="label" fxLayout="row" fxLayoutAlign="end center">
|
||||||
|
<div>CLIENT</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
<div class="title">{{invoice.client.title}}</div>
|
||||||
|
<div *ngIf="invoice?.client.address" class="address">
|
||||||
|
{{invoice.client.address}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.client.phone" class="phone">
|
||||||
|
<span>Phone:</span>
|
||||||
|
{{invoice.client.phone}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.client.email" class="email">
|
||||||
|
<span>Email:</span>
|
||||||
|
{{invoice.client.email}}
|
||||||
|
</div>
|
||||||
|
<div *ngIf="invoice?.client.website" class="website">
|
||||||
|
<span>Web:</span>
|
||||||
|
{{invoice.client.website}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="summary">
|
||||||
|
<tr class="code">
|
||||||
|
<td class="label">INVOICE</td>
|
||||||
|
<td class="value">{{invoice.number}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="label">INVOICE DATE</td>
|
||||||
|
<td class="value">{{invoice.date}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="label">DUE DATE</td>
|
||||||
|
<td class="value">{{invoice.dueDate}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="label">TOTAL DUE</td>
|
||||||
|
<td class="value">{{invoice.total | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<table class="simple invoice-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>SERVICE</th>
|
||||||
|
<th>UNIT</th>
|
||||||
|
<th class="text-right">UNIT PRICE</th>
|
||||||
|
<th class="text-right">QUANTITY</th>
|
||||||
|
<th class="text-right">TOTAL</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let service of invoice.services">
|
||||||
|
<td>
|
||||||
|
<div class="title">{{service.title}}</div>
|
||||||
|
<div class="detail">{{service.detail}}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{service.unit}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.unitPrice | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.quantity}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
{{service.total | currency:'USD':true}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table class="simple invoice-table-footer">
|
||||||
|
<tbody>
|
||||||
|
<tr class="subtotal">
|
||||||
|
<td>SUBTOTAL</td>
|
||||||
|
<td>{{invoice.subtotal | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tax">
|
||||||
|
<td>TAX</td>
|
||||||
|
<td>{{invoice.tax | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="discount">
|
||||||
|
<td>DISCOUNT</td>
|
||||||
|
<td>-{{invoice.discount | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="total">
|
||||||
|
<td>TOTAL</td>
|
||||||
|
<td>{{invoice.total | currency:'USD':true}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="note">Please pay within 15 days. Thank you for your business.</div>
|
||||||
|
<div fxLayout="row" fxLayoutAlign="start start">
|
||||||
|
<div class="logo md-accent-bg" fxLayout="row" fxLayoutAlign="center center">
|
||||||
|
<div>F</div>
|
||||||
|
</div>
|
||||||
|
<div class="small-note">
|
||||||
|
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
|
||||||
|
scelerisque lacus sed feugiat fermentum. Cras aliquet facilisis pellentesque. Nunc hendrerit
|
||||||
|
quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia.
|
||||||
|
Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero
|
||||||
|
tincidunt lacinia et eget eros.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / INVOICE -->
|
||||||
|
|
||||||
|
<!-- Use the following element to add breaks to your pages -->
|
||||||
|
<!-- This will make sure that the section after this element will be printed on a new page -->
|
||||||
|
<div class="page-break"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
359
src/app/main/pages/invoices/modern/modern.component.scss
Normal file
359
src/app/main/pages/invoices/modern/modern.component.scss
Normal file
|
|
@ -0,0 +1,359 @@
|
||||||
|
@import "src/app/core/scss/fuse";
|
||||||
|
|
||||||
|
:host {
|
||||||
|
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.modern {
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 64px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 1020px;
|
||||||
|
min-width: 1020px;
|
||||||
|
max-width: 1020px;
|
||||||
|
padding: 88px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #FFFFFF;
|
||||||
|
@include mat-elevation(7);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.ids {
|
||||||
|
line-height: 22px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seller {
|
||||||
|
margin-bottom: 80px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 156px;
|
||||||
|
height: 156px;
|
||||||
|
font-size: 115px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 156px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
margin: 0 48px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.12);
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 96px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 32px 0 96px 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 8px 8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 32px 8px;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE10 fix
|
||||||
|
.logo, .small-note {
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 32px;
|
||||||
|
min-width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 24px;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRINT STYLES */
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
/* Invoice Specific Styles */
|
||||||
|
#invoice {
|
||||||
|
|
||||||
|
&.modern {
|
||||||
|
|
||||||
|
.invoice-container {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.ids {
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
width: 120pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seller {
|
||||||
|
margin-bottom: 8pt;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 60pt;
|
||||||
|
height: 60pt;
|
||||||
|
font-size: 40pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.client {
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 60pt;
|
||||||
|
font-size: 16pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 0 12pt;
|
||||||
|
height: 100pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
font-size: 10pt;
|
||||||
|
|
||||||
|
.code {
|
||||||
|
font-size: 18pt;
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 10pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.invoice-table {
|
||||||
|
margin-top: 16pt;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 10pt;
|
||||||
|
max-width: 60pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
margin-top: 4pt;
|
||||||
|
font-size: 9pt;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.invoice-table-footer {
|
||||||
|
margin: 16pt 0;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: 13pt;
|
||||||
|
padding: 4pt 4pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.discount {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding-bottom: 16pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.total {
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 16pt 4pt 0 4pt;
|
||||||
|
font-size: 16pt;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 10pt;
|
||||||
|
margin-bottom: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 14pt;
|
||||||
|
margin-right: 8pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-note {
|
||||||
|
font-size: 8pt;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/main/pages/invoices/modern/modern.component.ts
Normal file
21
src/app/main/pages/invoices/modern/modern.component.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { InvoiceService } from '../invoice.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-invoice-modern',
|
||||||
|
templateUrl: './modern.component.html',
|
||||||
|
styleUrls : ['./modern.component.scss']
|
||||||
|
})
|
||||||
|
export class InvoiceModernComponent
|
||||||
|
{
|
||||||
|
invoice: any;
|
||||||
|
|
||||||
|
constructor(private invoiceService: InvoiceService)
|
||||||
|
{
|
||||||
|
this.invoiceService.invoiceOnChanged
|
||||||
|
.subscribe((invoice) => {
|
||||||
|
this.invoice = invoice;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -12,10 +12,13 @@ import { LockComponent } from './authentication/lock/lock.component';
|
||||||
import { ComingSoonComponent } from './coming-soon/coming-soon.component';
|
import { ComingSoonComponent } from './coming-soon/coming-soon.component';
|
||||||
import { Error404Component } from './errors/404/error-404.component';
|
import { Error404Component } from './errors/404/error-404.component';
|
||||||
import { Error500Component } from './errors/500/error-500.component';
|
import { Error500Component } from './errors/500/error-500.component';
|
||||||
|
import { InvoiceModernComponent } from './invoices/modern/modern.component';
|
||||||
import { MaintenanceComponent } from './maintenance/maintenance.component';
|
import { MaintenanceComponent } from './maintenance/maintenance.component';
|
||||||
import { ProfileComponent } from './profile/profile.component';
|
import { ProfileComponent } from './profile/profile.component';
|
||||||
import { ProfileModule } from './profile/profile.module';
|
import { ProfileModule } from './profile/profile.module';
|
||||||
import { ProfileService } from './profile/profile.service';
|
import { ProfileService } from './profile/profile.service';
|
||||||
|
import { InvoiceCompactComponent } from './invoices/compact/compact.component';
|
||||||
|
import { InvoiceService } from './invoices/invoice.service';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -58,6 +61,20 @@ const routes = [
|
||||||
path : 'pages/errors/error-500',
|
path : 'pages/errors/error-500',
|
||||||
component: Error500Component
|
component: Error500Component
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path : 'pages/invoices/compact',
|
||||||
|
component: InvoiceCompactComponent,
|
||||||
|
resolve : {
|
||||||
|
invoice: InvoiceService
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path : 'pages/invoices/modern',
|
||||||
|
component: InvoiceModernComponent,
|
||||||
|
resolve : {
|
||||||
|
invoice: InvoiceService
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path : 'pages/maintenance',
|
path : 'pages/maintenance',
|
||||||
component: MaintenanceComponent
|
component: MaintenanceComponent
|
||||||
|
|
@ -88,9 +105,12 @@ const routes = [
|
||||||
ComingSoonComponent,
|
ComingSoonComponent,
|
||||||
Error404Component,
|
Error404Component,
|
||||||
Error500Component,
|
Error500Component,
|
||||||
|
InvoiceCompactComponent,
|
||||||
|
InvoiceModernComponent,
|
||||||
MaintenanceComponent
|
MaintenanceComponent
|
||||||
],
|
],
|
||||||
providers : [
|
providers : [
|
||||||
|
InvoiceService,
|
||||||
ProfileService
|
ProfileService
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="center">
|
<div class="center">
|
||||||
|
|
||||||
<!-- CONTENT HEADER -->
|
<!-- 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>
|
<h2>Fullwidth with page scroll</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / CONTENT HEADER -->
|
<!-- / CONTENT HEADER -->
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<div class="center">
|
<div class="center">
|
||||||
|
|
||||||
<!-- CONTENT HEADER -->
|
<!-- 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>
|
<h2>Fullwidth with content scroll</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / CONTENT HEADER -->
|
<!-- / CONTENT HEADER -->
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,9 @@
|
||||||
|
|
||||||
<!-- SIDENAV CONTENT -->
|
<!-- SIDENAV CONTENT -->
|
||||||
<div class="content p-24" perfect-scrollbar>
|
<div class="content p-24" perfect-scrollbar>
|
||||||
|
|
||||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV CONTENT -->
|
<!-- / SIDENAV CONTENT -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,12 @@ import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sid
|
||||||
import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
|
import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
|
||||||
import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
|
import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
|
||||||
import { SimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.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 { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component';
|
||||||
import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.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 { 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 = [
|
||||||
{
|
{
|
||||||
|
|
@ -66,10 +67,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',
|
path : 'ui/page-layouts/simple/right-sidenav-3',
|
||||||
component: SimpleRightSidenav3Component
|
component: SimpleRightSidenav3Component
|
||||||
},*/
|
},
|
||||||
{
|
{
|
||||||
path : 'ui/page-layouts/simple/tabbed',
|
path : 'ui/page-layouts/simple/tabbed',
|
||||||
component: TabbedComponent
|
component: TabbedComponent
|
||||||
|
|
@ -99,6 +100,7 @@ const routes: Routes = [
|
||||||
SimpleLeftSidenav3Component,
|
SimpleLeftSidenav3Component,
|
||||||
SimpleRightSidenavComponent,
|
SimpleRightSidenavComponent,
|
||||||
SimpleRightSidenav2Component,
|
SimpleRightSidenav2Component,
|
||||||
|
SimpleRightSidenav3Component,
|
||||||
TabbedComponent,
|
TabbedComponent,
|
||||||
BlankComponent
|
BlankComponent
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="page-layout simple fullwidth">
|
<div class="page-layout simple fullwidth">
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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>
|
<h2>Fullwidth</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / HEADER -->
|
<!-- / HEADER -->
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
<div class="center" fxFlex perfect-scrollbar>
|
<div class="center" fxFlex perfect-scrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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"
|
<button md-button class="mat-icon-button sidenav-toggle"
|
||||||
fuseMdSidenavToggler="simple-left-sidenav-2"
|
fuseMdSidenavToggler="simple-left-sidenav-2"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
|
<div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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"
|
<button md-button class="mat-icon-button sidenav-toggle"
|
||||||
fuseMdSidenavToggler="simple-left-sidenav"
|
fuseMdSidenavToggler="simple-left-sidenav"
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
<md-sidenav-container>
|
<md-sidenav-container>
|
||||||
|
|
||||||
<!-- SIDENAV -->
|
<!-- 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">
|
fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
|
||||||
|
|
||||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<!-- / SIDENAV -->
|
<!-- / SIDENAV -->
|
||||||
|
|
||||||
<!-- CENTER -->
|
<!-- CENTER -->
|
||||||
<div class="center">
|
<div class="center p-24">
|
||||||
|
|
||||||
<!-- CONTENT -->
|
<!-- CONTENT -->
|
||||||
<div class="content p-24" perfect-scrollbar>
|
<div class="content p-24" perfect-scrollbar>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
<div class="center" fxFlex perfect-scrollbar>
|
<div class="center" fxFlex perfect-scrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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"
|
<button md-button class="mat-icon-button sidenav-toggle"
|
||||||
fuseMdSidenavToggler="simple-left-sidenav"
|
fuseMdSidenavToggler="simple-left-sidenav"
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<div class="center" fxFlex perfect-scrollbar>
|
<div class="center" fxFlex perfect-scrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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"
|
<button md-button class="mat-icon-button sidenav-toggle"
|
||||||
fuseMdSidenavToggler="simple-right-sidenav-2"
|
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>
|
<div class="center" fxFlex perfect-scrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- 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"
|
<button md-button class="mat-icon-button sidenav-toggle"
|
||||||
fuseMdSidenavToggler="simple-right-sidenav"
|
fuseMdSidenavToggler="simple-right-sidenav"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user