refactor reponsive invoice and estimate

crater styles

resources/assets/js/views/estimates/Create.vue

@@ -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"

resources/assets/js/views/invoices/Create.vue

@@ -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%;">

resources/assets/sass/pages/estimates/create.scss

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

resources/assets/sass/pages/invoices/create.scss

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