Refactor calm design
This commit is contained in:
David Bomba
parent
3541bec23b
commit
4e11d6a438
|
|
@ -96,7 +96,8 @@ class PdfBuilder
|
|||
$el = $this->document->getElementById($element);
|
||||
|
||||
if ($el && $el->childElementCount === 0) {
|
||||
$el->setAttribute('style', 'display: none !important;');
|
||||
$el->parentNode->removeChild($el); // This removes the element completely
|
||||
// $el->setAttribute('style', 'display: none !important;');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,10 @@ trait PdfMaker
|
|||
'--safebrowsing-disable-auto-update',
|
||||
'--disable-features=SharedArrayBuffer,OutOfBlinkCors,NetworkService,NetworkServiceInProcess',
|
||||
|
||||
'--virtual-time-budget=2000',
|
||||
'--font-render-hinting=medium',
|
||||
'--enable-font-antialiasing',
|
||||
|
||||
// Debug/Output
|
||||
'--dump-dom',
|
||||
];
|
||||
|
|
|
|||
|
|
@ -62,8 +62,6 @@
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
.company-logo {
|
||||
/* height: 100%;*/
|
||||
/* max-width: 100%;*/
|
||||
max-width: $company_logo_size;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
|
|
@ -86,7 +84,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: var(--line-height) !important;
|
||||
padding-left: 2rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
#shipping-details {
|
||||
|
|
@ -102,7 +100,7 @@
|
|||
.client-entity-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-left: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.client-wrapper-left-side {
|
||||
|
|
@ -127,6 +125,7 @@
|
|||
}
|
||||
|
||||
[data-ref="table"] {
|
||||
width: 100% !important;
|
||||
min-width: 100%;
|
||||
table-layout: fixed;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -149,7 +148,7 @@
|
|||
}
|
||||
|
||||
[data-ref="table"] > thead > tr > th {
|
||||
padding: 1.5rem 3rem;
|
||||
padding: 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -158,7 +157,7 @@
|
|||
}
|
||||
|
||||
[data-ref="table"] > tbody > tr > td {
|
||||
padding: 1.5rem 3rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
[data-ref="table"] > tbody > tr > td:last-child {
|
||||
|
|
@ -231,7 +230,7 @@
|
|||
.entity-label {
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-color);
|
||||
padding-left: 2rem;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -282,10 +281,6 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
[data-ref="product_table-product.description-th"] {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
[data-ref="statement-totals"] {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
|
|
@ -301,11 +296,75 @@
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.description-th'] {
|
||||
min-width: 100px !important;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
[data-element='product_table-product.description-td'], td {
|
||||
min-width:100%;
|
||||
max-width: 300px;
|
||||
overflow-wrap: break-word;
|
||||
[data-ref='product_table-product.item-td']{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.item-th']{
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.unit_cost-th'],
|
||||
[data-ref='product_table-product.quantity-th'],
|
||||
[data-ref='product_table-product.product1-th'],
|
||||
[data-ref='product_table-product.product2-th'],
|
||||
[data-ref='product_table-product.product3-th'],
|
||||
[data-ref='product_table-product.product4-th'] {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.tax1-th'] {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.line_total-th'],
|
||||
[data-ref='product_table-product.line_total-td'] {
|
||||
width: 8%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.description-th'] {
|
||||
overflow-wrap: break-word;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.hours-th'],
|
||||
[data-ref='task_table-task.discount-th'],
|
||||
[data-ref='task_table-task.cost-th'],
|
||||
[data-ref='task_table-task.quantity-th'],
|
||||
[data-ref='task_table-task.task1-th'],
|
||||
[data-ref='task_table-task.task2-th'],
|
||||
[data-ref='task_table-task.task3-th'],
|
||||
[data-ref='task_table-task.task4-th'] {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.service-th']{
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.tax1-th'] {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.line_total-th'],
|
||||
[data-ref='task_table-task.line_total-td'] {
|
||||
width: 8%;
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.left-radius {
|
||||
padding-left: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.right-radius {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
|
|
|
|||
|
|
@ -16,15 +16,17 @@
|
|||
}
|
||||
|
||||
|
||||
table tr td, table tr, th {
|
||||
table tr td,
|
||||
table tr,
|
||||
th {
|
||||
font-size: $font_size !important;
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
@page {
|
||||
|
|
@ -58,9 +60,9 @@
|
|||
grid-auto-flow: column;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
|
||||
.company-logo {
|
||||
/* max-width: 65%;*/
|
||||
/* max-width: 65%;*/
|
||||
max-width: $company_logo_size;
|
||||
}
|
||||
|
||||
|
|
@ -73,6 +75,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.client-and-entity-wrapper {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
|
|
@ -99,32 +102,28 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.header-wrapper #entity-details > tr,
|
||||
.header-wrapper #entity-details>tr,
|
||||
.header-wrapper #entity-details th {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-wrapper
|
||||
#entity-details
|
||||
[data-element='entity-balance-due-label'],
|
||||
.header-wrapper
|
||||
#entity-details
|
||||
[data-element='entity-balance-due'] {
|
||||
|
||||
.header-wrapper #entity-details [data-element='entity-balance-due-label'],
|
||||
.header-wrapper #entity-details [data-element='entity-balance-due'] {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
#entity-details {
|
||||
#entity-details {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#entity-details th {
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
#entity-details th {
|
||||
font-weight: normal;
|
||||
line-height: 1.5rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#client-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -150,39 +149,39 @@
|
|||
color: grey;
|
||||
}
|
||||
|
||||
[data-ref="table"] > thead {
|
||||
[data-ref="table"]>thead {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[data-ref="table"] > thead > tr > th {
|
||||
[data-ref="table"]>thead>tr>th {
|
||||
padding: 1rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
[data-ref="table"] > thead > tr > th:last-child {
|
||||
[data-ref="table"]>thead>tr>th:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[data-ref="table"] > tbody > tr > td {
|
||||
[data-ref="table"]>tbody>tr>td {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
[data-ref="table"] > tbody > tr > td:last-child {
|
||||
[data-ref="table"]>tbody>tr>td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[data-ref="table"] > tbody > tr:nth-child(even) {
|
||||
[data-ref="table"]>tbody>tr:nth-child(even) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
#table-totals {
|
||||
margin-top: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
padding-top: .5rem;
|
||||
gap: 80px;
|
||||
page-break-inside:auto;
|
||||
page-break-inside: auto;
|
||||
overflow: visible !important;
|
||||
font-weight: bold;
|
||||
line-height: var(--line-height);
|
||||
|
|
@ -200,7 +199,7 @@
|
|||
padding-left: 7px;
|
||||
}
|
||||
|
||||
#table-totals>.totals-table-right-side> * > :not([hidden]) ~ :not([hidden]) {
|
||||
#table-totals>.totals-table-right-side>*> :not([hidden])~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(.25rem * var(--tw-space-y-reverse));
|
||||
|
|
@ -210,17 +209,13 @@
|
|||
text-align: right;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
#table-totals
|
||||
> *
|
||||
[data-element='total-table-balance-due-label'],
|
||||
#table-totals
|
||||
> *
|
||||
[data-element='total-table-balance-due'] {
|
||||
|
||||
#table-totals>* [data-element='total-table-balance-due-label'],
|
||||
#table-totals>* [data-element='total-table-balance-due'] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#table-totals > * > :last-child {
|
||||
#table-totals>*> :last-child {
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
|
@ -261,7 +256,7 @@
|
|||
|
||||
.repeating-footer,
|
||||
.repeating-footer-space {
|
||||
height: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.repeating-header {
|
||||
|
|
@ -285,26 +280,32 @@
|
|||
bottom: 0;
|
||||
border-top: 1px solid #000;
|
||||
width: 82%;
|
||||
min-height:100px;
|
||||
min-height: 100px;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
[data-element='product_table-product.description-td'], td {
|
||||
min-width:100%;
|
||||
[data-element='product_table-product.description-td'],
|
||||
td {
|
||||
min-width: 100%;
|
||||
max-width: 300px;
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
[data-ref="total_table-public_notes"] { font-weight: normal; }
|
||||
[data-ref="total_table-terms"] { font-weight: normal; }
|
||||
[data-ref="total_table-public_notes"] {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
[data-ref="total_table-terms"] {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* [data-ref="shipping_address-label"] {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.stamp {
|
||||
transform: rotate(12deg);
|
||||
transform: rotate(12deg);
|
||||
color: #555;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -315,24 +316,24 @@
|
|||
border-radius: 1rem;
|
||||
font-family: 'Courier';
|
||||
mix-blend-mode: multiply;
|
||||
z-index:200 !important;
|
||||
position: fixed;
|
||||
z-index: 200 !important;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-paid {
|
||||
color: #D23;
|
||||
border: 1rem double #D23;
|
||||
color: #D23;
|
||||
border: 1rem double #D23;
|
||||
transform: rotate(-5deg);
|
||||
font-size: 6rem;
|
||||
font-family: "Open sans", Helvetica, Arial, sans-serif;
|
||||
border-radius: 0;
|
||||
padding: 0.5rem;
|
||||
opacity: 0.2;
|
||||
z-index:200 !important;
|
||||
position: fixed;
|
||||
z-index: 200 !important;
|
||||
position: fixed;
|
||||
display: $show_paid_stamp;
|
||||
}
|
||||
}
|
||||
|
||||
.project-header {
|
||||
font-size: 1.2em;
|
||||
|
|
@ -343,16 +344,10 @@
|
|||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.pqrcode {
|
||||
|
||||
}
|
||||
|
||||
#qr-bill{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.pqrcode {}
|
||||
|
||||
/** Useful snippets, uncomment to enable. **/
|
||||
|
||||
/** Hide company logo **/
|
||||
|
|
@ -381,59 +376,60 @@
|
|||
</style>
|
||||
|
||||
<div id="body">
|
||||
<table style="min-width: 100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="repeating-header-space"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="">
|
||||
<div class="header-wrapper">
|
||||
<div class="logo-container">
|
||||
<img class="company-logo" src="$company.logo" alt="$company.name logo">
|
||||
<table style="min-width: 100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="repeating-header-space"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="">
|
||||
<div class="header-wrapper">
|
||||
<div class="logo-container">
|
||||
<img class="company-logo" src="$company.logo" alt="$company.name logo">
|
||||
</div>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
<div class="header-wrapper2">
|
||||
<div id="client-details"></div>
|
||||
<div id="vendor-details"></div>
|
||||
<div id="shipping-details"></div>
|
||||
<div>
|
||||
<p class="entity-label"
|
||||
style="font-size:32px; font-weight: bold; color:$primary_color;">$entity_label</p>
|
||||
<table id="entity-details" cellspacing="0" cellpadding="0" dir="ltr"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="product-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="task-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="statement-invoice-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-invoice-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-payment-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-payment-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-credit-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-credit-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-aging-table-totals" data-ref="statement-totals"></div>
|
||||
<div id="table-totals" cellspacing="0">$status_logo</div>
|
||||
</div>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
<div class="header-wrapper2">
|
||||
<div id="client-details"></div>
|
||||
<div id="vendor-details"></div>
|
||||
<div id="shipping-details"></div>
|
||||
<div>
|
||||
<p class="entity-label" style="font-size:32px; font-weight: bold; color:$primary_color;">$entity_label</p>
|
||||
<table id="entity-details" cellspacing="0" cellpadding="0" dir="ltr"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="product-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="task-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
|
||||
<table id="statement-invoice-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-invoice-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-payment-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-payment-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-credit-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-credit-table-totals" data-ref="statement-totals"></div>
|
||||
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
|
||||
<div id="statement-aging-table-totals" data-ref="statement-totals"></div>
|
||||
<div id="table-totals" cellspacing="0">$status_logo</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="repeating-footer-space"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="repeating-footer-space"> </div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="repeating-header" id="header"></div>
|
||||
|
|
@ -441,5 +437,6 @@
|
|||
<div id="footer" style="">
|
||||
<div style="width: 100%;">
|
||||
<p data-ref="total_table-footer">$entity_footer</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,10 +158,6 @@
|
|||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
td.left-radius {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
th.right-radius {
|
||||
padding-right: 1rem;
|
||||
text-align: right;
|
||||
|
|
@ -269,12 +265,56 @@
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.description-td'] {
|
||||
width:100%;
|
||||
max-width: 300px;
|
||||
[data-ref='product_table-product.description-th'] {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.item-td']{
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.item-th'],
|
||||
[data-ref='product_table-product.unit_cost-th'],
|
||||
[data-ref='product_table-product.quantity-th'],
|
||||
[data-ref='product_table-product.product1-th'],
|
||||
[data-ref='product_table-product.product2-th'],
|
||||
[data-ref='product_table-product.product3-th'],
|
||||
[data-ref='product_table-product.product4-th'] {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.tax1-th'] {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
[data-ref='product_table-product.line_total-th'] {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.description-th'] {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.hours-th'],
|
||||
[data-ref='task_table-task.service-th'],
|
||||
[data-ref='task_table-task.discount-th'],
|
||||
[data-ref='task_table-task.cost-th'],
|
||||
[data-ref='task_table-task.quantity-th'],
|
||||
[data-ref='task_table-task.task1-th'],
|
||||
[data-ref='task_table-task.task2-th'],
|
||||
[data-ref='task_table-task.task3-th'],
|
||||
[data-ref='task_table-task.task4-th'] {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.tax1-th'] {
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
[data-ref='task_table-task.line_total-th'] {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
transform: rotate(12deg);
|
||||
color: #555;
|
||||
|
|
|
|||
Loading…
Reference in New Issue