TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-30 21:21:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor reponsive invoice and estimate

Browse Source 
crater styles
This commit is contained in:
Jay_Makwana
2019-11-15 20:55:25 +05:30
parent 1567d9fd37
commit a2b6130150
4 changed files with 60 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
resources/assets/js/views/estimates/Create.vue
View File

@ -11,13 +11,14 @@
<li v-else class="breadcrumb-item">{{ $t('estimates.new_estimate') }}</li>
</ol>
<div class="page-actions row">
<a v-if="$route.name === 'estimates.edit'" :href="`/estimates/pdf/${newEstimate.unique_hash}`" target="_blank" class="mr-3 base-button btn btn-outline-primary default-size" outline color="theme">
<a v-if="$route.name === 'estimates.edit'" :href="`/estimates/pdf/${newEstimate.unique_hash}`" target="_blank" class="mr-3 base-button btn btn-outline-primary default-size invoice-action-btn" outline color="theme">
{{ $t('general.view_pdf') }}
</a>
<base-button
:loading="isLoading"
:disabled="isLoading"
icon="save"
class="invoice-action-btn"
color="theme"
type="submit">
{{ $t('estimates.save_estimate') }}
@ -25,7 +26,7 @@
</div>
</div>
<div class="row estimate-input-group">
<div class="col-md-5">
<div class="col-md-5 estimate-customer-container">
<div
v-if="selectedCustomer"
class="show-customer"
@ -101,7 +102,7 @@
</div>
<div class="col estimate-input">
<div class="row mb-3">
<div class="col">
<div class="col collapse-input">
<label>{{ $t('reports.estimates.estimate_date') }}<span class="text-danger"> * </span></label>
<base-date-picker
v-model="newEstimate.estimate_date"
@ -111,7 +112,7 @@
/>
<span v-if="$v.newEstimate.estimate_date.$error && !$v.newEstimate.estimate_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col">
<div class="col collapse-input">
<label>{{ $t('estimates.due_date') }}<span class="text-danger"> * </span></label>
<base-date-picker
v-model="newEstimate.expiry_date"
@ -124,7 +125,7 @@
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="col collapse-input">
<label>{{ $t('estimates.estimate_number') }}<span class="text-danger"> * </span></label>
<base-input
:invalid="$v.newEstimate.estimate_number.$error"
@ -135,7 +136,7 @@
/>
<span v-show="$v.newEstimate.estimate_number.$error && !$v.newEstimate.estimate_number.required" class="text-danger mt-1"> {{ $tc('estimates.errors.required') }} </span>
</div>
<div class="col">
<div class="col collapse-input">
<label>{{ $t('estimates.ref_number') }}</label>
<base-input
v-model="newEstimate.reference_number"

14
resources/assets/js/views/invoices/Create.vue
View File

@ -11,7 +11,7 @@
<li v-else class="breadcrumb-item">{{ $t('invoices.new_invoice') }}</li>
</ol>
<div class="page-actions row">
<a v-if="$route.name === 'invoices.edit'" :href="`/invoices/pdf/${newInvoice.unique_hash}`" target="_blank" class="mr-3 base-button btn btn-outline-primary default-size" outline color="theme">
<a v-if="$route.name === 'invoices.edit'" :href="`/invoices/pdf/${newInvoice.unique_hash}`" target="_blank" class="mr-3 invoice-action-btn base-button btn btn-outline-primary default-size" outline color="theme">
{{ $t('general.view_pdf') }}
</a>
<base-button
@ -19,13 +19,14 @@
:disabled="isLoading"
icon="save"
color="theme"
class="invoice-action-btn"
type="submit">
{{ $t('invoices.save_invoice') }}
</base-button>
</div>
</div>
<div class="row invoice-input-group">
<div class="col-md-5">
<div class="col-md-5 invoice-customer-container">
<div
v-if="selectedCustomer" class="show-customer">
<div class="row px-2 mt-1">
@ -101,7 +102,7 @@
</div>
<div class="col invoice-input">
<div class="row mb-3">
<div class="col">
<div class="col collapse-input">
<label>{{ $tc('invoices.invoice',1) }} {{ $t('invoices.date') }}<span class="text-danger"> * </span></label>
<base-date-picker
v-model="newInvoice.invoice_date"
@ -111,7 +112,7 @@
/>
<span v-if="$v.newInvoice.invoice_date.$error && !$v.newInvoice.invoice_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col">
<div class="col collapse-input">
<label>{{ $t('invoices.due_date') }}<span class="text-danger"> * </span></label>
<base-date-picker
v-model="newInvoice.due_date"
@ -124,7 +125,7 @@
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="col collapse-input">
<label>{{ $t('invoices.invoice_number') }}<span class="text-danger"> * </span></label>
<base-input
:invalid="$v.newInvoice.invoice_number.$error"
@ -135,7 +136,7 @@
/>
<span v-show="$v.newInvoice.invoice_number.$error && !$v.newInvoice.invoice_number.required" class="text-danger mt-1"> {{ $tc('validation.required') }} </span>
</div>
<div class="col">
<div class="col collapse-input">
<label>{{ $t('invoices.ref_number') }}</label>
<base-input
v-model="newInvoice.reference_number"
@ -149,7 +150,6 @@
</div>
</div>
</div>
<table class="item-table">
<colgroup>
<col style="width: 40%;">

22
resources/assets/sass/pages/estimates/create.scss vendored
View File

@ -545,6 +545,27 @@
}
@media (max-width: $x-small-breakpoint) {
.page-header {
margin-bottom: 13px;
.invoice-action-btn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 15px;
margin-right: 0px !important;
}
}
.estimate-customer-container {
padding-right: 0px;
}
.collapse-input {
padding-right: 0px;
}
.page-actions {
position: relative;
-webkit-transform: none;
@ -582,6 +603,7 @@
}
.estimate-total {
min-width: 346px;
margin-top: 25px;
}

24
resources/assets/sass/pages/invoices/create.scss vendored
View File

@ -25,6 +25,7 @@
margin: 0 0 0 14px;
}
}
}
.invoice-input {
@ -549,6 +550,28 @@
}
@media (max-width: $x-small-breakpoint) {
.page-header {
margin-bottom: 13px;
.invoice-action-btn {
width: 100%;
display: flex;
justify-content: center;
margin-top: 15px;
margin-right: 0px !important;
}
}
.invoice-customer-container {
padding-right: 0px;
}
.collapse-input {
padding-right: 0px;
}
.page-actions {
position: relative;
-webkit-transform: none;
@ -586,6 +609,7 @@
}
.invoice-total {
min-width: 346px;
margin-top: 25px;
}