Design updates

This commit is contained in:
Joshua Dwire 2021-10-05 19:35:13 -04:00
parent 91d90c87b3
commit 1cb8574dd8
2 changed files with 30 additions and 34 deletions

View File

@ -19,20 +19,23 @@
} }
@page { @page {
margin: 0 -5px !important; margin: 0 !important;
size: $page_size $page_layout; size: $page_size $page_layout;
} }
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
/* page-break-after: always; */
} }
#spacer-table > * > tr > td { #spacer-table > * > tr > td {
padding: 0; padding: 0;
} }
#spacer-table{
width: 100%;
}
#header { #header {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr 1fr; grid-template-columns: 1.5fr 1fr 1fr;
@ -44,12 +47,12 @@
top: 0; top: 0;
} }
#header, #header-spacer { #header, #header-spacer {
height: 160px; height: 160px;
padding: 3rem; padding: 3rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.company-logo { .company-logo {
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@ -108,7 +111,11 @@
table-layout: fixed; table-layout: fixed;
overflow-wrap: break-word; overflow-wrap: break-word;
margin-top: 3rem; margin-top: 3rem;
/* margin-bottom: 200px; */ margin-bottom: 200px;
}
[data-ref="table"]:last-child{
margin-bottom:0;
} }
.task-time-details { .task-time-details {
@ -307,7 +314,7 @@
<div id="company-address"></div> <div id="company-address"></div>
</div> </div>
<div id="body"> <div id="body">
<table id="spacer-table"> <table id="spacer-table" cellspacing="0" >
<thead> <thead>
<tr> <tr>
<td> <td>
@ -331,7 +338,6 @@
</div> </div>
</div> </div>
<!-- Start Print Content -->
<table id="product-table" cellspacing="0" data-ref="table"></table> <table id="product-table" cellspacing="0" data-ref="table"></table>
<table id="task-table" cellspacing="0" data-ref="table"></table> <table id="task-table" cellspacing="0" data-ref="table"></table>
@ -346,7 +352,6 @@
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table> <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
<div id="statement-aging-table-totals" data-ref="statement-totals"></div> <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
<!-- End Print Content -->
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0"></div>
</td> </td>
</tr> </tr>
@ -368,14 +373,13 @@
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present. // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
let tables = [ let tables = [
'product-table', 'task-table', 'delivery-note-table', 'product-table', 'task-table', 'delivery-note-table', 'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals', 'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
]; ];
tables.forEach((tableIdentifier) => { tables.forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0 const el =document.getElementById(tableIdentifier);
? document.getElementById(tableIdentifier).style.display = 'none' if(el && el.childElementCount === 0)el.remove()
: '';
}); });
}); });
</script> </script>

View File

@ -18,7 +18,7 @@
} }
@page { @page {
margin: 0 -5px !important; margin: 0 !important;
size: $page_size $page_layout; size: $page_size $page_layout;
} }
@ -27,6 +27,14 @@
padding: 0; padding: 0;
} }
#spacer-table > * > tr > td {
padding: 0;
}
#spacer-table{
width: 100%;
}
#header { #header {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: white;
@ -34,6 +42,7 @@
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
position:fixed; position:fixed;
top: 0; top: 0;
width: 100%;
} }
#header, #header-spacer { #header, #header-spacer {
@ -214,23 +223,6 @@
font-size: 1.3rem; font-size: 1.3rem;
} }
table.page-container {
page-break-after: always;
min-width: 100%;
}
thead.page-header {
display: table-header-group;
}
tfoot.page-footer {
display: table-footer-group;
}
.page-content-cell {
padding: 1rem;
}
[data-ref="total_table-footer"] { [data-ref="total_table-footer"] {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -305,7 +297,7 @@
<table id="entity-details" cellspacing="0" dir="$dir"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>
<div id="body"> <div id="body">
<table id="spacer-table"> <table id="spacer-table" cellspacing="0">
<thead> <thead>
<tr> <tr>
<td> <td>
@ -359,13 +351,13 @@
// Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present. // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
let tables = [ let tables = [
'product-table', 'task-table', 'delivery-note-table', 'product-table', 'task-table', 'delivery-note-table', 'statement-invoice-table-totals', 'statement-payment-table-totals','statement-invoice-table-totals',
'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals', 'statement-invoice-table', 'statement-payment-table', 'statement-aging-table', 'statement-aging-table-totals', 'statement-payment-table-totals'
]; ];
tables.forEach((tableIdentifier) => { tables.forEach((tableIdentifier) => {
document.getElementById(tableIdentifier).childElementCount === 0 document.getElementById(tableIdentifier).childElementCount === 0
? document.getElementById(tableIdentifier).style.display = 'none' ? document.getElementById(tableIdentifier).remove()
: ''; : '';
}); });
}); });