Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Plain design shipping address

Browse Source
This commit is contained in:
David Bomba 2023-02-22 16:19:51 +11:00
parent 434ef21043
commit c55e5298fc
1 changed files with 109 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
resources/views/pdf-designs/plain.html
View File

@ -15,13 +15,15 @@
zoom: 80%; zoom: 80%;
} }
table tr td, table tr, th { table tr td,
table tr,
th {
font-size: $font_size !important; font-size: $font_size !important;
} }
html { html {
width: 210mm; width: 210mm;
height: 200mm; height: 200mm;
} }
@page { @page {
@ -42,12 +44,21 @@
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
line-height: var(--line-height); line-height: var(--line-height);
margin-bottom: 10px; }
.client-wrapper{
display: grid;
gap: 10px;
grid-template-columns: auto auto;
grid-template-areas: "a b";
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
justify-content:left;
} }
.company-logo { .company-logo {
/* max-width: 65%;*/ max-width: 65%;
max-width: $company_logo_size; /* max-width: $company_logo_size;*/
} }
.header-wrapper #company-address { .header-wrapper #company-address {
@ -62,7 +73,7 @@
width: 100%; width: 100%;
} }
.header-wrapper #entity-details > tr, .header-wrapper #entity-details>tr,
.header-wrapper #entity-details th { .header-wrapper #entity-details th {
font-weight: normal; font-weight: normal;
padding-left: 0.9rem; padding-left: 0.9rem;
@ -70,37 +81,23 @@
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
} }
.entity-details-cell { .header-wrapper #entity-details [data-element='entity-balance-due-label'],
display: table-cell; .header-wrapper #entity-details [data-element='entity-balance-due'] {
border-right: 10px solid transparent;
}
.header-wrapper
#entity-details
[data-element='entity-balance-due-label'],
.header-wrapper
#entity-details
[data-element='entity-balance-due'] {
background-color: #e6e6e6; background-color: #e6e6e6;
} }
.client-or-vendor-wrapper {
display: flex;
padding: 0.2rem;
}
#client-details { #client-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 30px;
line-height: var(--line-height); line-height: var(--line-height);
white-space: nowrap;
} }
#shipping-details { #shipping-details {
display: $show_shipping_address; display: $show_shipping_address;
flex-direction: column; flex-direction: column;
padding-right: 30px;
line-height: var(--line-height); line-height: var(--line-height);
white-space: nowrap;
} }
[data-ref="table"] { [data-ref="table"] {
@ -108,7 +105,7 @@
min-width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
overflow-wrap: break-word; overflow-wrap: break-word;
margin-bottom: 20px; margin-bottom: 50px;
} }
.task-time-details { .task-time-details {
@ -117,25 +114,25 @@
color: grey; color: grey;
} }
[data-ref="table"] > thead { [data-ref="table"]>thead {
text-align: left; text-align: left;
} }
[data-ref="table"] > thead > tr > th { [data-ref="table"]>thead>tr>th {
padding: 0.5rem; padding: 0.5rem;
background-color: #e6e6e6; background-color: #e6e6e6;
} }
[data-ref="table"] > thead > tr > th:last-child { [data-ref="table"]>thead>tr>th:last-child {
text-align: right; text-align: right;
} }
[data-ref="table"] > tbody > tr > td { [data-ref="table"]>tbody>tr>td {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
padding: 0.75rem; padding: 0.75rem;
} }
[data-ref="table"] > tbody > tr > td:last-child { [data-ref="table"]>tbody>tr>td:last-child {
text-align: right; text-align: right;
} }
@ -147,7 +144,7 @@
padding-left: 1rem; padding-left: 1rem;
margin-right: .75rem; margin-right: .75rem;
gap: 80px; gap: 80px;
page-break-inside:auto; page-break-inside: auto;
overflow: visible !important; overflow: visible !important;
} }
@ -162,7 +159,7 @@
padding-left: 7px; 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; --tw-space-y-reverse: 0;
margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.25rem * var(--tw-space-y-reverse)); margin-bottom: calc(.25rem * var(--tw-space-y-reverse));
@ -173,16 +170,12 @@
padding-right: 7px; padding-right: 7px;
} }
#table-totals #table-totals>* [data-element='total-table-balance-due-label'],
> * #table-totals>* [data-element='total-table-balance-due'] {
[data-element='total-table-balance-due-label'],
#table-totals
> *
[data-element='total-table-balance-due'] {
font-weight: bold; font-weight: bold;
} }
#table-totals > * > :last-child { #table-totals>*> :last-child {
text-align: right; text-align: right;
padding-right: 1rem; padding-right: 1rem;
} }
@ -230,23 +223,26 @@
.repeating-footer-space { .repeating-footer-space {
height: 10px; height: 10px;
} }
.repeating-header { .repeating-header {
position: fixed; position: fixed;
top: 0; top: 0;
} }
.repeating-footer { .repeating-footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
[data-element='product_table-product.description-td'], td { [data-element='product_table-product.description-td'],
min-width:100%; td {
min-width: 100%;
max-width: 300px; max-width: 300px;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.stamp { .stamp {
transform: rotate(12deg); transform: rotate(12deg);
color: #555; color: #555;
font-size: 3rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
@ -257,24 +253,22 @@
border-radius: 1rem; border-radius: 1rem;
font-family: 'Courier'; font-family: 'Courier';
mix-blend-mode: multiply; mix-blend-mode: multiply;
z-index:200 !important; z-index: 200 !important;
position: fixed; position: fixed;
text-align: center; text-align: center;
} }
.is-paid { .is-paid {
color: #D23; color: #D23;
border: 1rem double #D23; border: 1rem double #D23;
transform: rotate(-5deg); transform: rotate(-5deg);
font-size: 6rem; font-size: 6rem;
font-family: "Open sans", Helvetica, Arial, sans-serif; font-family: "Open sans", Helvetica, Arial, sans-serif;
border-radius: 0; border-radius: 0;
padding: 0.5rem; padding: 0.5rem;
opacity: 0.2; opacity: 0.2;
z-index:200 !important; z-index: 200 !important;
position: fixed; position: fixed;
display: $show_paid_stamp;
} }
.project-header { .project-header {
@ -286,12 +280,10 @@
margin-right: 0; margin-right: 0;
font-weight: bold; font-weight: bold;
color: #505050; color: #505050;
}
.pqrcode {
} }
.pqrcode {}
/** Useful snippets, uncomment to enable. **/ /** Useful snippets, uncomment to enable. **/
/** Hide company logo **/ /** Hide company logo **/
@ -323,55 +315,51 @@
</style> </style>
<table style="min-width: 100%"> <table style="min-width: 100%">
<thead> <thead>
<tr> <tr>
<td> <td>
<div class="repeating-header-space">&nbsp;</div> <div class="repeating-header-space">&nbsp;</div>
</td> </td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<div id="body"> <div id="body">
<div class="header-wrapper"> <div class="header-wrapper">
<div id="company-details"></div> <div id="company-details"></div>
<div id="company-address"></div> <div id="company-address"></div>
<div> <div>
<img <img class="company-logo" src="$company.logo" alt="$company.name logo" />
class="company-logo" <table id="entity-details" cellspacing="0" dir="$dir"></table>
src="$company.logo" </div>
alt="$company.name logo" </div>
/> <div class="client-wrapper">
<div id="entity-details"></div> <div id="client-details"></div>
</div> <div id="vendor-details"></div>
</div> <div id="shipping-details"></div>
<div class="header-wrapper"> </div>
<div id="client-details"></div> <table id="product-table" cellspacing="0" data-ref="table"></table>
<div id="vendor-details"></div> <table id="task-table" cellspacing="0" data-ref="table"></table>
<div id="shipping-details"></div> <table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
</div> <table id="statement-invoice-table" cellspacing="0" data-ref="table"></table>
<table id="product-table" cellspacing="0" data-ref="table"></table> <div id="statement-invoice-table-totals" data-ref="statement-totals"></div>
<table id="task-table" cellspacing="0" data-ref="table"></table> <table id="statement-payment-table" cellspacing="0" data-ref="table"></table>
<table id="delivery-note-table" cellspacing="0" data-ref="table"></table> <div id="statement-payment-table-totals" data-ref="statement-totals"></div>
<table id="statement-invoice-table" cellspacing="0" data-ref="table"></table> <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
<div id="statement-invoice-table-totals" data-ref="statement-totals"></div> <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
<table id="statement-payment-table" cellspacing="0" data-ref="table"></table> <div id="table-totals" cellspacing="0">$status_logo</div>
<div id="statement-payment-table-totals" data-ref="statement-totals"></div> </div>
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table> </td>
<div id="statement-aging-table-totals" data-ref="statement-totals"></div> </tr>
<div id="table-totals" cellspacing="0"></div> </tbody>
</div> <tfoot>
</td> <tr>
</tr> <td>
</tbody> <div class="repeating-footer-space">&nbsp;</div>
<tfoot> </td>
<tr> </tr>
<td> </tfoot>
<div class="repeating-footer-space">&nbsp;</div>
</td>
</tr>
</tfoot>
</table> </table>
<div class="repeating-header" id="header"></div> <div class="repeating-header" id="header"></div>
@ -379,25 +367,25 @@
$entity_images $entity_images
<div class="repeating-footerx" id="footer"> <div class="repeating-footerx" id="footer">
<p data-ref="total_table-footer">$entity_footer</p> <p data-ref="total_table-footer">$entity_footer</p>
<script> <script>
// 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', 'statement-payment-table', 'statement-aging-table-totals', 'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',
'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table', 'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',
'client-details','vendor-details' 'client-details', 'vendor-details'
]; ];
tables.forEach((tableIdentifier) => { tables.forEach((tableIdentifier) => {
console.log(document.getElementById(tableIdentifier)); console.log(document.getElementById(tableIdentifier));
document.getElementById(tableIdentifier)?.childElementCount === 0 document.getElementById(tableIdentifier)?.childElementCount === 0
? document.getElementById(tableIdentifier).style.setProperty('display', 'none', 'important') ? document.getElementById(tableIdentifier).style.setProperty('display', 'none', 'important')
: ''; : '';
});
}); });
</script> });
</script>
</div> </div>