Update designs

This commit is contained in:
David Bomba 2023-02-22 09:29:06 +11:00
parent a4626a6673
commit 1b58f525b9
4 changed files with 28 additions and 3 deletions

View File

@ -117,6 +117,8 @@ class HtmlEngine
$data['$global_margin'] = ['value' => '6.35mm', 'label' => '']; $data['$global_margin'] = ['value' => '6.35mm', 'label' => ''];
$data['$company_logo_size'] = ['value' => $this->resolveCompanyLogoSize(), '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'] = ['value' => $this->settings?->show_shipping_address ? 'flex' : 'none', 'label' => ''];
$data['$show_shipping_address_visibility'] = ['value' => $this->settings?->show_shipping_address ? 'visible' : 'hidden', 'label' => ''];
$data['$tax'] = ['value' => '', 'label' => ctrans('texts.tax')]; $data['$tax'] = ['value' => '', 'label' => ctrans('texts.tax')];
$data['$app_url'] = ['value' => $this->generateAppUrl(), 'label' => '']; $data['$app_url'] = ['value' => $this->generateAppUrl(), 'label' => ''];
$data['$from'] = ['value' => '', 'label' => ctrans('texts.from')]; $data['$from'] = ['value' => '', 'label' => ctrans('texts.from')];

View File

@ -89,6 +89,12 @@
color: var(--primary-color); color: var(--primary-color);
} }
#shipping-details {
display: $show_shipping_address;
flex-direction: column;
line-height: var(--line-height);
}
#entity-details { #entity-details {
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 1.2rem; padding: 1.2rem;
@ -382,6 +388,7 @@
<div class="client-and-entity-wrapper"> <div class="client-and-entity-wrapper">
<div id="client-details"></div> <div id="client-details"></div>
<div id="vendor-details"></div> <div id="vendor-details"></div>
<div id="shipping-details"></div>
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
<table id="entity-details" cellspacing="0" dir="$dir"></table> <table id="entity-details" cellspacing="0" dir="$dir"></table>
</div> </div>

View File

@ -45,7 +45,7 @@
.header-wrapper2 { .header-wrapper2 {
display: grid; display: grid;
grid-template-columns: 1fr 0.5fr; grid-template-columns: 1fr 1fr 1fr;
margin-top: 2rem; margin-top: 2rem;
min-width: 100%; min-width: 100%;
} }
@ -97,6 +97,12 @@
line-height: var(--line-height); line-height: var(--line-height);
} }
#shipping-details {
display: $show_shipping_address;
flex-direction: column;
line-height: var(--line-height);
}
[data-ref="table"] { [data-ref="table"] {
margin-top: 2rem; margin-top: 2rem;
min-width: 100%; min-width: 100%;
@ -368,6 +374,7 @@
<div class="header-wrapper2"> <div class="header-wrapper2">
<div id="client-details"></div> <div id="client-details"></div>
<div id="vendor-details"></div> <div id="vendor-details"></div>
<div id="shipping-details"></div>
<div> <div>
<p class="entity-label" style="font-size:32px; font-weight: bold; color:$primary_color;">$entity_label</p> <p class="entity-label" style="font-size:32px; font-weight: bold; color:$primary_color;">$entity_label</p>

View File

@ -40,14 +40,15 @@
.header-wrapper { .header-wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 0.3fr 0.3fr 0.3fr 0.3fr;
gap: 20px;
line-height: var(--line-height); line-height: var(--line-height);
} }
.company-logo { .company-logo {
/* max-width: 65%;*/ /* max-width: 65%;*/
max-width: $company_logo_size; max-width: $company_logo_size;
float:right;
} }
#entity-details p { margin-top: 5px; } #entity-details p { margin-top: 5px; }
@ -95,6 +96,12 @@
text-align: left; text-align: left;
} }
#shipping-details {
visibility: $show_shipping_address_visibility;
flex-direction: column;
line-height: var(--line-height);
}
.entity-label-wrapper #entity-details > tr, .entity-label-wrapper #entity-details > tr,
.entity-label-wrapper #entity-details th { .entity-label-wrapper #entity-details th {
font-weight: normal; font-weight: normal;
@ -327,6 +334,8 @@
<div class="header-wrapper"> <div class="header-wrapper">
<div id="client-details"></div> <div id="client-details"></div>
<div id="vendor-details"></div> <div id="vendor-details"></div>
<div id="shipping-details"></div>
<div class="company-info-wrapper"> <div class="company-info-wrapper">
<div id="company-details"></div> <div id="company-details"></div>
<div id="company-address"></div> <div id="company-address"></div>