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:
parent
f9b112d098
commit
bb1128cc03
@ -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' => ''];
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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) => {
|
||||||
|
@ -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; }
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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);
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user