From 14c1a089d4bd2c4a184b69c731ccaaee4facbdb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Mon, 30 Dec 2019 11:50:27 +0300
Subject: [PATCH] Steps demo fixed

---
 src/views/steps/ConfirmationDemo.vue | 22 +++++++++++-----------
 src/views/steps/PaymentDemo.vue      | 12 ++++++------
 src/views/steps/PersonalDemo.vue     |  4 ++--
 src/views/steps/SeatDemo.vue         |  4 ++--
 src/views/steps/StepsDemo.vue        | 17 +++++++++++------
 5 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index db8f7e04e..88e2e16ea 100755
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -13,43 +13,43 @@
             </template>
             <template slot="content">
                 <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-3" style="max-width: 170px;">
+                    <div class="p-col-12 p-md-3">
                         <label class="wizard-input-label">Your Name</label>
                         <p>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-3" style="max-width: 75px;">
+                    <div class="p-col-12 p-md-1">
                         <label class="wizard-input-label">Your Age</label>
                         <p>{{formData.age ? formData.age : '-'}}</p>
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-3" style="max-width: 170px;">
+                    <div class="p-col-12 p-md-3">
                         <label class="wizard-input-label">Seat Class</label>
                         <p>{{formData.class ? formData.class : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-3" style="max-width: 130px;">
+                    <div class="p-col-12 p-md-3">
                         <label class="wizard-input-label">Vagon Number</label>
                         <p>{{formData.vagon ? formData.vagon : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-2" style="max-width: 53px;">
+                    <div class="p-col-12 p-md-1">
                         <label class="wizard-input-label">Seat</label>
                         <p>{{formData.seat ? formData.seat : '-'}}</p>
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content wizard-confirmation">
-                    <div class="p-col-12 p-md-4" style="max-width: 170px;">
+                    <div class="p-col-12 p-md-3">
                         <label class="wizard-input-label">Cardholder Name</label>
                         <p>{{formData.cardholderName ? formData.cardholderName : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-3" style="max-width: 160px;">
+                    <div class="p-col-12 p-md-3">
                         <label class="wizard-input-label">Cardholder Number</label>
                         <p>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-1" style="max-width: 53px;">
+                    <div class="p-col-12 p-md-1">
                         <label class="wizard-input-label">Date</label>
                         <p>{{formData.date ? formData.date : '-'}}</p>
                     </div>
-                    <div class="p-col-12 p-md-1" style="max-width: 53px;">
+                    <div class="p-col-12 p-md-1">
                         <label class="wizard-input-label">CVV</label>
                         <p>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</p>
                     </div>
@@ -58,10 +58,10 @@
             <template slot="footer">
                 <div class="p-grid p-fluid p-justify-between wizard-footer">
                     <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                        <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
                     </div>
                     <div class="p-col-6 wizard-footer-complete-button">
-                        <Button label="Complete" @click="complete()" />
+                        <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" />
                     </div>
                 </div>
             </template>
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
index 89a59e720..13919e6ba 100755
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@@ -18,21 +18,21 @@
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content">
-                    <div class="p-col-12 p-md-6" style="max-width: 391px;">
+                    <div class="p-col-12 p-md-8" style="max-width: 391px;">
                         <p class="wizard-input-header">Cardholder Name</p>
                         <InputText type="text" v-model="cardholderName" />
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content">
-                    <div class="p-col-12 p-md-4" style="max-width: 252px">
+                    <div class="p-col-12 p-md-5" style="max-width: 252px">
                         <p class="wizard-input-header">Cardholder Number</p>
                         <InputMask mask="9999-9999-9999-9999" v-model="cardholderNumber" />
                     </div>
-                    <div class="p-col-12 p-md-1" style="max-width: 69px">
+                    <div class="p-col-12 p-md-2" style="max-width: 69px">
                         <p class="wizard-input-header">Date</p>
                         <InputMask mask="99/99" v-model="date" />
                     </div>
-                    <div class="p-col-12 p-md-1" style="max-width: 69px">
+                    <div class="p-col-12 p-md-2" style="max-width: 69px">
                         <p class="wizard-input-header">CVV</p>
                         <InputMask mask="999" v-model="cvv" />
                     </div>
@@ -47,10 +47,10 @@
             <template slot="footer">
                 <div class="p-grid p-fluid p-justify-between wizard-footer" style="margin-top: .5em">
                     <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                        <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
                     </div>
                     <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage()" />
+                        <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right"/>
                     </div>
                 </div>
             </template>
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index 9013bac37..39818157c 100755
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -45,10 +45,10 @@
             <template slot="footer">
                 <div class="p-grid p-fluid p-justify-between wizard-footer">
                     <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" :disabled="true" class="disabled-button" />
+                        <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
                     </div>
                     <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage(!$v.$invalid)" />
+                        <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
                     </div>
                 </div>
             </template>
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index ca2adb918..812dbd2ea 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -42,10 +42,10 @@
             <template slot="footer">
                 <div class="p-grid p-fluid p-justify-between wizard-footer">
                     <div class="p-col-4 wizard-footer-back-button">
-                        <Button label="Back" class="disabled-button" @click="prevPage()" />
+                        <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
                     </div>
                     <div class="p-col-4 wizard-footer-next-button">
-                        <Button label="Next" @click="nextPage()" />
+                        <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                     </div>
                 </div>
             </template>
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index 18ee5529f..7c2cf1325 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -58,7 +58,7 @@ export default {
             this.$router.push(this.items[event.pageIndex - 1].to);
         },
         complete() {
-            this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear,' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.', life: 3000});
+            this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
         }
     }
 }
@@ -127,12 +127,10 @@ export default {
 
             p {
                 font-weight: 600;
-                color: #484848;
             }
             label.wizard-input-label {
                 opacity: 0.6;
                 font-size: 14px;
-                color: #484848;
             }
         }
     }
@@ -153,7 +151,7 @@ export default {
         margin-right:0;
 
         & button {
-            max-width: 59px;
+            max-width: 77px;
 
             &:disabled {
                 background-color: #a0a0a0;
@@ -167,12 +165,20 @@ export default {
         align-self: center;
         text-align: left;
         margin-left: .5em;
+
+        span.pi {
+            top: 54%;
+        }
     }
 
     .wizard-footer-next-button {
         align-self: center;
         text-align: right;
         margin-right: .5em;
+
+        span.pi {
+            top: 54%;
+        }
     }
 
     .wizard-footer-complete-button {
@@ -181,13 +187,12 @@ export default {
         margin-right: .5em;
 
         & button {
-            max-width: 88px;
+            max-width: 108px;
         }
     }
 
     .wizard-input-label {
         font-size: 12px;
-        color: #898989;
     }
 
     p.wizard-input-header {