Display shipping address for playful design

This commit is contained in:
David Bomba 2023-02-22 14:05:07 +11:00
parent 28917e8bcf
commit 8f002a23a1
2 changed files with 76 additions and 34 deletions

View File

@ -117,6 +117,7 @@ class HtmlEngine
$data['$global_margin'] = ['value' => '6.35mm', 'label' => ''];
$data['$company_logo_size'] = ['value' => $this->resolveCompanyLogoSize(), 'label' => ''];
$data['$show_shipping_address'] = ['value' => $this->settings?->show_shipping_address ? 'flex' : 'none', 'label' => ''];
$data['$show_shipping_address_block'] = ['value' => $this->settings?->show_shipping_address ? 'block' : 'none', 'label' => ''];
$data['$show_shipping_address_visibility'] = ['value' => $this->settings?->show_shipping_address ? 'visible' : 'hidden', 'label' => ''];
$data['$tax'] = ['value' => '', 'label' => ctrans('texts.tax')];

View File

@ -72,9 +72,16 @@
.contacts-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
/* grid-template-columns: 1fr 1fr; */
gap: 20px;
padding: 1rem 0rem 0rem 2rem;
grid-template-columns: auto auto;
grid-template-areas: "a b";
grid-auto-columns: auto;
grid-auto-flow: column;
justify-content: space-between;
}
.contacts-wrapper .contact-label {
@ -83,6 +90,13 @@
margin-left: 1rem;
}
.contacts-wrapper .shipping-label {
font-weight: bold;
color: var(--primary-color);
margin-left: 1rem;
display: $show_shipping_address;
}
.contacts-wrapper #company-address,
.contacts-wrapper #company-details,
.contacts-wrapper #client-details {
@ -91,6 +105,12 @@
margin-bottom: 0.5rem;
}
.contacts-wrapper #shipping-details {
display: $show_shipping_address;
flex-direction: column;
margin-bottom: 0.5rem;
}
.contacts-wrapper .company-info {
margin-top: 1rem;
padding: 1rem;
@ -106,11 +126,23 @@
border-top: 1px solid var(--primary-color);
}
.contacts-wrapper #shipping-details {
margin-top: 1rem;
padding: 1rem;
border-top: 1px solid var(--primary-color);
}
.contact-wrapper-left-side,
.contact-wrapper-right-side {
border-bottom: 1px solid var(--primary-color);
}
.shipping-wrapper-right-side {
border-bottom: 1px solid var(--primary-color);
display: $show_shipping_address_block;
}
[data-ref="table"] {
padding-left: 2rem;
padding-right: 0rem;
@ -299,6 +331,10 @@
overflow-wrap: break-word;
}
[data-ref="shipping_address-label"] {
display: none;
}
.stamp {
transform: rotate(12deg);
color: #555;
@ -387,38 +423,43 @@
<tbody>
<tr>
<td>
<div class="header-wrapper">
<div>
<img class="company-logo" src="$company.logo" alt="$company.name logo">
</div>
<div class="entity-details-wrapper">
<table id="entity-details" cellspacing="0" dir="$dir"></table>
</div>
</div>
<div class="contacts-wrapper">
<div class="contact-wrapper-left-side">
<p class="contact-label">$from_label:</p>
<div class="company-info">
<div id="company-details"></div>
<div id="company-address"></div>
</div>
</div>
<div class="contact-wrapper-right-side">
<p class="contact-label">$to_label:</p>
<div id="client-details"></div>
<div id="vendor-details"></div>
</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-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"></div>
<div class="header-wrapper">
<div>
<img class="company-logo" src="$company.logo" alt="$company.name logo">
</div>
<div class="entity-details-wrapper">
<table id="entity-details" cellspacing="0" dir="$dir"></table>
</div>
</div>
<div class="contacts-wrapper">
<div class="contact-wrapper-left-side">
<p class="contact-label">$from_label:</p>
<div class="company-info">
<div id="company-details"></div>
<div id="company-address"></div>
</div>
</div>
<div class="contact-wrapper-right-side">
<p class="contact-label">$to_label:</p>
<div id="client-details"></div>
<div id="vendor-details"></div>
</div>
<div class="shipping-wrapper-right-side">
<p class="shipping-label">$shipping_label:</p>
<div id="shipping-details"></div>
</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-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>
</td>
</tr>
</tbody>