fix invoice print layout and pdf
This commit is contained in:
Brett Whiteman
@@ -2,139 +2,217 @@
|
||||
|
||||
@section('title', trans_choice('general.invoices', 1) . ': ' . $invoice->invoice_number)
|
||||
|
||||
@push('css')
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
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;
|
||||
}
|
||||
.invoice-header {
|
||||
padding-bottom: 9px;
|
||||
margin: 10px 0 20px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.invoice-company {
|
||||
padding-left: 23px;
|
||||
}
|
||||
.invoice-logo {
|
||||
max-width: 430px;
|
||||
max-height: 120px;
|
||||
}
|
||||
.invoice-lines {
|
||||
margin: 30px 0;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.invoice-lines thead tr {
|
||||
background-color: #eee;
|
||||
}
|
||||
.invoice-lines tbody td {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.invoice-lines .item {
|
||||
width: 40%;
|
||||
}
|
||||
.invoice-lines .quantity {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
.invoice-lines .price {
|
||||
width: 20%:;
|
||||
text-align: right;
|
||||
}
|
||||
.invoice-lines .total {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
.notes {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<section class="invoice">
|
||||
<div class="row invoice-header">
|
||||
<div class="col-xs-7">
|
||||
@if ($logo)
|
||||
<img src="{{ $logo }}" class="invoice-logo" />
|
||||
<div class="row invoice-header">
|
||||
<div class="col-58">
|
||||
@if ($logo)
|
||||
<img src="{{ $logo }}" class="invoice-logo">
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-42">
|
||||
<div class="text invoice-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-58">
|
||||
<div class="text">
|
||||
{{ trans('invoices.bill_to') }}<br><br>
|
||||
<strong>{{ $invoice->customer_name }}</strong><br>
|
||||
{!! nl2br($invoice->customer_address) !!}<br>
|
||||
@if ($invoice->customer_tax_number)
|
||||
{{ trans('general.tax_number') }}: {{ $invoice->customer_tax_number }}<br>
|
||||
@endif
|
||||
<br>
|
||||
@if ($invoice->customer_phone)
|
||||
{{ $invoice->customer_phone }}<br>
|
||||
@endif
|
||||
{{ $invoice->customer_email }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-42">
|
||||
<div class="text">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ trans('invoices.invoice_number') }}:</th>
|
||||
<td class="text-right">{{ $invoice->invoice_number }}</td>
|
||||
</tr>
|
||||
@if ($invoice->order_number)
|
||||
<tr>
|
||||
<th>{{ trans('invoices.order_number') }}:</th>
|
||||
<td class="text-right">{{ $invoice->order_number }}</td>
|
||||
</tr>
|
||||
@endif
|
||||
<tr>
|
||||
<th>{{ trans('invoices.invoice_date') }}:</th>
|
||||
<td class="text-right">{{ Date::parse($invoice->invoiced_at)->format($date_format) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ trans('invoices.payment_due') }}:</th>
|
||||
<td class="text-right">{{ Date::parse($invoice->due_at)->format($date_format) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="invoice-lines">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="item">{{ trans_choice('general.items', 1) }}</th>
|
||||
<th class="quantity">{{ trans('invoices.quantity') }}</th>
|
||||
<th class="price">{{ trans('invoices.price') }}</th>
|
||||
<th class="total">{{ trans('invoices.total') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($invoice->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, $invoice->currency_code, true)</td>
|
||||
<td class="total">@money($item->total, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-58">
|
||||
@if ($invoice->notes)
|
||||
<table class="text" style="page-break-inside: avoid;">
|
||||
<tr><th>{{ trans_choice('general.notes', 2) }}</th></tr>
|
||||
<tr><td>{{ $invoice->notes }}</td></tr>
|
||||
</table>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-42">
|
||||
<table class="text" style="page-break-inside: avoid;">
|
||||
<tbody>
|
||||
@foreach ($invoice->totals as $total)
|
||||
@if ($total->code != 'total')
|
||||
<tr>
|
||||
<th>{{ trans($total->title) }}:</th>
|
||||
<td class="text-right">@money($total->amount, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@else
|
||||
@if ($invoice->paid)
|
||||
<tr class="text-success">
|
||||
<th>{{ trans('invoices.paid') }}:</th>
|
||||
<td class="text-right">- @money($invoice->paid, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@endif
|
||||
<tr>
|
||||
<th>{{ trans($total->name) }}:</th>
|
||||
<td class="text-right">@money($total->amount - $invoice->paid, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
{{ trans('invoices.bill_to') }}
|
||||
<address>
|
||||
<strong>{{ $invoice->customer_name }}</strong><br>
|
||||
{!! nl2br($invoice->customer_address) !!}<br>
|
||||
@if ($invoice->customer_tax_number)
|
||||
{{ trans('general.tax_number') }}: {{ $invoice->customer_tax_number }}<br>
|
||||
@endif
|
||||
<br>
|
||||
@if ($invoice->customer_phone)
|
||||
{{ $invoice->customer_phone }}<br>
|
||||
@endif
|
||||
{{ $invoice->customer_email }}
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="table-responsive">
|
||||
<table class="table no-border">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ trans('invoices.invoice_number') }}:</th>
|
||||
<td class="text-right">{{ $invoice->invoice_number }}</td>
|
||||
</tr>
|
||||
@if ($invoice->order_number)
|
||||
<tr>
|
||||
<th>{{ trans('invoices.order_number') }}:</th>
|
||||
<td class="text-right">{{ $invoice->order_number }}</td>
|
||||
</tr>
|
||||
@endif
|
||||
<tr>
|
||||
<th>{{ trans('invoices.invoice_date') }}:</th>
|
||||
<td class="text-right">{{ Date::parse($invoice->invoiced_at)->format($date_format) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ trans('invoices.payment_due') }}:</th>
|
||||
<td class="text-right">{{ Date::parse($invoice->due_at)->format($date_format) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 table-responsive">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ trans_choice('general.items', 1) }}</th>
|
||||
<th class="text-center">{{ trans('invoices.quantity') }}</th>
|
||||
<th class="text-right">{{ trans('invoices.price') }}</th>
|
||||
<th class="text-right">{{ trans('invoices.total') }}</th>
|
||||
</tr>
|
||||
@foreach($invoice->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, $invoice->currency_code, true)</td>
|
||||
<td class="text-right">@money($item->total, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
@if ($invoice->notes)
|
||||
<p class="lead">{{ trans_choice('general.notes', 2) }}</p>
|
||||
|
||||
<p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
|
||||
{{ $invoice->notes }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
@foreach ($invoice->totals as $total)
|
||||
@if ($total->code != 'total')
|
||||
<tr>
|
||||
<th>{{ trans($total->title) }}:</th>
|
||||
<td class="text-right">@money($total->amount, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@else
|
||||
@if ($invoice->paid)
|
||||
<tr class="text-success">
|
||||
<th>{{ trans('invoices.paid') }}:</th>
|
||||
<td class="text-right">- @money($invoice->paid, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@endif
|
||||
<tr>
|
||||
<th>{{ trans($total->name) }}:</th>
|
||||
<td class="text-right">@money($total->amount - $invoice->paid, $invoice->currency_code, true)</td>
|
||||
</tr>
|
||||
@endif
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@@ -4,11 +4,7 @@
|
||||
<body onload="window.print();">
|
||||
@stack('body_start')
|
||||
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="wrapper" style="margin-left: 0; page-break-after: always;">
|
||||
@yield('content')
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
@yield('content')
|
||||
|
||||
@stack('body_end')
|
||||
</body>
|
||||
|
||||
@@ -9,48 +9,10 @@
|
||||
|
||||
<title>@yield('title') - @setting('general.company_name')</title>
|
||||
|
||||
<!-- Bootstrap 3.3.6 -->
|
||||
<link rel="stylesheet" href="{{ asset('vendor/almasaeed2010/adminlte/bootstrap/css/bootstrap.min.css') }}">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="{{ asset('public/css/font-awesome.min.css') }}">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="{{ asset('public/css/ionicons.min.css') }}">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="{{ asset('vendor/almasaeed2010/adminlte/dist/css/AdminLTE.min.css') }}">
|
||||
<!-- AdminLTE Skins. Choose a skin from the css/skins
|
||||
folder instead of downloading all of them to reduce the load. -->
|
||||
<link rel="stylesheet" href="{{ asset('vendor/almasaeed2010/adminlte/dist/css/skins/_all-skins.min.css') }}">
|
||||
<!-- App style -->
|
||||
<link rel="stylesheet" href="{{ asset('public/css/app.css?v=' . version('short')) }}">
|
||||
|
||||
<style type="text/css">
|
||||
* {
|
||||
font-family: "DejaVu Sans Mono", monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@stack('css')
|
||||
|
||||
@stack('stylesheet')
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- jQuery 2.2.3 -->
|
||||
<script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>
|
||||
<!-- Bootstrap 3.3.6 -->
|
||||
<script src="{{ asset('vendor/almasaeed2010/adminlte/bootstrap/js/bootstrap.min.js') }}"></script>
|
||||
<!-- SlimScroll -->
|
||||
<script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/slimScroll/jquery.slimscroll.min.js') }}"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="{{ asset('vendor/almasaeed2010/adminlte/dist/js/app.min.js') }}"></script>
|
||||
|
||||
<script src="{{ asset('public/js/app.js?v=' . version('short')) }}"></script>
|
||||
|
||||
@stack('js')
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
Reference in New Issue
Block a user