mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-10-31 08:37:33 -04:00
Merge pull request #5833 from beganovich/v5-2605-repeating-designs
(v5) Improvements when using repeating designs
This commit is contained in:
Benjamin Beganović
GitHub
commit
e846ff3a9c
@ -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,25 +208,91 @@
|
|||||||
[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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
<!-- End Header -->
|
||||||
<tfoot class="page-footer">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="page-footer-cell">
|
<td id="body">
|
||||||
<div class="footer-wrapper" id="footer">
|
<div class="client-entity-wrapper">
|
||||||
|
<div class="client-wrapper-left-side">
|
||||||
|
<h4 class="entity-label">$entity_label</h4>
|
||||||
|
<div id="client-details" cellspacing="0"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="entity-details-wrapper-right-side">
|
||||||
|
<div class="entity-details-wrapper">
|
||||||
|
<table id="entity-details"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Start Print Content -->
|
||||||
|
<table id="product-table" cellspacing="0" class="print-content"></table>
|
||||||
|
|
||||||
|
<table id="task-table" cellspacing="0" class="print-content"></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>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- Start Footer -->
|
||||||
|
<div class="footer-wrapper print-footer" id="footer">
|
||||||
<div>
|
<div>
|
||||||
<p data-ref="total_table-footer">$entity_footer</p>
|
<p data-ref="total_table-footer">$entity_footer</p>
|
||||||
|
|
||||||
@ -256,35 +309,5 @@
|
|||||||
</div>
|
</div>
|
||||||
<div> <!-- #2 column --> </div>
|
<div> <!-- #2 column --> </div>
|
||||||
<div> <!-- #3 column --> </div>
|
<div> <!-- #3 column --> </div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<!-- End Footer -->
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
|
|
||||||
<tbody class="page-content">
|
|
||||||
<tr>
|
|
||||||
<td class="page-content-cell" id="body">
|
|
||||||
<div class="client-entity-wrapper">
|
|
||||||
<div class="client-wrapper-left-side">
|
|
||||||
<h4 class="entity-label">$entity_label</h4>
|
|
||||||
<div id="client-details" cellspacing="0"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="entity-details-wrapper-right-side">
|
|
||||||
<div class="entity-details-wrapper">
|
|
||||||
<table id="entity-details"></table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table id="product-table" cellspacing="0"></table>
|
|
||||||
|
|
||||||
<table id="task-table" cellspacing="0"></table>
|
|
||||||
|
|
||||||
<table id="delivery-note-table" cellspacing="0"></table>
|
|
||||||
|
|
||||||
<div id="table-totals" cellspacing="0"></div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|||||||
@ -227,25 +227,87 @@
|
|||||||
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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tfoot class="page-footer">
|
<!-- End Header -->
|
||||||
<tr>
|
<tr>
|
||||||
<td class="page-footer-cell">
|
<td id="body">
|
||||||
<div class="footer-info">
|
<div class="logo-client-wrapper">
|
||||||
<div style="margin-top: 195px"></div>
|
<img
|
||||||
<div class="footer-wrapper" id="footer">
|
class="company-logo"
|
||||||
|
src="$company.logo"
|
||||||
|
alt="$company.name logo"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div id="client-details"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Start Print Content -->
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table id="product-table" cellspacing="0" class="print-content"></table>
|
||||||
|
<table id="task-table" cellspacing="0" class="print-content"></table>
|
||||||
|
<table id="delivery-note-table" cellspacing="0" class="print-content"></table>
|
||||||
|
</div>
|
||||||
|
<!-- End Print Content -->
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div id="table-totals" cellspacing="0"></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- Start Footer -->
|
||||||
|
<div class="footer-wrapper print-footer" id="footer">
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<div>
|
<div>
|
||||||
<p data-ref="total_table-footer">$entity_footer</p>
|
<p data-ref="total_table-footer">$entity_footer</p>
|
||||||
@ -264,32 +326,5 @@
|
|||||||
<div id="company-details"></div>
|
<div id="company-details"></div>
|
||||||
<div id="company-address"></div>
|
<div id="company-address"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- End Footer -->
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
<tbody class="page-content">
|
|
||||||
<tr>
|
|
||||||
<td class="page-content-cell" id="body">
|
|
||||||
<div class="logo-client-wrapper">
|
|
||||||
<img
|
|
||||||
class="company-logo"
|
|
||||||
src="$company.logo"
|
|
||||||
alt="$company.name logo"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div id="client-details"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="table-wrapper">
|
|
||||||
<table id="product-table" cellspacing="0"></table>
|
|
||||||
<table id="task-table" cellspacing="0"></table>
|
|
||||||
<table id="delivery-note-table" cellspacing="0"></table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="table-totals" cellspacing="0"></div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user