Merge pull request #2084 from brkcvn/line-item-styling
Invoice and Bill 'Add an Item' area styling development
This commit is contained in:
Cüneyt Şentürk
GitHub
commit
04c303477a
70
public/css/custom.css
vendored
70
public/css/custom.css
vendored
@ -1632,3 +1632,73 @@ table .align-items-center td span.badge {
|
||||
display: contents !important;
|
||||
}
|
||||
/* Select Tag Fixed Content Finish */
|
||||
|
||||
/* Line item */
|
||||
.line-item-link-container {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.line-item-link {
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.line-item-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.line-item-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 242px;
|
||||
}
|
||||
|
||||
.line-item-content .form-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-item-content .badge {
|
||||
position: absolute !important;
|
||||
bottom: 12px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.line-item-content-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-item-content-right-price {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.line-item-content-right-delete {
|
||||
width:40px;
|
||||
padding-right: 1.5rem;
|
||||
/* padding-left: 5px !important; */
|
||||
}
|
||||
|
||||
.line-item-text {
|
||||
width: 54px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media not all and (min-resolution:.001dpcm) { @media {
|
||||
|
||||
.line-item-content {
|
||||
max-width:223px;
|
||||
}
|
||||
}}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.line-item-content {
|
||||
max-width: 133px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Line item */
|
||||
|
||||
@ -128,48 +128,35 @@
|
||||
</td>
|
||||
@stack('delete_td_end')
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="border-top-0" colspan="3">
|
||||
@stack('item_custom_fields')
|
||||
</td>
|
||||
|
||||
<td class="border-top-0 p-0" colspan="4">
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
|
||||
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
|
||||
<tr v-if="!row.add_tax || !row.add_discount">
|
||||
<td class="text-left border-0 p-0" style="display: block;">
|
||||
<div v-if="!row.add_tax || !row.add_discount" class="line-item-link-container position-relative">
|
||||
<div v-if="!row.add_tax || !row.add_discount" class="line-item-link position-absolute">
|
||||
<div class="text-left border-0 p-0 mr-5">
|
||||
<div>
|
||||
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">
|
||||
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-right border-0 p-0 pr-4" style="display: block;">
|
||||
</div>
|
||||
<div class="text-right border-0 p-0 pr-4">
|
||||
<div style="float:left;">
|
||||
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax">
|
||||
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="text-right total-column border-0 long-texts">
|
||||
</td>
|
||||
|
||||
<td class="w-1 border-0">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="row.add_discount">
|
||||
<td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
|
||||
<div>
|
||||
<div style="float: left; margin-top: 15px; margin-left: -65px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="row.add_discount" class="line-item-area pb-3">
|
||||
<div class="line-item-content">
|
||||
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; position: absolute; left: -65px;">
|
||||
{{ trans('invoices.discount') }}
|
||||
</div>
|
||||
|
||||
@stack('discount_input_start')
|
||||
<div class="form-group mb-0 w-100" style="display: inline-block; position: relative;">
|
||||
<div class="input-group input-group-merge mb-0 select-tax">
|
||||
@ -198,27 +185,22 @@
|
||||
</div>
|
||||
@stack('discount_input_end')
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="border-0 pb-0 text-right long-texts" :class="{'pb-2' : !row.add_tax}" style="width:231px;">
|
||||
<div>
|
||||
<div class="line-item-content-right">
|
||||
<div class="line-item-content-right-price long-texts text-right">
|
||||
{{ Form::moneyGroup('discount_amount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount_amount', 'data-item' => 'discount_amount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" :class="{'pb-2' : !row.add_tax}">
|
||||
<div class="line-item-content-right-delete pl-2">
|
||||
<button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
|
||||
<i class="far fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<tr v-for="(row_tax, row_tax_index) in row.tax_ids"
|
||||
<div class="line-item-area pb-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
|
||||
:index="row_tax_index">
|
||||
<td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;">
|
||||
<div style="position: relative;">
|
||||
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;">
|
||||
<div class="line-item-content">
|
||||
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
|
||||
{{ trans_choice('general.taxes', 1) }}
|
||||
</div>
|
||||
|
||||
@ -242,25 +224,21 @@
|
||||
></akaunting-select>
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td :class="{'pb-2' : !row.add_tax}" class="border-0 pb-0 text-right long-texts" style="width:231px;">
|
||||
<div>
|
||||
<div class="line-item-content-right">
|
||||
<div class="line-item-content-right-price long-texts text-right">
|
||||
{{ Form::moneyGroup('tax', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row_tax.price', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="pb-3 pl-2 align-bottom border-0" :class="{'pb-2' : !row.add_tax}" style="max-width: 40px;" >
|
||||
<div class="line-item-content-right-delete pl-2">
|
||||
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
|
||||
<i class="far fa-trash-alt"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-if="row.add_tax">
|
||||
<td colspan="2" class="pl-0 border-0" style="width: 42%;">
|
||||
<div style="position: relative;">
|
||||
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;" style="width:231px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="row.add_tax" class="line-item-area pb-3" :class="{'pt-2' : row.add_discount}">
|
||||
<div class="line-item-content">
|
||||
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
|
||||
{{ trans_choice('general.taxes', 1) }}
|
||||
</div>
|
||||
|
||||
@ -306,27 +284,25 @@
|
||||
></akaunting-select>
|
||||
@stack('taxes_input_end')
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="border-0 text-right long-texts align-middle;" style="width:231px;">
|
||||
<div class="line-item-content-right">
|
||||
<div class="line-item-content-right-price long-texts text-right">
|
||||
<div>
|
||||
__
|
||||
<div class="required disabled text-right input-price disabled-money">
|
||||
<input data-v-27d909ce="" type="tel" class="v-money form-control" name="discount_amount" placeholder="" disabled="disabled" value="__">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-item-content-right-delete pl-2">
|
||||
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
|
||||
<button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
|
||||
<i class="far fa-trash-alt"></i>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<col class="document-total-50">
|
||||
<col class="document-total-30">
|
||||
<col class="document-total-25">
|
||||
<col class="document-total-40-px">
|
||||
<col class="document-total-50-px">
|
||||
</colgroup>
|
||||
<tbody id="invoice-total-rows" class="table-padding-05">
|
||||
@stack('sub_total_td_start')
|
||||
@ -20,7 +20,7 @@
|
||||
{{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-bottom-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-bottom-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('sub_total_td_end')
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
{{ Form::moneyGroup('item_discount', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.item_discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('item_discount_td_end')
|
||||
@endif
|
||||
@ -92,7 +92,7 @@
|
||||
</div>
|
||||
{!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
|
||||
</td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('add_discount_td_end')
|
||||
@endif
|
||||
@ -109,7 +109,7 @@
|
||||
{{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'tax.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('tax_total_td_end')
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
{{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('grand_total_td_end')
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
:currency-rate="form.currency_rate"
|
||||
></akaunting-currency-conversion>
|
||||
</td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 40px"></td>
|
||||
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
|
||||
</tr>
|
||||
@stack('currency_conversion_td_end')
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user