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

Merge pull request #4868 from beganovich/v5-0902-design-updates

Browse Source 
(v5) PDF design updates
This commit is contained in:
Benjamin Beganović 2021-02-10 13:51:24 +01:00 committed by GitHub
commit c4d5004df8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 364 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/Services/PdfMaker/Design.php
View File

@ -433,7 +433,11 @@ class Design extends BaseDesign
['element' => 'span', 'content' => '$entity.terms_label: ', 'properties' => ['hidden' => $this->entityVariableCheck('$entity.terms'), 'data-ref' => 'total_table-terms-label', 'style' => 'font-weight: bold; text-align: left;']], ['element' => 'span', 'content' => '$entity.terms_label: ', 'properties' => ['hidden' => $this->entityVariableCheck('$entity.terms'), 'data-ref' => 'total_table-terms-label', 'style' => 'font-weight: bold; text-align: left;']],
['element' => 'span', 'content' => '$entity.terms', 'properties' => ['data-ref' => 'total_table-terms', 'style' => 'text-align: left;']], ['element' => 'span', 'content' => '$entity.terms', 'properties' => ['data-ref' => 'total_table-terms', 'style' => 'text-align: left;']],
]], ]],
['element' => 'div', 'properties' => ['style' => 'margin-top: 1.5rem; display: flex; align-items: flex-start;'], 'elements' => [
['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 4rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']],
]], ]],
]],
['element' => 'div', 'properties' => ['class' => 'totals-table-right-side'], 'elements' => []],
]; ];
foreach (['discount', 'custom_surcharge1', 'custom_surcharge2', 'custom_surcharge3', 'custom_surcharge4'] as $property) { foreach (['discount', 'custom_surcharge1', 'custom_surcharge2', 'custom_surcharge3', 'custom_surcharge4'] as $property) {
@ -461,8 +465,7 @@ class Design extends BaseDesign
} }
foreach ($taxes as $i => $tax) { foreach ($taxes as $i => $tax) {
$elements[] = ['element' => 'div', 'elements' => [ $elements[1]['elements'][] = ['element' => 'div', 'elements' => [
['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i . '-label']], ['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i . '-label']],
['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i]], ['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-total_tax_' . $i]],
]]; ]];
@ -475,15 +478,13 @@ class Design extends BaseDesign
} }
foreach ($taxes as $i => $tax) { foreach ($taxes as $i => $tax) {
$elements[] = ['element' => 'div', 'elements' => [ $elements[1]['elements'][] = ['element' => 'div', 'elements' => [
['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i . '-label']], ['element' => 'span', 'content', 'content' => $tax['name'], 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i . '-label']],
['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i]], ['element' => 'span', 'content', 'content' => Number::formatMoney($tax['total'], $this->context['client']), 'properties' => ['data-ref' => 'totals-table-line_tax_' . $i]],
]]; ]];
} }
} else { } else {
$elements[] = ['element' => 'div', 'elements' => [ $elements[1]['elements'][] = ['element' => 'div', 'elements' => [
['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
['element' => 'span', 'content' => $variable . '_label', 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1) . '-label']], ['element' => 'span', 'content' => $variable . '_label', 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1) . '-label']],
['element' => 'span', 'content' => $variable, 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1)]], ['element' => 'span', 'content' => $variable, 'properties' => ['data-ref' => 'totals_table-' . substr($variable, 1)]],
]]; ]];
@ -491,13 +492,17 @@ class Design extends BaseDesign
} }
if (!is_null($this->entity->partial) && $this->entity->partial > 0) { if (!is_null($this->entity->partial) && $this->entity->partial > 0) {
$elements[] = ['element' => 'div', 'elements' => [ $elements[1]['elements'][] = ['element' => 'div', 'elements' => [
['element' => 'span', 'content' => 'This is placeholder for the 3rd fraction of element.', 'properties' => ['style' => 'opacity: 0%']], // Placeholder for fraction of element (3fr)
['element' => 'span', 'content' => '$partial_due_label', 'properties' => ['data-ref' => 'totals_table-partial_due-label']], ['element' => 'span', 'content' => '$partial_due_label', 'properties' => ['data-ref' => 'totals_table-partial_due-label']],
['element' => 'span', 'content' => '$partial_due'], ['element' => 'span', 'content' => '$partial_due'],
]]; ]];
} }
$elements[1]['elements'][] = ['element' => 'div', 'elements' => [
['element' => 'span', 'content' => '',],
['element' => 'span', 'content' => ''],
]];
return $elements; return $elements;
} }
} }

2
app/Services/PdfMaker/Designs/Utilities/DesignHelpers.php
View File

@ -209,11 +209,9 @@ trait DesignHelpers
}); });
*/ */
$javascript = 'document.querySelectorAll("tbody > tr > td").forEach(t=>{if(""!==t.innerText){let e=t.getAttribute("data-ref").slice(0,-3);document.querySelector(`th[data-ref="${e}-th"]`).removeAttribute("hidden")}}),document.querySelectorAll("tbody > tr > td").forEach(t=>{let e=t.getAttribute("data-ref").slice(0,-3);(e=document.querySelector(`th[data-ref="${e}-th"]`)).hasAttribute("hidden")&&""==t.innerText&&t.setAttribute("hidden","true")});'; $javascript = 'document.querySelectorAll("tbody > tr > td").forEach(t=>{if(""!==t.innerText){let e=t.getAttribute("data-ref").slice(0,-3);document.querySelector(`th[data-ref="${e}-th"]`).removeAttribute("hidden")}}),document.querySelectorAll("tbody > tr > td").forEach(t=>{let e=t.getAttribute("data-ref").slice(0,-3);(e=document.querySelector(`th[data-ref="${e}-th"]`)).hasAttribute("hidden")&&""==t.innerText&&t.setAttribute("hidden","true")});';
return ['element' => 'div', 'elements' => [ return ['element' => 'div', 'elements' => [
['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 3rem; position: fixed; bottom: 0; left: 0; padding: 5px; margin: 5px;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']],
['element' => 'script', 'content' => $javascript], ['element' => 'script', 'content' => $javascript],
]]; ]];
} }

2
app/Utils/HtmlEngine.php
View File

@ -341,7 +341,7 @@ class HtmlEngine
$data['$font_size'] = ['value' => $this->settings->font_size . 'px', 'label' => '']; $data['$font_size'] = ['value' => $this->settings->font_size . 'px', 'label' => ''];
$data['$invoiceninja.whitelabel'] = ['value' => asset('images/created-by-invoiceninja-new.png'), 'label' => '']; $data['$invoiceninja.whitelabel'] = ['value' => 'https://raw.githubusercontent.com/invoiceninja/invoiceninja/v5-develop/public/images/created-by-invoiceninja-new.png', 'label' => ''];
$data['$primary_color'] = ['value' => $this->settings->primary_color, 'label' => '']; $data['$primary_color'] = ['value' => $this->settings->primary_color, 'label' => ''];
$data['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => '']; $data['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => ''];

0
database/migrations/2021_01_19_115919_update_designs.php → database/migrations/2021_02_10_115919_update_designs.php
View File

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

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -27,13 +28,11 @@
background-color: #2d2c2a; background-color: #2d2c2a;
padding: 3rem; padding: 3rem;
color: white; color: white;
min-width: 100%;
} }
.company-logo { .company-logo {
height: 6rem; height: 6rem;
padding: 2rem;
background-color: white;
margin: -4rem 2rem 2rem;
} }
#company-details, #company-details,
@ -55,6 +54,8 @@
.client-entity-wrapper { .client-entity-wrapper {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
padding-left: 1rem;
padding-top: 3rem;
} }
.entity-details-wrapper { .entity-details-wrapper {
@ -99,8 +100,8 @@
#product-table > thead > tr > th, #product-table > thead > tr > th,
#delivery-note-table > thead > tr > th, #delivery-note-table > thead > tr > th,
#task-table > thead > tr > th { #task-table > thead > tr > th {
padding: 1.5rem; padding: 1.5rem 3rem;
font-size: 1.5rem; font-size: 1rem;
} }
#product-table > thead > tr > th:last-child, #product-table > thead > tr > th:last-child,
@ -112,7 +113,7 @@
#product-table > tbody > tr > td, #product-table > tbody > tr > td,
#delivery-note-table > tbody > tr > td, #delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td { #task-table > tbody > tr > td {
padding: 1.5rem; padding: 1.5rem 3rem;
} }
#product-table > tbody > tr > td:last-child, #product-table > tbody > tr > td:last-child,
@ -137,12 +138,26 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: .5rem; padding-top: .5rem;
padding-left: 1.2rem; padding-left: 3rem;
gap: 20px; padding-right: 3rem;
gap: 80px;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals
@ -165,30 +180,81 @@
text-align: right; text-align: right;
padding-right: 1.5rem; padding-right: 1.5rem;
} }
.entity-label {
text-transform: uppercase;
color: var(--primary-color);
padding-left: 2rem;
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 {
margin-top: 1rem;
background-color: #2d2c2a;
height: 160px;
min-width: 100%;
position: fixed;
bottom: 0;
padding: 1rem 3rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
</style> </style>
<table class="page-container">
<thead class="page-header">
<tr>
<th class="page-header-cell">
<div class="header-wrapper" id="header"> <div class="header-wrapper" id="header">
<div></div> <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>
<div id="body"> <tfoot class="page-footer">
<img <tr>
class="company-logo" <td class="page-footer-cell">
src="$company.logo" <div class="footer-wrapper" id="footer">
alt="$company.name logo" <div> <!-- #1 column --> </div>
/> <div> <!-- #2 column --> </div>
<div> <!-- #3 column --> </div>
</div>
</td>
</tr>
</tfoot>
<tbody class="page-content">
<tr>
<td class="page-content-cell" id="body">
<div class="client-entity-wrapper"> <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 id="client-details" cellspacing="0"></div>
</div>
<div class="entity-details-wrapper-right-side">
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<table id="entity-details"></table> <table id="entity-details"></table>
</div> </div>
</div> </div>
</div>
<table id="product-table" cellspacing="0"></table> <table id="product-table" cellspacing="0"></table>
@ -197,6 +263,7 @@
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0"></div>
<table id="delivery-note-table" cellspacing="0"></table> <table id="delivery-note-table" cellspacing="0"></table>
</div> </td>
</tr>
<div id="footer">$entity_footer</div> </tbody>
</table>

38
resources/views/pdf-designs/business.html
View File

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -37,7 +38,7 @@
#company-details { #company-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #b1b1b1; color: #AAA9A9;
} }
#company-details > * { #company-details > * {
@ -68,20 +69,20 @@
#client-details { #client-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: var(--primary-color); margin-top: 1rem;
} }
#client-details > * { #client-details > * {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#client-details > span:nth-child(1) { #client-details > p:nth-child(1) {
font-weight: bold; color: var(--primary-color);
} }
#entity-details { #entity-details {
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 0.8rem; padding: 1.2rem;
border-radius: 1rem; border-radius: 1rem;
width: 100%; width: 100%;
color: white; color: white;
@ -90,6 +91,11 @@
#entity-details th { #entity-details th {
font-weight: normal; font-weight: normal;
padding-bottom: .5rem;
}
#entity-details > tbody > tr > th:nth-child(2) {
text-align: right;
} }
#product-table, #product-table,
@ -151,7 +157,7 @@
#product-table > tbody > tr:nth-child(odd) > td, #product-table > tbody > tr:nth-child(odd) > td,
#delivery-note-table > tbody > tr:nth-child(odd) > td, #delivery-note-table > tbody > tr:nth-child(odd) > td,
#task-table > tbody > tr:nth-child(odd) > td { #task-table > tbody > tr:nth-child(odd) > td {
background: #e8e8e8; background: #F7F7F7;
} }
#product-table > tbody > tr:nth-child(even) > td, #product-table > tbody > tr:nth-child(even) > td,
@ -177,16 +183,28 @@
border-bottom-right-radius: 1rem; border-bottom-right-radius: 1rem;
} }
#table-totals > * { #table-totals {
background-color: #f7f7f7;
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
gap: 20px; gap: 80px;
padding-left: 1rem; padding-left: 1rem;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
}
#table-totals #table-totals
> * > *
[data-element='product-table-balance-due-label'], [data-element='product-table-balance-due-label'],

43
resources/views/pdf-designs/clean.html
View File

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -33,7 +34,6 @@
#company-details { #company-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #9f9f9f;
} }
#company-details > span:first-child { #company-details > span:first-child {
@ -43,12 +43,12 @@
#company-address { #company-address {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #9f9f9f;
} }
.entity-label { .entity-label {
text-transform: uppercase; text-transform: uppercase;
margin-top: 3.5rem; margin-top: 3.5rem;
padding-left: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: bold; font-weight: bold;
color: var(--primary-color); color: var(--primary-color);
@ -58,8 +58,8 @@
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 1rem; padding: 1rem;
border-top: 1px solid #9f9f9f; border-top: 1px solid #d8d8d8;
border-bottom: 1px solid #9f9f9f; border-bottom: 1px solid #d8d8d8;
} }
#entity-details { #entity-details {
@ -110,10 +110,17 @@
padding-left: 1rem; padding-left: 1rem;
} }
#product-table > thead > tr > th:nth-last-child(1),
#delivery-note-table > thead > tr > th:nth-last-child(1),
#task-table > thead > tr > th:nth-last-child(1) {
text-align: right;
}
#product-table > tbody > tr > td, #product-table > tbody > tr > td,
#delivery-note-table > tbody > tr > td, #delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td { #task-table > tbody > tr > td {
border-bottom: 1px solid #9f9f9f; border-top: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
padding: 1rem; padding: 1rem;
} }
@ -123,6 +130,12 @@
color: var(--primary-color); color: var(--primary-color);
} }
#product-table > tbody > tr > td:last-child,
#delivery-note-table > tbody > tr > td:last-child,
#task-table > tbody > tr > td:last-child {
text-align: right;
}
#product-table > tbody > tr:nth-child(odd), #product-table > tbody > tr:nth-child(odd),
#delivery-note-table > tbody > tr:nth-child(odd), #delivery-note-table > tbody > tr:nth-child(odd),
#task-table > tbody > tr:nth-child(odd) { #task-table > tbody > tr:nth-child(odd) {
@ -133,12 +146,24 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: .5rem; padding-top: .5rem;
padding-left: 1rem; gap: 80px;
gap: 20px; }
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals

29
resources/views/pdf-designs/creative.html
View File

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -37,6 +38,11 @@
flex-direction: column; flex-direction: column;
} }
[data-ref="company_details-company.name"] {
color: var(--primary-color);
font-weight: bold;
}
.header-wrapper #client-details > *:first-child { .header-wrapper #client-details > *:first-child {
font-weight: bold; font-weight: bold;
} }
@ -136,10 +142,24 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: 1rem; padding-top: 1rem;
gap: 80px;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals
@ -153,11 +173,6 @@
padding-left: 1rem; padding-left: 1rem;
} }
#table-totals > *:last-child > * {
border-top: 5px solid var(--primary-color);
padding-top: 1rem;
}
#table-totals > * > :last-child { #table-totals > * > :last-child {
text-align: right; text-align: right;
padding-right: 1rem; padding-right: 1rem;

38
resources/views/pdf-designs/elegant.html
View File

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -32,11 +33,6 @@
height: 5rem; height: 5rem;
} }
.double-border {
margin-top: 3px;
border-color: black;
}
.client-entity-wrapper { .client-entity-wrapper {
display: grid; display: grid;
grid-template-columns: 1.8fr 1.2fr; grid-template-columns: 1.8fr 1.2fr;
@ -121,6 +117,7 @@
#delivery-note-table > tbody > tr > td, #delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td { #task-table > tbody > tr > td {
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid;
padding: 1rem; padding: 1rem;
} }
@ -130,25 +127,29 @@
text-align: right; text-align: right;
} }
.thanks-label {
text-align: center;
margin-top: 6rem;
font-size: 1.5rem;
font-weight: bold;
padding-bottom: 1rem;
border-bottom: 4px solid;
}
#table-totals { #table-totals {
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
gap: 20px; gap: 80px;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals
@ -214,8 +215,5 @@
<table id="delivery-note-table" cellspacing="0"></table> <table id="delivery-note-table" cellspacing="0"></table>
</div> </div>
<p class="thanks-label">$thanks_label!</p>
<hr class="double-border"/>
<div id="footer">$entity_footer</div> <div id="footer">$entity_footer</div>

27
resources/views/pdf-designs/hipster.html
View File

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -71,11 +72,7 @@
.entity-label { .entity-label {
font-size: 3rem; font-size: 3rem;
text-transform: uppercase; text-transform: uppercase;
margin: 2rem 1rem; margin: 2rem 0;
}
.entity-details-wrapper {
margin: 1rem;
} }
.entity-details-wrapper > * { .entity-details-wrapper > * {
@ -150,12 +147,24 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-left: 1rem; gap: 80px;
gap: 20px; }
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals

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

@ -11,6 +11,7 @@
font-size: "$font_size"; font-size: "$font_size";
margin: 0; margin: 0;
padding: 0; padding: 0;
zoom: 80%;
} }
@page { @page {
@ -28,11 +29,15 @@
color: white; color: white;
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
padding: 1.5rem; padding: 3rem;
width: 100%; min-width: 100%;
height: 160px; height: 160px;
} }
.company-name {
text-align: left;
}
.header-container .company-name { .header-container .company-name {
font-size: 2rem; font-size: 2rem;
} }
@ -53,7 +58,7 @@
} }
.logo-client-wrapper { .logo-client-wrapper {
margin: 3rem 1.5rem; margin: 3rem 2rem;
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
} }
@ -68,7 +73,7 @@
} }
.table-wrapper { .table-wrapper {
margin: 3rem 1.5rem; margin: 3rem 2rem;
} }
#product-table, #product-table,
@ -98,7 +103,6 @@
padding: 0.8rem; padding: 0.8rem;
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: white; color: white;
width: 100%;
} }
#product-table > thead > tr > th:last-child, #product-table > thead > tr > th:last-child,
@ -129,8 +133,9 @@
.footer-wrapper { .footer-wrapper {
margin-top: 1rem; margin-top: 1rem;
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 1rem; padding-left: 3rem;
height: 160px; padding-right: 3rem;
height: 220px;
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -142,6 +147,7 @@
width: 100%; width: 100%;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
color: #fff4e9; color: #fff4e9;
max-height: 140px;
} }
#company-address, #company-address,
@ -161,12 +167,26 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
margin-top: 0.5rem; padding-top: .5rem;
margin-right: 1.5rem; padding-left: 3rem;
margin-left: 1.5rem; padding-right: 3rem;
gap: 80px;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals
@ -179,22 +199,6 @@
font-size: 1.3rem; font-size: 1.3rem;
} }
#table-totals > * > * {
padding-left: 1.5rem;
}
#table-totals > * > :last-child {
text-align: right;
padding-right: 1rem;
}
#table-totals > *:last-child {
background-color: var(--secondary-color);
color: white;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
table.page-container { table.page-container {
page-break-after: always; page-break-after: always;
min-width: 100%; min-width: 100%;
@ -207,6 +211,10 @@
tfoot.page-footer { tfoot.page-footer {
display: table-footer-group; display: table-footer-group;
} }
.page-content-cell {
padding: 1rem;
}
</style> </style>
<table class="page-container"> <table class="page-container">

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

@ -9,6 +9,7 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
@ -114,12 +115,25 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: .5rem; padding-top: .5rem;
padding-left: 1rem; padding-left: 1rem;
gap: 20px; gap: 80px;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals

84
resources/views/pdf-designs/playful.html
View File

@ -9,10 +9,11 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: "$font_size"; font-size: "$font_size";
zoom: 80%;
} }
@page { @page {
margin: $global_margin; margin: -0.25cm !important;
} }
p { p {
@ -21,8 +22,10 @@
} }
.header-wrapper { .header-wrapper {
margin-top: 2rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding: 2rem 3rem;
} }
.header-wrapper .company-logo { .header-wrapper .company-logo {
@ -47,10 +50,10 @@
} }
.contacts-wrapper { .contacts-wrapper {
margin-top: 3rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 40px; gap: 40px;
padding: 3rem;
} }
.contacts-wrapper .contact-label { .contacts-wrapper .contact-label {
@ -90,7 +93,7 @@
#product-table, #product-table,
#delivery-note-table, #delivery-note-table,
#task-table { #task-table {
margin-top: 3rem; padding: 3rem;
/* margin-bottom: 200px; */ /* margin-bottom: 200px; */
min-width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
@ -141,6 +144,7 @@
#product-table > tbody > tr > td, #product-table > tbody > tr > td,
#delivery-note-table > tbody > tr > td, #delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td { #task-table > tbody > tr > td {
background-color: #F7F7F7;
border-bottom: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color);
padding: 1rem; padding: 1rem;
} }
@ -161,12 +165,25 @@
page-break-inside: avoid; page-break-inside: avoid;
} }
#table-totals > * { #table-totals {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 1fr; grid-template-columns: 2fr 1fr;
padding-top: 0.5rem; gap: 80px;
padding-left: 1rem; padding-left: 3rem;
gap: 20px; padding-right: 3rem;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
} }
#table-totals #table-totals
@ -188,9 +205,45 @@
text-align: right; text-align: right;
padding-right: 1rem; padding-right: 1rem;
} }
#header {
position: fixed;
top: 0;
min-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin-left: -10px;
}
#header > * {
padding: 10px;
}
#footer {
position: fixed;
bottom: 0;
min-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin-left: -10px;
}
#footer > * {
padding: 5px;
}
</style> </style>
<div id="header"></div>
<div id="header">
<div style="background-color: #00968B"><!-- 1 --></div>
<div style="background-color: #1D756E"><!-- 2 --></div>
<div style="background-color: #FCB600"><!-- 3 --></div>
<div style="background-color: #BA932F"><!-- 4 --></div>
<div style="background-color: #A72A4E"><!-- 5 --></div>
<div style="background-color: #E20041"><!-- 6 --></div>
<div style="background-color: #F8B300"><!-- 7 --></div>
<div style="background-color: #009B8F"><!-- 8 --></div>
</div>
<div id="body"> <div id="body">
<div class="header-wrapper"> <div class="header-wrapper">
@ -231,5 +284,16 @@
<table id="delivery-note-table" cellspacing="0"></table> <table id="delivery-note-table" cellspacing="0"></table>
</div> </div>
<div id="footer">$entity_footer</div> <div id="footer">
$entity_footer
<div style="background-color: #00968B"><!-- 1 --></div>
<div style="background-color: #1D756E"><!-- 2 --></div>
<div style="background-color: #FCB600"><!-- 3 --></div>
<div style="background-color: #BA932F"><!-- 4 --></div>
<div style="background-color: #A72A4E"><!-- 5 --></div>
<div style="background-color: #E20041"><!-- 6 --></div>
<div style="background-color: #F8B300"><!-- 7 --></div>
<div style="background-color: #009B8F"><!-- 8 --></div>
</div>