Skip to content

Commit

Permalink
improved invoice and fixed bill print/pdf layouts #540
Browse files Browse the repository at this point in the history
  • Loading branch information
@denisdulici
denisdulici committed Oct 11, 2018
1 parent 856d444 commit a656c2e
Show file tree
Hide file tree
Showing 5 changed files with 240 additions and 266 deletions.
100 changes: 100 additions & 0 deletions public/css/invoice.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body {
margin: 0 10px;
padding: 0;
font-family: Arial, sans-serif;
color: #000;
}

table {
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

.row {
font-size: 0; /* prevent whitespace from stuffing up inline-block column layouts */
}

.col-58 {
display: inline-block;
width: 58%;
vertical-align: top;
}

.col-42 {
display: inline-block;
width: 42%;
vertical-align: top;
}

.text {
font-size: 16px;
}

.text-right {
text-align: right;
}

.text-center {
text-align: center;
}

.text-success {
color: #28a745;
}

.header {
padding-bottom: 9px;
margin: 10px 0 20px 0;
border-bottom: 1px solid #eee;
}

.company {
padding-left: 10px;
}

.logo {
max-width: 430px;
max-height: 120px;
}

.lines {
margin: 30px 0;
border-collapse: collapse;
table-layout: fixed;
border: 1px solid #ccc;
}

.lines thead tr {
background-color: #eee;
}

.lines tbody td {
border-bottom: 1px solid #ccc;
}

.lines .item {
width: 40%;
}

.lines .quantity {
width: 20%;
text-align: center;
}

.lines .price {
width: 20%;
text-align: right;
}

.lines .total {
width: 20%;
text-align: right;
}

.notes {
font-size: 14px;
}
243 changes: 118 additions & 125 deletions resources/views/expenses/bills/bill.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,138 +3,131 @@
@section('title', trans_choice('general.bills', 1) . ': ' . $bill->bill_number)

@section('content')
<section class="bill">
<div class="row invoice-header">
<div class="col-xs-7">
@if ($logo)
<img src="{{ $logo }}" class="invoice-logo" />
@endif
</div>
<div class="col-xs-5 invoice-company">
<address>
<strong>{{ setting('general.company_name') }}</strong><br>
{!! nl2br(setting('general.company_address')) !!}<br>
@if (setting('general.company_tax_number'))
{{ trans('general.tax_number') }}: {{ setting('general.company_tax_number') }}<br>
@endif
<br>
@if (setting('general.company_phone'))
{{ setting('general.company_phone') }}<br>
@endif
{{ setting('general.company_email') }}
</address>
</div>
<div class="row header">
<div class="col-58">
@if ($logo)
<img src="{{ $logo }}" class="logo" />
@endif
</div>
<div class="col-42">
<div class="text company">
<strong>{{ setting('general.company_name') }}</strong><br>
{!! nl2br(setting('general.company_address')) !!}<br>
@if (setting('general.company_tax_number'))
{{ trans('general.tax_number') }}: {{ setting('general.company_tax_number') }}<br>
@endif
<br>
@if (setting('general.company_phone'))
{{ setting('general.company_phone') }}<br>
@endif
{{ setting('general.company_email') }}
</div>
</div>
</div>

<div class="row">
<div class="col-xs-7">
{{ trans('bills.bill_from') }}
<address>
<strong>{{ $bill->vendor_name }}</strong><br>
{!! nl2br($bill->vendor_address) !!}<br>
@if ($bill->vendor_tax_number)
{{ trans('general.tax_number') }}: {{ $bill->vendor_tax_number }}<br>
@endif
<br>
@if ($bill->vendor_phone)
{{ $bill->vendor_phone }}<br>
@endif
{{ $bill->vendor_email }}
</address>
</div>
<div class="col-xs-5">
<div class="table-responsive">
<table class="table no-border">
<tbody>
<tr>
<th>{{ trans('bills.bill_number') }}:</th>
<td class="text-right">{{ $bill->bill_number }}</td>
</tr>
@if ($bill->order_number)
<tr>
<th>{{ trans('bills.order_number') }}:</th>
<td class="text-right">{{ $bill->order_number }}</td>
</tr>
@endif
<tr>
<th>{{ trans('bills.bill_date') }}:</th>
<td class="text-right">{{ Date::parse($bill->billed_at)->format($date_format) }}</td>
</tr>
<tr>
<th>{{ trans('bills.payment_due') }}:</th>
<td class="text-right">{{ Date::parse($bill->due_at)->format($date_format) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-58">
<div class="text">
{{ trans('bills.bill_from') }}<br><br>
<strong>{{ $bill->vendor_name }}</strong><br>
{!! nl2br($bill->vendor_address) !!}<br>
@if ($bill->vendor_tax_number)
{{ trans('general.tax_number') }}: {{ $bill->vendor_tax_number }}<br>
@endif
<br>
@if ($bill->vendor_phone)
{{ $bill->vendor_phone }}<br>
@endif
{{ $bill->vendor_email }}
</div>

<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped">
<tbody>
</div>
<div class="col-42">
<div class="text">
<table>
<tbody>
<tr>
<th>{{ trans_choice('general.items', 1) }}</th>
<th class="text-center">{{ trans('bills.quantity') }}</th>
<th class="text-right">{{ trans('bills.price') }}</th>
<th class="text-right">{{ trans('bills.total') }}</th>
<th>{{ trans('bills.bill_number') }}:</th>
<td class="text-right">{{ $bill->bill_number }}</td>
</tr>
@foreach($bill->items as $item)
<tr>
<td>
{{ $item->name }}
@if ($item->sku)
<br><small>{{ trans('items.sku') }}: {{ $item->sku }}</small>
@endif
</td>
<td class="text-center">{{ $item->quantity }}</td>
<td class="text-right">@money($item->price, $bill->currency_code, true)</td>
<td class="text-right">@money($item->total, $bill->currency_code, true)</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@if ($bill->order_number)
<tr>
<th>{{ trans('bills.order_number') }}:</th>
<td class="text-right">{{ $bill->order_number }}</td>
</tr>
@endif
<tr>
<th>{{ trans('bills.bill_date') }}:</th>
<td class="text-right">{{ Date::parse($bill->billed_at)->format($date_format) }}</td>
</tr>
<tr>
<th>{{ trans('bills.payment_due') }}:</th>
<td class="text-right">{{ Date::parse($bill->due_at)->format($date_format) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="row">
<div class="col-xs-7">
@if ($bill->notes)
<p class="lead">{{ trans_choice('general.notes', 2) }}:</p>
<table class="lines">
<thead>
<tr>
<th class="item">{{ trans_choice('general.items', 1) }}</th>
<th class="quantity">{{ trans('bills.quantity') }}</th>
<th class="price">{{ trans('bills.price') }}</th>
<th class="total">{{ trans('bills.total') }}</th>
</tr>
</thead>
<tbody>
@foreach($bill->items as $item)
<tr>
<td class="item">
{{ $item->name }}
@if ($item->sku)
<br><small>{{ trans('items.sku') }}: {{ $item->sku }}</small>
@endif
</td>
<td class="quantity">{{ $item->quantity }}</td>
<td class="price">@money($item->price, $bill->currency_code, true)</td>
<td class="total">@money($item->total, $bill->currency_code, true)</td>
</tr>
@endforeach
</tbody>
</table>

<p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
{{ $bill->notes }}
</p>
<div class="row">
<div class="col-58">
@if ($bill->notes)
<table class="text" style="page-break-inside: avoid;">
<tr><th>{{ trans_choice('general.notes', 2) }}</th></tr>
<tr><td>{{ $bill->notes }}</td></tr>
</table>
@endif
</div>
<div class="col-42">
<table class="text" style="page-break-inside: avoid;">
<tbody>
@foreach ($bill->totals as $total)
@if ($total->code != 'total')
<tr>
<th>{{ trans($total->title) }}:</th>
<td class="text-right">@money($total->amount, $bill->currency_code, true)</td>
</tr>
@else
@if ($bill->paid)
<tr class="text-success">
<th>{{ trans('invoices.paid') }}:</th>
<td class="text-right">- @money($bill->paid, $bill->currency_code, true)</td>
</tr>
@endif
<tr>
<th>{{ trans($total->name) }}:</th>
<td class="text-right">@money($total->amount - $bill->paid, $bill->currency_code, true)</td>
</tr>
@endif
</div>
<div class="col-xs-5">
<div class="table-responsive">
<table class="table">
<tbody>
@foreach($bill->totals as $total)
@if ($total->code != 'total')
<tr>
<th>{{ trans($total->title) }}:</th>
<td class="text-right">@money($total->amount, $bill->currency_code, true)</td>
</tr>
@else
@if ($bill->paid)
<tr class="text-success">
<th>{{ trans('invoices.paid') }}:</th>
<td class="text-right">- @money($bill->paid, $bill->currency_code, true)</td>
</tr>
@endif
<tr>
<th>{{ trans($total->name) }}:</th>
<td class="text-right">@money($total->amount - $bill->paid, $bill->currency_code, true)</td>
</tr>
@endif
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</section>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection

0 comments on commit a656c2e

Please sign in to comment.