refactor estimate & invoice templates

This commit is contained in:
Mohit Panjwani
2021-04-12 14:40:59 +05:30
parent 63f7cdec82
commit cdaa1ff103
6 changed files with 176 additions and 152 deletions

View File

@ -389,22 +389,24 @@
<tr> <tr>
<td class="text-center"> <td class="text-center">
@if($logo) @if($logo)
<img class="header-logo" src="{{ $logo }}" alt="Company Logo"> <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
@else @else
@if($estimate->user->company) @if($estimate->user->company)
<h2 class="header-logo"> {{$estimate->user->company->name}} </h2> <h2 class="header-logo"> {{$estimate->user->company->name}} </h2>
@endif @endif
@endif @endif
</td> </td>
</tr> </tr>
</table> </table>
<hr class="header-bottom-divider" /> <hr class="header-bottom-divider" />
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="company-details-container"> <div class="company-details-container">
<div class="company-address-container company-address"> <div class="company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</div> </div>
<div class="estimate-details-container"> <div class="estimate-details-container">
<table class="estimate-details-table"> <table class="estimate-details-table">
<tr> <tr>
@ -423,39 +425,43 @@
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
<div class="customer-address-container"> <div class="customer-address-container">
@if($billing_address !== '</br>') @if($billing_address !== '</br>')
<div class="billing-address-container billing-address"> <div class="billing-address-container billing-address">
@if($billing_address) @if($billing_address)
@lang('pdf_bill_to') <b>@lang('pdf_bill_to')</b> <br>
{!! $billing_address !!} {!! $billing_address !!}
@endif @endif
</div> </div>
@endif @endif
@if($billing_address !== '</br>')
<div class="shipping-address-container shipping-address">
@else <div @if($billing_address !== '</br>') class="shipping-address-container shipping-address" @else class="shipping-address-container--left shipping-address" style="padding-left:30px;" @endif>
<div class="shipping-address-container--left shipping-address" style="padding-left:30px;">
@endif
@if($shipping_address) @if($shipping_address)
@lang('pdf_ship_to') <b>@lang('pdf_ship_to') </b> <br>
{!! $shipping_address !!} {!! $shipping_address !!}
@endif @endif
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div>
<div style="position:relative">
@include('app.pdf.estimate.partials.table')
</div>
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div>
</div> </div>
<div style="position:relative">
@include('app.pdf.estimate.partials.table')
</div>
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div>
</div>
</body> </body>
</html> </html>

View File

@ -94,7 +94,7 @@
/* -- Address -- */ /* -- Address -- */
.wrapper { .content-wrapper {
display: block; display: block;
margin-top: 60px; margin-top: 60px;
padding-bottom: 20px; padding-bottom: 20px;
@ -400,13 +400,14 @@
@if($logo) @if($logo)
<td width="60%" class="header-section-left"> <td width="60%" class="header-section-left">
<img class="header-logo" src="{{ $logo }}" alt="Company Logo"> <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
@else
<td width="60%" class="header-section-left" style="padding-top: 0px;">
@if($estimate->user->company)
<h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
@endif
@endif
</td> </td>
@else
<td width="60%" class="header-section-left" style="padding-top: 0px;">
@if($estimate->user->company)
<h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
@endif
</td>
@endif
<td width="40%" class="header-section-right estimate-details-container"> <td width="40%" class="header-section-right estimate-details-container">
<h1>@lang('pdf_estimate_label')</h1> <h1>@lang('pdf_estimate_label')</h1>
<h4>{{$estimate->estimate_number}}</h4> <h4>{{$estimate->estimate_number}}</h4>
@ -416,41 +417,41 @@
</table> </table>
</div> </div>
<hr> <hr>
<div class="wrapper"> <div class="content-wrapper">
<div class="address-container"> <div class="address-container">
<div class="company-address-container company-address"> <div class="company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</div> </div>
@if($shipping_address !== '</br>') @if($shipping_address !== '</br>')
<div class="shipping-address-container shipping-address"> <div class="shipping-address-container shipping-address">
@if($shipping_address) @if($shipping_address)
@lang('pdf_ship_to') <b>@lang('pdf_ship_to')</b> <br>
{!! $shipping_address !!} {!! $shipping_address !!}
@endif @endif
</div> </div>
@endif @endif
@if($shipping_address !== '</br>')
<div class="billing-address-container billing-address"> <div class="billing-address-container billing-address" @if($shipping_address === '</br>') style="float:right; margin-right:30px;" @endif>
@else
<div class="billing-address-container billing-address" style="float:right; margin-right:30px;">
@endif
@if($billing_address) @if($billing_address)
@lang('pdf_bill_to') <b>@lang('pdf_bill_to')</b> <br>
{!! $billing_address !!} {!! $billing_address !!}
@endif @endif
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div>
@include('app.pdf.estimate.partials.table')
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div>
</div> </div>
@include('app.pdf.estimate.partials.table')
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div>
</div>
</body> </body>
</html> </html>

View File

@ -354,7 +354,7 @@
<h1 class="header-logo"> {{$estimate->user->company->name}} </h1> <h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
@endif @endif
</td> </td>
<td width="50%" class="company-address-container company-address text-right"> <td width="50%" class="text-right company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</td> </td>
</tr> </tr>
@ -368,42 +368,41 @@
<div class="customer-address-container"> <div class="customer-address-container">
<div class="billing-address-container billing-address"> <div class="billing-address-container billing-address">
@if($billing_address) @if($billing_address)
@lang('pdf_bill_to') <b>@lang('pdf_bill_to')</b> <br>
{!! $billing_address !!} {!! $billing_address !!}
@endif @endif
</div> </div>
@if($estimate->user->billingaddress)
<div class="shipping-address-container shipping-address"> <div @if($estimate->user->billingaddress) class="shipping-address-container shipping-address" @else class="shipping-address-container--left shipping-address" @endif>
@else @if($shipping_address)
<div class="shipping-address-container--left shipping-address"> <b>@lang('pdf_ship_to')</b> <br>
@endif {!! $shipping_address !!}
@if($shipping_address) @endif
@lang('pdf_ship_to')
{!! $shipping_address !!}
@endif
</div>
<div style="clear: both;"></div>
</div> </div>
<div class="estimate-details-container">
<table>
<tr>
<td class="attribute-label">@lang('pdf_estimate_number')</td>
<td class="attribute-value"> &nbsp;{{$estimate->estimate_number}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_estimate_date') </td>
<td class="attribute-value"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_estimate_expire_date')</td>
<td class="attribute-value"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
</tr>
</table>
</div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
<div class="estimate-details-container">
<table>
<tr>
<td class="attribute-label">@lang('pdf_estimate_number')</td>
<td class="attribute-value"> &nbsp;{{$estimate->estimate_number}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_estimate_date') </td>
<td class="attribute-value"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_estimate_expire_date')</td>
<td class="attribute-value"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
@include('app.pdf.estimate.partials.table') @include('app.pdf.estimate.partials.table')
<div class="notes"> <div class="notes">
@if($notes) @if($notes)
<div class="notes-label"> <div class="notes-label">

View File

@ -116,6 +116,7 @@
padding-left: 40px; padding-left: 40px;
width: 160px; width: 160px;
} }
.shipping-address { .shipping-address {
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
@ -349,11 +350,13 @@
</table> </table>
<hr class="header-bottom-divider" style="border: 0.620315px solid #E8E8E8;" /> <hr class="header-bottom-divider" style="border: 0.620315px solid #E8E8E8;" />
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<div style="padding-top: 30px"> <div style="padding-top: 30px">
<div class="company-address-container company-address"> <div class="company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</div> </div>
<div class="invoice-details-container"> <div class="invoice-details-container">
<table> <table>
<tr> <tr>
@ -370,33 +373,40 @@
</tr> </tr>
</table> </table>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
<div class="billing-address-container billing-address"> <div class="billing-address-container billing-address">
@if($billing_address) @if($billing_address)
@lang('pdf_bill_to') <b>@lang('pdf_bill_to')</b> <br>
{!! $billing_address !!} {!! $billing_address !!}
@endif @endif
</div> </div>
<div class="shipping-address-container shipping-address" @if($billing_address !== '</br>') style="float:left;" @else style="display:block; float:left: padding-left: 0px;" @endif> <div class="shipping-address-container shipping-address" @if($billing_address !=='</br>' ) style="float:left;" @else style="display:block; float:left: padding-left: 0px;" @endif>
@if($shipping_address) @if($shipping_address)
@lang('pdf_ship_to') <b>@lang('pdf_ship_to')</b> <br>
{!! $shipping_address !!} {!! $shipping_address !!}
@endif @endif
</div> </div>
<div style="position: relative; clear: both;"> <div style="position: relative; clear: both;">
@include('app.pdf.invoice.partials.table') @include('app.pdf.invoice.partials.table')
</div> </div>
<div class="notes"> <div class="notes">
@if($notes) @if($notes)
<div class="notes-label"> <div class="notes-label">
@lang('pdf_notes') @lang('pdf_notes')
</div> </div>
{!! $notes !!} {!! $notes !!}
@endif @endif
</div> </div>
</div>
</body> </body>
</html> </html>

View File

@ -123,7 +123,7 @@
/* margin-top: 18px; */ /* margin-top: 18px; */
} }
.company-address{ .company-address {
font-size: 10px; font-size: 10px;
line-height: 15px; line-height: 15px;
color: #595959; color: #595959;
@ -156,7 +156,7 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
.billing-address{ .billing-address {
font-size: 10px; font-size: 10px;
line-height: 15px; line-height: 15px;
color: #595959; color: #595959;
@ -380,15 +380,17 @@
<table width="100%"> <table width="100%">
<tr> <tr>
@if($logo) @if($logo)
<td width="60%" class="header-section-left"> <td width="60%" class="header-section-left">
<img class="header-logo" src="{{ $logo }}" alt="Company Logo"> <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
@else </td>
<td width="60%" class="header-section-left" style="padding-top: 0px;"> @else
@if($invoice->user->company) <td width="60%" class="header-section-left" style="padding-top: 0px;">
<h1 class="header-logo"> {{$invoice->user->company->name}} </h1> @if($invoice->user->company)
@endif <h1 class="header-logo"> {{$invoice->user->company->name}} </h1>
@endif @endif
</td> </td>
@endif
<td width="40%" class="header-section-right invoice-details-container"> <td width="40%" class="header-section-right invoice-details-container">
<h1>@lang('pdf_invoice_label')</h1> <h1>@lang('pdf_invoice_label')</h1>
<h4>{{$invoice->invoice_number}}</h4> <h4>{{$invoice->invoice_number}}</h4>
@ -397,43 +399,47 @@
</tr> </tr>
</table> </table>
</div> </div>
<hr> <hr>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="address-container"> <div class="address-container">
<div class="company-address-container company-address"> <div class="company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</div> </div>
@if($shipping_address !== '</br>') @if($shipping_address !== '</br>')
<div class="shipping-address-container shipping-address"> <div class="shipping-address-container shipping-address">
@if($shipping_address) @if($shipping_address)
@lang('pdf_ship_to') <b>@lang('pdf_ship_to')</b> <br>
{!! $shipping_address !!} {!! $shipping_address !!}
@endif @endif
</div> </div>
@endif @endif
@if($shipping_address !== '</br>')
<div class="billing-address-container billing-address">
@else <div class="billing-address-container billing-address" @if($shipping_address === '</br>') style="float:right; margin-right:30px;" @endif>
<div class="billing-address-container billing-address" style="float:right; margin-right:30px;"> @if($billing_address)
@endif <b>@lang('pdf_bill_to')</b> <br>
@if($billing_address) {!! $billing_address !!}
@lang('pdf_bill_to')
{!! $billing_address !!}
@endif
</div>
<div style="clear: both;"></div>
</div>
@include('app.pdf.invoice.partials.table')
{{-- @include('app.pdf.invoice.partials.notes') --}}
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif @endif
</div> </div>
<div style="clear: both;"></div>
</div> </div>
@include('app.pdf.invoice.partials.table')
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div>
</div>
</body> </body>
</html> </html>

View File

@ -34,17 +34,20 @@
width: 100%; width: 100%;
padding: 0px 30px; padding: 0px 30px;
} }
.header-logo { .header-logo {
height: 50px; height: 50px;
text-transform: capitalize; text-transform: capitalize;
color: #817AE3; color: #817AE3;
padding-top: 0px; padding-top: 0px;
} }
.company-address-container { .company-address-container {
width: 50%; width: 50%;
padding-left: 80px; padding-left: 80px;
margin-bottom: 2px; margin-bottom: 2px;
} }
.company-address { .company-address {
margin-top: 12px; margin-top: 12px;
font-size: 12px; font-size: 12px;
@ -70,12 +73,12 @@
/* -- Shipping -- */ /* -- Shipping -- */
.shipping-address-container { .shipping-address-container {
float:right; float: right;
display: block; display: block;
} }
.shipping-address-container--left { .shipping-address-container--left {
float:left; float: left;
display: block; display: block;
padding-left: 0; padding-left: 0;
} }
@ -243,7 +246,7 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
/* -- Helpers -- */ /* -- Helpers -- */
.text-primary { .text-primary {
color: #5851DB; color: #5851DB;
@ -307,12 +310,12 @@
<tr> <tr>
<td width="50%" class="header-section-left"> <td width="50%" class="header-section-left">
@if($logo) @if($logo)
<img class="header-logo" src="{{ $logo }}" alt="Company Logo"> <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
@else @else
<h1 class="header-logo"> {{$invoice->user->company->name}} </h1> <h1 class="header-logo"> {{$invoice->user->company->name}} </h1>
@endif @endif
</td> </td>
<td width="50%" class="company-address-container company-address text-right"> <td width="50%" class="text-right company-address-container company-address">
{!! $company_address !!} {!! $company_address !!}
</td> </td>
</tr> </tr>
@ -326,50 +329,49 @@
<div class="customer-address-container"> <div class="customer-address-container">
<div class="billing-address-container billing-address"> <div class="billing-address-container billing-address">
@if($billing_address) @if($billing_address)
@lang('pdf_bill_to') <b>@lang('pdf_bill_to')</b> <br>
{!! $billing_address !!} {!! $billing_address !!}
@endif @endif
</div> </div>
@if($billing_address !== '</br>')
<div class="shipping-address-container shipping-address"> <div @if($billing_address !== '</br>') class="shipping-address-container shipping-address" @else class="shipping-address-container--left shipping-address" @endif>
@else
<div class="shipping-address-container--left shipping-address">
@endif
@if($shipping_address) @if($shipping_address)
@lang('pdf_ship_to') <b>@lang('pdf_ship_to')</b> <br>
{!! $shipping_address !!} {!! $shipping_address !!}
@endif @endif
</div>
<div style="clear: both;"></div>
</div>
<div class="invoice-details-container">
<table>
<tr>
<td class="attribute-label">@lang('pdf_invoice_number')</td>
<td class="attribute-value"> &nbsp;{{$invoice->invoice_number}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_invoice_date')</td>
<td class="attribute-value"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_invoice_due_date')</td>
<td class="attribute-value"> &nbsp;{{$invoice->formattedDueDate}}</td>
</tr>
</table>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
@include('app.pdf.invoice.partials.table')
<div class="notes"> <div class="invoice-details-container">
@if($notes) <table>
<div class="notes-label"> <tr>
@lang('pdf_notes') <td class="attribute-label">@lang('pdf_invoice_number')</td>
</div> <td class="attribute-value"> &nbsp;{{$invoice->invoice_number}}</td>
{!! $notes !!} </tr>
@endif <tr>
<td class="attribute-label">@lang('pdf_invoice_date')</td>
<td class="attribute-value"> &nbsp;{{$invoice->formattedInvoiceDate}}</td>
</tr>
<tr>
<td class="attribute-label">@lang('pdf_invoice_due_date')</td>
<td class="attribute-value"> &nbsp;{{$invoice->formattedDueDate}}</td>
</tr>
</table>
</div> </div>
<div style="clear: both;"></div>
</div>
@include('app.pdf.invoice.partials.table')
<div class="notes">
@if($notes)
<div class="notes-label">
@lang('pdf_notes')
</div>
{!! $notes !!}
@endif
</div> </div>
</div> </div>
</body> </body>