mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
wip
This commit is contained in:
parent
d8c6d40cab
commit
6607442740
@ -433,6 +433,9 @@ 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', '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' => []],
|
||||
];
|
||||
|
@ -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")});';
|
||||
|
||||
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],
|
||||
]];
|
||||
}
|
||||
|
@ -341,7 +341,7 @@ class HtmlEngine
|
||||
|
||||
$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['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => ''];
|
||||
|
@ -28,6 +28,7 @@
|
||||
background-color: #2d2c2a;
|
||||
padding: 3rem;
|
||||
color: white;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
@ -186,37 +187,83 @@
|
||||
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>
|
||||
|
||||
|
||||
<div class="header-wrapper" id="header">
|
||||
<img class="company-logo" src="$company.logo" alt="$company.name logo"/>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
|
||||
<div 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>
|
||||
<table class="page-container">
|
||||
<thead class="page-header">
|
||||
<tr>
|
||||
<th class="page-header-cell">
|
||||
<div class="header-wrapper" id="header">
|
||||
<img class="company-logo" src="$company.logo" alt="$company.name logo"/>
|
||||
<div id="company-details"></div>
|
||||
<div id="company-address"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<table id="product-table" cellspacing="0"></table>
|
||||
<tfoot class="page-footer">
|
||||
<tr>
|
||||
<td class="page-footer-cell">
|
||||
<div class="footer-wrapper" id="footer">
|
||||
<div> <!-- #1 column --> </div>
|
||||
<div> <!-- #2 column --> </div>
|
||||
<div> <!-- #3 column --> </div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<table id="task-table" cellspacing="0"></table>
|
||||
<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 id="table-totals" cellspacing="0"></div>
|
||||
<div class="entity-details-wrapper-right-side">
|
||||
<div class="entity-details-wrapper">
|
||||
<table id="entity-details"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="delivery-note-table" cellspacing="0"></table>
|
||||
</div>
|
||||
<table id="product-table" cellspacing="0"></table>
|
||||
|
||||
<div id="footer">$entity_footer</div>
|
||||
<table id="task-table" cellspacing="0"></table>
|
||||
|
||||
<div id="table-totals" cellspacing="0"></div>
|
||||
|
||||
<table id="delivery-note-table" cellspacing="0"></table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -38,7 +38,7 @@
|
||||
#company-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #b1b1b1;
|
||||
color: #AAA9A9;
|
||||
}
|
||||
|
||||
#company-details > * {
|
||||
@ -69,19 +69,20 @@
|
||||
#client-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#client-details > * {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#client-details > span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
#client-details > p:nth-child(1) {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
#entity-details {
|
||||
background-color: var(--primary-color);
|
||||
padding: 0.8rem;
|
||||
padding: 1.2rem;
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
color: white;
|
||||
@ -93,6 +94,10 @@
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
#entity-details > tbody > tr > th:nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#product-table,
|
||||
#delivery-note-table,
|
||||
#task-table {
|
||||
@ -152,7 +157,7 @@
|
||||
#product-table > tbody > tr:nth-child(odd) > td,
|
||||
#delivery-note-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,
|
||||
|
@ -110,6 +110,12 @@
|
||||
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,
|
||||
#delivery-note-table > tbody > tr > td,
|
||||
#task-table > tbody > tr > td {
|
||||
@ -124,6 +130,12 @@
|
||||
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),
|
||||
#delivery-note-table > tbody > tr:nth-child(odd),
|
||||
#task-table > tbody > tr:nth-child(odd) {
|
||||
@ -138,8 +150,6 @@
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-top: .5rem;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
|
@ -38,6 +38,11 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[data-ref="company_details-company.name"] {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-wrapper #client-details > *:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -168,11 +173,6 @@
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#table-totals > *:last-child > * {
|
||||
border-top: 5px solid var(--primary-color);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#table-totals > * > :last-child {
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
|
@ -33,11 +33,6 @@
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.double-border {
|
||||
margin-top: 3px;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.client-entity-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1.8fr 1.2fr;
|
||||
@ -122,6 +117,7 @@
|
||||
#delivery-note-table > tbody > tr > td,
|
||||
#task-table > tbody > tr > td {
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@ -131,15 +127,6 @@
|
||||
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 {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
@ -228,8 +215,5 @@
|
||||
<table id="delivery-note-table" cellspacing="0"></table>
|
||||
</div>
|
||||
|
||||
<p class="thanks-label">$thanks_label!</p>
|
||||
<hr class="double-border"/>
|
||||
|
||||
<div id="footer">$entity_footer</div>
|
||||
|
||||
|
@ -72,11 +72,7 @@
|
||||
.entity-label {
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
margin: 2rem 1rem;
|
||||
}
|
||||
|
||||
.entity-details-wrapper {
|
||||
margin: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.entity-details-wrapper > * {
|
||||
@ -155,7 +151,6 @@
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
|
@ -29,11 +29,15 @@
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
padding: 3rem;
|
||||
min-width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.header-container .company-name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@ -54,7 +58,7 @@
|
||||
}
|
||||
|
||||
.logo-client-wrapper {
|
||||
margin: 3rem 1.5rem;
|
||||
margin: 3rem 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
}
|
||||
@ -69,7 +73,7 @@
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
margin: 3rem 1.5rem;
|
||||
margin: 3rem 2rem;
|
||||
}
|
||||
|
||||
#product-table,
|
||||
@ -99,7 +103,6 @@
|
||||
padding: 0.8rem;
|
||||
background-color: var(--secondary-color);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#product-table > thead > tr > th:last-child,
|
||||
@ -130,8 +133,9 @@
|
||||
.footer-wrapper {
|
||||
margin-top: 1rem;
|
||||
background-color: var(--primary-color);
|
||||
padding: 1rem;
|
||||
height: 160px;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -143,6 +147,7 @@
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
color: #fff4e9;
|
||||
max-height: 140px;
|
||||
}
|
||||
|
||||
#company-address,
|
||||
@ -165,9 +170,9 @@
|
||||
#table-totals {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 1.5rem;
|
||||
padding-top: .5rem;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
@ -194,22 +199,6 @@
|
||||
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 {
|
||||
page-break-after: always;
|
||||
min-width: 100%;
|
||||
@ -222,6 +211,10 @@
|
||||
tfoot.page-footer {
|
||||
display: table-footer-group;
|
||||
}
|
||||
|
||||
.page-content-cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="page-container">
|
||||
|
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: $global_margin;
|
||||
margin: -0.25cm !important;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -22,8 +22,10 @@
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
margin-top: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
|
||||
.header-wrapper .company-logo {
|
||||
@ -48,10 +50,10 @@
|
||||
}
|
||||
|
||||
.contacts-wrapper {
|
||||
margin-top: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.contacts-wrapper .contact-label {
|
||||
@ -91,7 +93,7 @@
|
||||
#product-table,
|
||||
#delivery-note-table,
|
||||
#task-table {
|
||||
margin-top: 3rem;
|
||||
padding: 3rem;
|
||||
/* margin-bottom: 200px; */
|
||||
min-width: 100%;
|
||||
table-layout: fixed;
|
||||
@ -142,6 +144,7 @@
|
||||
#product-table > tbody > tr > td,
|
||||
#delivery-note-table > tbody > tr > td,
|
||||
#task-table > tbody > tr > td {
|
||||
background-color: #F7F7F7;
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -165,9 +168,9 @@
|
||||
#table-totals {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
gap: 80px;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
#table-totals .totals-table-right-side>* {
|
||||
@ -202,9 +205,45 @@
|
||||
text-align: right;
|
||||
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>
|
||||
|
||||
<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 class="header-wrapper">
|
||||
@ -245,5 +284,16 @@
|
||||
<table id="delivery-note-table" cellspacing="0"></table>
|
||||
</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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user