1
0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-11-14 15:13:29 +01:00

applying variables into designs

This commit is contained in:
David Bomba 2023-02-02 07:06:23 +11:00
parent f9b112d098
commit bb1128cc03
12 changed files with 59 additions and 35 deletions

View File

@ -118,6 +118,7 @@ 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['$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')];
@ -182,7 +183,7 @@ class HtmlEngine
$data['$invoice.project'] = &$data['$project.name']; $data['$invoice.project'] = &$data['$project.name'];
} }
if($this->entity->status_id == 4) { if($this->entity->status_id == 4 && $this->settings->show_paid_stamp) {
$data['$status_logo'] = ['value' => '<div class="stamp is-paid"> ' . ctrans('texts.paid') .'</div>', 'label' => '']; $data['$status_logo'] = ['value' => '<div class="stamp is-paid"> ' . ctrans('texts.paid') .'</div>', 'label' => ''];
} }
@ -568,7 +569,7 @@ class HtmlEngine
$data['_rate2'] = ['value' => '', 'label' => ctrans('texts.tax')]; $data['_rate2'] = ['value' => '', 'label' => ctrans('texts.tax')];
$data['_rate3'] = ['value' => '', 'label' => ctrans('texts.tax')]; $data['_rate3'] = ['value' => '', 'label' => ctrans('texts.tax')];
$data['$font_size'] = ['value' => $this->settings->font_size . 'px', 'label' => '']; $data['$font_size'] = ['value' => $this->settings->font_size . 'px !important;', 'label' => ''];
$data['$font_name'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['name'], 'label' => '']; $data['$font_name'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['name'], 'label' => ''];
$data['$font_url'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['url'], 'label' => '']; $data['$font_url'] = ['value' => Helpers::resolveFont($this->settings->primary_font)['url'], 'label' => ''];

View File

@ -11,10 +11,14 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: $font_name, Helvetica, sans-serif; font-family: $font_name, Helvetica, sans-serif;
font-size: "$font_size"; font-size: $font_size
zoom: 80%; zoom: 80%;
} }
/*
body, table{
font-size: $font_size
}
*/
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -57,9 +61,9 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.company-logo { .company-logo {
height: 100%; /* height: 100%;*/
max-width: 100%; /* max-width: 100%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
object-fit: contain; object-fit: contain;
object-position: left center; object-position: left center;
} }
@ -77,10 +81,17 @@
} }
#client-details { #client-details {
margin: 2rem; padding-right:1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
line-height: var(--line-height); line-height: var(--line-height);
padding-left: 2rem;
}
#shipping-details {
display: $show_shipping_address;
flex-direction: column;
line-height: var(--line-height);
} }
#client-details > :first-child { #client-details > :first-child {
@ -89,10 +100,14 @@
.client-entity-wrapper { .client-entity-wrapper {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 2fr 1fr;
padding-left: 1rem; padding-left: 1rem;
} }
.client-wrapper-left-side {
display: flex;
}
.entity-details-wrapper { .entity-details-wrapper {
background-color: var(--primary-color); background-color: var(--primary-color);
padding: 1rem; padding: 1rem;
@ -114,7 +129,7 @@
min-width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
overflow-wrap: break-word; overflow-wrap: break-word;
margin-top: 3rem; margin-top: 1rem;
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -388,10 +403,16 @@
<td> <td>
<div class="client-entity-wrapper"> <div class="client-entity-wrapper">
<div class="client-wrapper-left-side"> <div class="client-wrapper-left-side">
<h4 class="entity-label">$entity_label</h4> <div>
<h4 class="entity-label" style="margin-top:0px; margin-bottom:10px;">$entity_label</h4>
<div id="client-details" cellspacing="0"></div> <div id="client-details" cellspacing="0"></div>
<div id="vendor-details" cellspacing="0"></div> <div id="vendor-details" cellspacing="0"></div>
</div> </div>
<div>
<h4 class="entity-label" style="opacity: 0; margin-top:0px; margin-bottom:10px;">&</h4>
<div id="shipping-details" cellspacing="0"></div>
</div>
</div>
<div class="entity-details-wrapper-right-side"> <div class="entity-details-wrapper-right-side">
<div class="entity-details-wrapper"> <div class="entity-details-wrapper">
@ -414,7 +435,7 @@
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table> <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
<div id="statement-aging-table-totals" data-ref="statement-totals"></div> <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0">$status_logo</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

View File

@ -40,8 +40,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
.header-container > span { .header-container > span {

View File

@ -46,8 +46,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
.client-and-entity-wrapper { .client-and-entity-wrapper {

View File

@ -113,7 +113,7 @@
} }
#shipping-details { #shipping-details {
display: flex; display: $show_shipping_address;
flex-direction: column; flex-direction: column;
line-height: var(--line-height); line-height: var(--line-height);
} }
@ -290,6 +290,8 @@
z-index:200 !important; z-index:200 !important;
position: fixed; position: fixed;
text-align: center; text-align: center;
float:right;
} }
.is-paid { .is-paid {
@ -387,7 +389,7 @@
<div id="statement-payment-table-totals" data-ref="statement-totals"></div> <div id="statement-payment-table-totals" data-ref="statement-totals"></div>
<table id="statement-aging-table" cellspacing="0" data-ref="table"></table> <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
<div id="statement-aging-table-totals" data-ref="statement-totals"></div> <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
<div id="table-totals" cellspacing="0"></div> <div id="table-totals" cellspacing="0">$status_logo</div>
</div> </div>
</td> </td>
</tr> </tr>
@ -416,7 +418,7 @@ $entity_images
'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', 'swiss-qr' 'client-details','vendor-details', 'swiss-qr','shipping-details'
]; ];
tables.forEach((tableIdentifier) => { tables.forEach((tableIdentifier) => {

View File

@ -41,8 +41,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
#entity-details p { margin-top: 5px; } #entity-details p { margin-top: 5px; }

View File

@ -31,8 +31,8 @@
} }
.company-logo { .company-logo {
max-width: 55%; /* max-width: 55%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: block; display: block;

View File

@ -80,8 +80,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
.entity-label { .entity-label {

View File

@ -84,8 +84,8 @@
} }
.company-logo { .company-logo {
max-width: 55%; /* max-width: 55%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
#client-details { #client-details {

View File

@ -93,7 +93,7 @@
} }
#shipping-details { #shipping-details {
display: flex; display: $show_shipping_address;
flex-direction: column; flex-direction: column;
padding-right: 30px; padding-right: 30px;
line-height: var(--line-height); line-height: var(--line-height);

View File

@ -62,8 +62,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
.contacts-wrapper { .contacts-wrapper {

View File

@ -67,8 +67,8 @@
} }
.company-logo { .company-logo {
max-width: 65%; /* max-width: 65%;*/
/* max-width: $company_logo_size;*/ max-width: $company_logo_size;
} }
.header-invoice-number { .header-invoice-number {