Line item content styling edited

This commit is contained in:
Burak Civan 2021-06-04 15:09:54 +03:00
parent a42429bf12
commit ec16828f3c
2 changed files with 189 additions and 166 deletions

47
public/css/custom.css vendored
View File

@ -1632,3 +1632,50 @@ table .align-items-center td span.badge {
display: contents !important; display: contents !important;
} }
/* Select Tag Fixed Content Finish */ /* Select Tag Fixed Content Finish */
/* Line item */
.line-item-link {
display: flex;
padding-bottom:10px;
}
.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-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;
}
.line-item-text {
width: 54px;
}
@media (max-width: 1500px) {
@media not all and (min-resolution:.001dpcm) { @media {
.line-item-content {
max-width:223px;
}
}}
}
/* Line item */

View File

@ -128,48 +128,35 @@
</td> </td>
@stack('delete_td_end') @stack('delete_td_end')
</tr> </tr>
<tr> <tr>
<td class="border-top-0" colspan="3"> <td class="border-top-0" colspan="3">
@stack('item_custom_fields') @stack('item_custom_fields')
</td> </td>
<td class="border-top-0 p-0" colspan="4"> <td class="border-top-0 p-0" colspan="4">
<table class="w-100"> <table class="w-100">
<tbody> <tbody>
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both'])) @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<tr v-if="!row.add_tax || !row.add_discount"> <div v-if="!row.add_tax || !row.add_discount" class="line-item-link">
<td class="text-left border-0 p-0" style="display: block;"> <div class="text-left border-0 p-0 mr-5">
<div> <div>
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount"> <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')]) }} {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
</button> </button>
</div> </div>
</td> </div>
<div class="text-right border-0 p-0 pr-4">
<td class="text-right border-0 p-0 pr-4" style="display: block;">
<div style="float:left;"> <div style="float:left;">
<button type="button" class="btn btn-link btn-sm p-0" @click="onAddTax(index)" v-if="!row.add_tax"> <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)]) }} {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
</button> </button>
</div> </div>
</td> </div>
</div>
<td class="text-right total-column border-0 long-texts"> <div v-if="row.add_discount" class="line-item-area pb-3">
</td> <div class="line-item-content">
<div class="long-texts line-item-text" style="float: left; margin-top: 15px; position: absolute; left: -65px;">
<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;">
{{ trans('invoices.discount') }} {{ trans('invoices.discount') }}
</div> </div>
@stack('discount_input_start') @stack('discount_input_start')
<div class="form-group mb-0 w-100" style="display: inline-block; position: relative;"> <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"> <div class="input-group input-group-merge mb-0 select-tax">
@ -198,27 +185,24 @@
</div> </div>
@stack('discount_input_end') @stack('discount_input_end')
</div> </div>
</td> <div class="line-item-content-right">
<div class="line-item-content-right-price long-texts text-right">
<td class="border-0 pb-0 text-right long-texts" :class="{'pb-2' : !row.add_tax}" style="width:231px;">
<div>
{{ 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') }} {{ 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> </div>
</td> <div class="line-item-content-right-delete pl-2">
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" :class="{'pb-2' : !row.add_tax}">
<button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0"> <button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i> <i class="far fa-trash-alt"></i>
</button> </button>
</td> </div>
</div>
</tr> </tr>
</div>
@endif @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"> :index="row_tax_index">
<td colspan="2" class="pl-0 pb-0 border-0" :class="{'pb-2' : !row.add_tax}" style="width:42%;"> <div class="line-item-content">
<div style="position: relative;"> <div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;">
{{ trans_choice('general.taxes', 1) }} {{ trans_choice('general.taxes', 1) }}
</div> </div>
@ -242,25 +226,21 @@
></akaunting-select> ></akaunting-select>
@stack('taxes_input_end') @stack('taxes_input_end')
</div> </div>
</td>
<td :class="{'pb-2' : !row.add_tax}" class="border-0 pb-0 text-right long-texts" style="width:231px;"> <div class="line-item-content-right">
<div> <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') }} {{ 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> </div>
</td> <div class="line-item-content-right-delete pl-2">
<td class="pb-3 pl-2 align-bottom border-0" :class="{'pb-2' : !row.add_tax}" style="max-width: 40px;" >
<button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0"> <button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i> <i class="far fa-trash-alt"></i>
</button> </button>
</td> </div>
</tr> </div>
</div>
<tr v-if="row.add_tax"> <div v-if="row.add_tax" class="line-item-area pb-3" :class="{'pt-2' : row.add_discount}">
<td colspan="2" class="pl-0 border-0" style="width: 42%;"> <div class="line-item-content">
<div style="position: relative;"> <div class="long-texts line-item-text" style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -63px;">
<div style="float: left; margin-top: 15px; margin-right:2px; position: absolute; left: -33px;" style="width:231px;">
{{ trans_choice('general.taxes', 1) }} {{ trans_choice('general.taxes', 1) }}
</div> </div>
@ -306,23 +286,19 @@
></akaunting-select> ></akaunting-select>
@stack('taxes_input_end') @stack('taxes_input_end')
</div> </div>
</td> <div class="line-item-content-right">
<div class="line-item-content-right-price long-texts text-right">
<td class="border-0 text-right long-texts align-middle;" style="width:231px;">
<div>
__ __
</div> </div>
</td> <div class="line-item-content-right-delete pl-2">
<td class="pb-3 pl-2 align-bottom border-0" style="max-width:40px;" >
@if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both'])) @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"> <button type="button" @click="onDeleteTax(index, 999)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i> <i class="far fa-trash-alt"></i>
</button> </button>
@endif @endif
</td> </div>
</tr> </div>
</div>
</tbody> </tbody>
</table> </table>
</td> </td>