improved invoice and fixed bill print/pdf layouts #540

This commit is contained in:
denisdulici 2018-10-11 12:29:48 +03:00
parent 856d444f09
commit a656c2e0bb
5 changed files with 241 additions and 267 deletions

100
public/css/invoice.css vendored Normal file
View File

@ -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;
}

View File

@ -3,138 +3,131 @@
@section('title', trans_choice('general.bills', 1) . ': ' . $bill->bill_number) @section('title', trans_choice('general.bills', 1) . ': ' . $bill->bill_number)
@section('content') @section('content')
<section class="bill"> <div class="row header">
<div class="row invoice-header"> <div class="col-58">
<div class="col-xs-7"> @if ($logo)
@if ($logo) <img src="{{ $logo }}" class="logo" />
<img src="{{ $logo }}" class="invoice-logo" /> @endif
@endif </div>
</div> <div class="col-42">
<div class="col-xs-5 invoice-company"> <div class="text company">
<address> <strong>{{ setting('general.company_name') }}</strong><br>
<strong>{{ setting('general.company_name') }}</strong><br> {!! nl2br(setting('general.company_address')) !!}<br>
{!! nl2br(setting('general.company_address')) !!}<br> @if (setting('general.company_tax_number'))
@if (setting('general.company_tax_number')) {{ trans('general.tax_number') }}: {{ setting('general.company_tax_number') }}<br>
{{ trans('general.tax_number') }}: {{ setting('general.company_tax_number') }}<br> @endif
@endif <br>
<br> @if (setting('general.company_phone'))
@if (setting('general.company_phone')) {{ setting('general.company_phone') }}<br>
{{ setting('general.company_phone') }}<br> @endif
@endif {{ setting('general.company_email') }}
{{ setting('general.company_email') }}
</address>
</div>
</div> </div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xs-7"> <div class="col-58">
{{ trans('bills.bill_from') }} <div class="text">
<address> {{ trans('bills.bill_from') }}<br><br>
<strong>{{ $bill->vendor_name }}</strong><br> <strong>{{ $bill->vendor_name }}</strong><br>
{!! nl2br($bill->vendor_address) !!}<br> {!! nl2br($bill->vendor_address) !!}<br>
@if ($bill->vendor_tax_number) @if ($bill->vendor_tax_number)
{{ trans('general.tax_number') }}: {{ $bill->vendor_tax_number }}<br> {{ trans('general.tax_number') }}: {{ $bill->vendor_tax_number }}<br>
@endif @endif
<br> <br>
@if ($bill->vendor_phone) @if ($bill->vendor_phone)
{{ $bill->vendor_phone }}<br> {{ $bill->vendor_phone }}<br>
@endif @endif
{{ $bill->vendor_email }} {{ $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> </div>
</div>
<div class="row"> <div class="col-42">
<div class="col-xs-12 table-responsive"> <div class="text">
<table class="table table-striped"> <table>
<tbody> <tbody>
<tr> <tr>
<th>{{ trans_choice('general.items', 1) }}</th> <th>{{ trans('bills.bill_number') }}:</th>
<th class="text-center">{{ trans('bills.quantity') }}</th> <td class="text-right">{{ $bill->bill_number }}</td>
<th class="text-right">{{ trans('bills.price') }}</th>
<th class="text-right">{{ trans('bills.total') }}</th>
</tr> </tr>
@foreach($bill->items as $item) @if ($bill->order_number)
<tr> <tr>
<td> <th>{{ trans('bills.order_number') }}:</th>
{{ $item->name }} <td class="text-right">{{ $bill->order_number }}</td>
@if ($item->sku) </tr>
<br><small>{{ trans('items.sku') }}: {{ $item->sku }}</small> @endif
@endif <tr>
</td> <th>{{ trans('bills.bill_date') }}:</th>
<td class="text-center">{{ $item->quantity }}</td> <td class="text-right">{{ Date::parse($bill->billed_at)->format($date_format) }}</td>
<td class="text-right">@money($item->price, $bill->currency_code, true)</td> </tr>
<td class="text-right">@money($item->total, $bill->currency_code, true)</td> <tr>
</tr> <th>{{ trans('bills.payment_due') }}:</th>
@endforeach <td class="text-right">{{ Date::parse($bill->due_at)->format($date_format) }}</td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</div> </div>
</div>
</div>
<div class="row"> <table class="lines">
<div class="col-xs-7"> <thead>
@if ($bill->notes) <tr>
<p class="lead">{{ trans_choice('general.notes', 2) }}:</p> <th class="item">{{ trans_choice('general.items', 1) }}</th>
<th class="quantity">{{ trans('bills.quantity') }}</th>
<p class="text-muted well well-sm no-shadow" style="margin-top: 10px;"> <th class="price">{{ trans('bills.price') }}</th>
{{ $bill->notes }} <th class="total">{{ trans('bills.total') }}</th>
</p> </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 @endif
</div> </td>
<div class="col-xs-5"> <td class="quantity">{{ $item->quantity }}</td>
<div class="table-responsive"> <td class="price">@money($item->price, $bill->currency_code, true)</td>
<table class="table"> <td class="total">@money($item->total, $bill->currency_code, true)</td>
<tbody> </tr>
@foreach($bill->totals as $total) @endforeach
@if ($total->code != 'total') </tbody>
<tr> </table>
<th>{{ trans($total->title) }}:</th>
<td class="text-right">@money($total->amount, $bill->currency_code, true)</td> <div class="row">
</tr> <div class="col-58">
@else @if ($bill->notes)
@if ($bill->paid) <table class="text" style="page-break-inside: avoid;">
<tr class="text-success"> <tr><th>{{ trans_choice('general.notes', 2) }}</th></tr>
<th>{{ trans('invoices.paid') }}:</th> <tr><td>{{ $bill->notes }}</td></tr>
<td class="text-right">- @money($bill->paid, $bill->currency_code, true)</td> </table>
</tr> @endif
@endif </div>
<tr> <div class="col-42">
<th>{{ trans($total->name) }}:</th> <table class="text" style="page-break-inside: avoid;">
<td class="text-right">@money($total->amount - $bill->paid, $bill->currency_code, true)</td> <tbody>
</tr> @foreach ($bill->totals as $total)
@endif @if ($total->code != 'total')
@endforeach <tr>
</tbody> <th>{{ trans($total->title) }}:</th>
</table> <td class="text-right">@money($total->amount, $bill->currency_code, true)</td>
</div> </tr>
</div> @else
</div> @if ($bill->paid)
</section> <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>
@endsection @endsection

View File

@ -2,100 +2,15 @@
@section('title', trans_choice('general.invoices', 1) . ': ' . $invoice->invoice_number) @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('content')
<div class="row invoice-header"> <div class="row header">
<div class="col-58"> <div class="col-58">
@if ($logo) @if ($logo)
<img src="{{ $logo }}" class="invoice-logo"> <img src="{{ $logo }}" class="logo" />
@endif @endif
</div> </div>
<div class="col-42"> <div class="col-42">
<div class="text invoice-company"> <div class="text company">
<strong>{{ setting('general.company_name') }}</strong><br> <strong>{{ setting('general.company_name') }}</strong><br>
{!! nl2br(setting('general.company_address')) !!}<br> {!! nl2br(setting('general.company_address')) !!}<br>
@if (setting('general.company_tax_number')) @if (setting('general.company_tax_number'))
@ -154,7 +69,7 @@
</div> </div>
</div> </div>
<table class="invoice-lines"> <table class="lines">
<thead> <thead>
<tr> <tr>
<th class="item">{{ trans_choice('general.items', 1) }}</th> <th class="item">{{ trans_choice('general.items', 1) }}</th>
@ -165,17 +80,17 @@
</thead> </thead>
<tbody> <tbody>
@foreach($invoice->items as $item) @foreach($invoice->items as $item)
<tr> <tr>
<td class="item"> <td class="item">
{{ $item->name }} {{ $item->name }}
@if ($item->sku) @if ($item->sku)
<br><small>{{ trans('items.sku') }}: {{ $item->sku }}</small> <br><small>{{ trans('items.sku') }}: {{ $item->sku }}</small>
@endif @endif
</td> </td>
<td class="quantity">{{ $item->quantity }}</td> <td class="quantity">{{ $item->quantity }}</td>
<td class="price">@money($item->price, $invoice->currency_code, true)</td> <td class="price">@money($item->price, $invoice->currency_code, true)</td>
<td class="total">@money($item->total, $invoice->currency_code, true)</td> <td class="total">@money($item->total, $invoice->currency_code, true)</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
@ -183,10 +98,10 @@
<div class="row"> <div class="row">
<div class="col-58"> <div class="col-58">
@if ($invoice->notes) @if ($invoice->notes)
<table class="text" style="page-break-inside: avoid;"> <table class="text" style="page-break-inside: avoid;">
<tr><th>{{ trans_choice('general.notes', 2) }}</th></tr> <tr><th>{{ trans_choice('general.notes', 2) }}</th></tr>
<tr><td>{{ $invoice->notes }}</td></tr> <tr><td>{{ $invoice->notes }}</td></tr>
</table> </table>
@endif @endif
</div> </div>
<div class="col-42"> <div class="col-42">

View File

@ -9,48 +9,12 @@
<title>@yield('title') - @setting('general.company_name')</title> <title>@yield('title') - @setting('general.company_name')</title>
<!-- Bootstrap 3.3.6 --> <link rel="stylesheet" href="{{ asset('public/css/invoice.css?v=' . version('short')) }}">
<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('css')
@stack('stylesheet') @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('js')
@stack('scripts') @stack('scripts')

View File

@ -9,6 +9,8 @@
<title>@yield('title') - @setting('general.company_name')</title> <title>@yield('title') - @setting('general.company_name')</title>
<link rel="stylesheet" href="{{ asset('public/css/invoice.css?v=' . version('short')) }}">
@stack('css') @stack('css')
@stack('stylesheet') @stack('stylesheet')