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

Fixes #9: print styles and page breaks

Browse Source
This commit is contained in:
Sercan Yemen 2017-09-29 12:06:47 +03:00
parent f800dc3286
commit 04d1b2eff8
3 changed files with 100 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/core/scss/partials/_print.scss
View File

@ -4,8 +4,9 @@
@media all {
/* Never show page break in normal view */
.page-break {
/* Never show page breaks in normal view */
.page-break-after,
.page-break-before {
display: none;
}
@ -13,22 +14,30 @@
@media print {
/* Page Styles */
@page {
//margin: 0.5cm;
/* html and body tweaks */
html, body {
height: auto !important;
overflow: initial !important;
}
/* Page break */
.page-break {
/* Page breaks */
.page-break-after {
display: block;
break-after: always;
page-break-after: always;
position: relative;
}
.page-break-before {
display: block;
page-break-before: always;
position: relative;
}
/* General styles */
fuse-root {
fuse-navbar,
fuse-navbar-vertical,
fuse-navbar-horizontal,
fuse-toolbar,
fuse-footer,
fuse-quick-panel,
@ -41,11 +50,16 @@
.ps {
overflow: visible !important;
}
}
/* Printable page specific styles */
.printable {
overflow: visible !important;
height: auto !important;
.mat-drawer-container,
.mat-sidenav-container {
background-color: white !important;
.mat-drawer-content,
.mat-sidenav-content {
overflow: initial !important;
height: auto !important
}
}
}
}

40
src/app/main/content/pages/invoices/compact/compact.component.html
View File

@ -136,12 +136,44 @@
</div>
</div>
</div>
<!--
Use the following elements to add breaks to your pages. This will make sure that the section in between
these elements will be printed on a new page. The following two elements must be used before and after the
page content that you want to show as a new page. So, you have to wrap your content with them.
Elements:
---------
<div class="page-break-after"></div>
<div class="page-break-before"></div>
-->
<!--
Example:
--------
Initial page content!
<div class="page-break-after"></div>
<div class="page-break-before"></div>
This is the second page!
<div class="page-break-after"></div>
<div class="page-break-before"></div>
This is the third page!
<div class="page-break-after"></div>
<div class="page-break-before"></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>

40
src/app/main/content/pages/invoices/modern/modern.component.html
View File

@ -158,13 +158,45 @@
</div>
</div>
</div>
<!--
Use the following elements to add breaks to your pages. This will make sure that the section in between
these elements will be printed on a new page. The following two elements must be used before and after the
page content that you want to show as a new page. So, you have to wrap your content with them.
Elements:
---------
<div class="page-break-after"></div>
<div class="page-break-before"></div>
-->
<!--
Example:
--------
Initial page content!
<div class="page-break-after"></div>
<div class="page-break-before"></div>
This is the second page!
<div class="page-break-after"></div>
<div class="page-break-before"></div>
This is the third page!
<div class="page-break-after"></div>
<div class="page-break-before"></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>