Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Show shipping address on Tech Design

Browse Source
This commit is contained in:
David Bomba 2023-02-22 15:32:51 +11:00
parent 0139fec85a
commit ac9532d1a1
1 changed files with 66 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
resources/views/pdf-designs/tech.html
View File

@ -43,31 +43,31 @@
/** End of global, standard CSS */ /** End of global, standard CSS */
.header-wrapper { .header-wrapper {
display: flex; display: grid;
flex-direction: column; grid-template-columns: auto 1fr auto;
grid-template-areas: "a b c";
grid-auto-columns: minmax(0, 5fr);
grid-auto-flow: column;
justify-content: space-between;
} }
.top-right-side-section { .top-right-side-section {
display: flex; display: inline-block;
flex-direction: row; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} white-space: nowrap;
vertical-align: top;
.top-right-side-section > * {
margin-left: 1.5rem;
} }
.logo-and-partial-entity-info { .logo-and-partial-entity-info {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; /* align-items: center; */
height: 120px; /* height: 120px; */
} }
.company-logo-wrapper { .company-logo-wrapper {
padding-bottom: 60px;
height: 5rem;
} }
.company-logo { .company-logo {
@ -89,7 +89,7 @@
} }
.hero-section { .hero-section {
margin-top: 50px; margin-top: 5px;
min-width: 100% !important; min-width: 100% !important;
background: url('$tech_hero_image'); /** If you want to replace the image, this is the place to do it. */ background: url('$tech_hero_image'); /** If you want to replace the image, this is the place to do it. */
-webkit-background-size: cover; -webkit-background-size: cover;
@ -114,6 +114,10 @@
justify-items: start; justify-items: start;
} }
.spacer {
display: flex;
}
.client-details-to-label { .client-details-to-label {
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
@ -121,11 +125,30 @@
margin-right: 10px; margin-right: 10px;
} }
.shipping-to-label {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
margin-right: 10px;
display: $show_shipping_address;
}
#shipping-details {
display: $show_shipping_address;
flex-direction: column;
white-space: nowrap;
}
[data-ref="shipping_address-label"] {
display: none;
}
#client-details, #client-details,
#company-details, #company-details,
#company-address { #company-address {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
white-space: nowrap;
} }
.company-details-wrapper { .company-details-wrapper {
@ -352,27 +375,33 @@
<tr> <tr>
<td> <td>
<div id="body"> <div id="body">
<div class="header-wrapper"> <div class="header-wrapper">
<div class="top-right-side-section"> <div class="logo-and-partial-entity-info">
<span class="header-invoice-number">$entity_number_label: $entity_number</span> <div class="company-logo-wrapper">
<span>$date_label: $date</span> <img class="company-logo" src="$company.logo" alt="$company.name logo">
</div>
<div class="logo-and-partial-entity-info">
<div class="company-logo-wrapper">
<img class="company-logo" src="$company.logo"
alt="$company.name logo">
</div>
<div class="top-right-side-section">
<div dir="$dir">
<span class="header-payment-due-label">$payment_due_label:</span>
<span>$payment_due</span>
</div> </div>
<div dir="$dir"> </div>
<span class="header-amount-due-label">$amount_due_label:</span> <div class="spacer"></div>
<span class="header-amount-due-value">$amount_due</span> <div class="top-right-side-section">
</div> <table style="white-space: nowrap;" cellspacing="10">
</div> <tr>
</div> <td>$entity_number_label:</td>
<td class="header-invoice-number">$entity_number</td>
</tr>
<tr>
<td>$date_label:</td>
<td>$date</td>
</tr>
<tr class="header-payment-due-label">
<td>$payment_due_label:</td>
<td>$payment_due</td>
</tr>
<tr>
<td class="header-amount-due-label">$amount_due_label:</td>
<td class="header-amount-due-value">$amount_due</td>
</tr>
</table>
</div>
</div> </div>
<div class="hero-section"> <div class="hero-section">
<div class="hero-contact-section"> <div class="hero-contact-section">
@ -380,6 +409,8 @@
<span class="client-details-to-label">$to_label:</span> <span class="client-details-to-label">$to_label:</span>
<div id="client-details"></div> <div id="client-details"></div>
<div id="vendor-details"></div> <div id="vendor-details"></div>
<span class="shipping-to-label">$shipping_label:</span>
<div id="shipping-details"></div>
</div> </div>
<div class="company-details"> <div class="company-details">
<span class="client-details-to-label">$from_label:</span> <span class="client-details-to-label">$from_label:</span>
@ -400,7 +431,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>
</div> </div>
</td> </td>