Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-10-31 05:57:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5833 from beganovich/v5-2605-repeating-designs

Browse Source 
(v5) Improvements when using repeating designs
This commit is contained in:
Benjamin Beganović 2021-05-26 13:11:48 +02:00 committed by GitHub
commit e846ff3a9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 149 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
database/migrations/2021_05_20_115919_update_designs.php → database/migrations/2021_05_26_115919_update_designs.php
View File

123
resources/views/pdf-designs/bold.html
View File

@ -191,19 +191,6 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
table.page-container {
page-break-after: always;
min-width: 100%;
}
thead.page-header {
display: table-header-group;
}
tfoot.page-footer {
display: table-footer-group;
}
.footer-wrapper { .footer-wrapper {
margin-top: 1rem; margin-top: 1rem;
background-color: #2d2c2a; background-color: #2d2c2a;
@ -221,49 +208,51 @@
[data-ref="total_table-footer"] { [data-ref="total_table-footer"] {
padding-top: 0.5rem padding-top: 0.5rem
} }
/** Repeating header & footer styling. */
table {
width: 100%;
}
table.print-content {}
table.print-content th,
table.print-content td {
padding: .2rem .4rem;
text-align: left;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
@media print {
.print-footer {
position: fixed;
bottom: 0;
left: 0;
}
.no-print {
display: none
}
}
</style> </style>
<table class="page-container"> <table>
<thead class="page-header"> <!-- Start Header -->
<thead>
<tr> <tr>
<th class="page-header-cell"> <td>
<div class="header-wrapper" id="header"> <div class="header-wrapper" id="header">
<img class="company-logo" src="$company.logo" alt="$company.name logo"/> <img class="company-logo" src="$company.logo" alt="$company.name logo"/>
<div id="company-details"></div> <div id="company-details"></div>
<div id="company-address"></div> <div id="company-address"></div>
</div> </div>
</th>
</tr>
</thead>
<tfoot class="page-footer">
<tr>
<td class="page-footer-cell">
<div class="footer-wrapper" id="footer">
<div>
<p data-ref="total_table-footer">$entity_footer</p>
<script>
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => {
['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0
? document.getElementById(tableIdentifier).style.display = 'none'
: '';
});
});
</script>
</div>
<div> <!-- #2 column --> </div>
<div> <!-- #3 column --> </div>
</div>
</td> </td>
</tr> </tr>
</tfoot> </thead>
<!-- End Header -->
<tbody class="page-content">
<tr> <tr>
<td class="page-content-cell" id="body"> <td id="body">
<div class="client-entity-wrapper"> <div class="client-entity-wrapper">
<div class="client-wrapper-left-side"> <div class="client-wrapper-left-side">
<h4 class="entity-label">$entity_label</h4> <h4 class="entity-label">$entity_label</h4>
@ -277,14 +266,48 @@
</div> </div>
</div> </div>
<table id="product-table" cellspacing="0"></table> <!-- Start Print Content -->
<table id="product-table" cellspacing="0" class="print-content"></table>
<table id="task-table" cellspacing="0"></table> <table id="task-table" cellspacing="0" class="print-content"></table>
<table id="delivery-note-table" cellspacing="0"></table>
<table id="delivery-note-table" cellspacing="0" class="print-content"></table>
<!-- End Print Content -->
</td>
</tr>
<tr>
<td>
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0"></div>
</td> </td>
</tr> </tr>
</tbody> <!-- Start Space For Footer -->
<tfoot>
<tr>
<td style="height: 180px">
<!-- Leave this empty and don't remove it. This space is where footer placed on print. -->
</td>
</tr>
</tfoot>
<!-- End Space For Footer -->
</table> </table>
<!-- Start Footer -->
<div class="footer-wrapper print-footer" id="footer">
<div>
<p data-ref="total_table-footer">$entity_footer</p>
<script>
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => {
['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0
? document.getElementById(tableIdentifier).style.display = 'none'
: '';
});
});
</script>
</div>
<div> <!-- #2 column --> </div>
<div> <!-- #3 column --> </div>
</div>
<!-- End Footer -->

115
resources/views/pdf-designs/modern.html
View File

@ -227,51 +227,50 @@
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem margin-bottom: 2rem
} }
/** Repeating header & footer styling. */
table {
width: 100%;
}
table.print-content {}
table.print-content th,
table.print-content td {
padding: .2rem .4rem;
text-align: left;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
@media print {
.print-footer {
position: fixed;
bottom: 0;
left: 0;
}
.no-print {
display: none
}
}
</style> </style>
<table class="page-container"> <table>
<thead class="page-header"> <!-- Start Header -->
<thead>
<tr> <tr>
<th class="page-header-cell"> <td>
<div class="header-container" id="header"> <div class="header-container" id="header">
<h1 class="company-name">$company.name</h1> <h1 class="company-name">$company.name</h1>
<table id="entity-details" cellspacing="0"></table> <table id="entity-details" cellspacing="0"></table>
</div> </div>
</th>
</tr>
</thead>
<tfoot class="page-footer">
<tr>
<td class="page-footer-cell">
<div class="footer-info">
<div style="margin-top: 195px"></div>
<div class="footer-wrapper" id="footer">
<div class="footer-content">
<div>
<p data-ref="total_table-footer">$entity_footer</p>
<script>
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => {
['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0
? document.getElementById(tableIdentifier).style.display = 'none'
: '';
});
});
</script>
</div>
<div id="company-details"></div>
<div id="company-address"></div>
</div>
</div>
</div>
</td> </td>
</tr> </tr>
</tfoot> </thead>
<tbody class="page-content"> <!-- End Header -->
<tr> <tr>
<td class="page-content-cell" id="body"> <td id="body">
<div class="logo-client-wrapper"> <div class="logo-client-wrapper">
<img <img
class="company-logo" class="company-logo"
@ -282,14 +281,50 @@
<div id="client-details"></div> <div id="client-details"></div>
</div> </div>
<!-- Start Print Content -->
<div class="table-wrapper"> <div class="table-wrapper">
<table id="product-table" cellspacing="0"></table> <table id="product-table" cellspacing="0" class="print-content"></table>
<table id="task-table" cellspacing="0"></table> <table id="task-table" cellspacing="0" class="print-content"></table>
<table id="delivery-note-table" cellspacing="0"></table> <table id="delivery-note-table" cellspacing="0" class="print-content"></table>
</div> </div>
<!-- End Print Content -->
</td>
</tr>
<tr>
<td>
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0"></div>
</td> </td>
</tr> </tr>
</tbody> <!-- Start Space For Footer -->
<tfoot>
<tr>
<td style="height: 230px">
<!-- Leave this empty and don't remove it. This space is where footer placed on print -->
</td>
</tr>
</tfoot>
<!-- End Space For Footer -->
</table> </table>
<!-- Start Footer -->
<div class="footer-wrapper print-footer" id="footer">
<div class="footer-content">
<div>
<p data-ref="total_table-footer">$entity_footer</p>
<script>
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => {
['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0
? document.getElementById(tableIdentifier).style.display = 'none'
: '';
});
});
</script>
</div>
<div id="company-details"></div>
<div id="company-address"></div>
</div>
</div>
<!-- End Footer -->