From 28bba62530743d09d169e7923be3ce7f56e58ada Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 30 Dec 2019 12:52:43 +0300
Subject: [PATCH] Steps refactor

---
 src/assets/styles/app.scss           |  10 +-
 src/views/steps/ConfirmationDemo.vue |   2 +-
 src/views/steps/PersonalDemo.vue     |   8 +-
 src/views/steps/SeatDemo.vue         |   4 +-
 src/views/steps/StepsDemo.vue        |  24 ++--
 src/views/steps/StepsDoc.vue         | 159 +--------------------------
 6 files changed, 28 insertions(+), 179 deletions(-)

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index b653bdf29..9c5d4c317 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -491,6 +491,10 @@ body {
             &.implementation-charts {
                 background-color: #FFFFFF;
             }
+
+            .demo-footer {
+                background-color: #ededed;
+            }
         }
 
         &.content-submenu {
@@ -619,7 +623,7 @@ body {
                         @include border-radius-top(3px);
                             
                         a {
-                            font-weight: 700;
+                            font-weight: 400;
                             color: #34495e;
                             text-shadow: none;
                             height: inherit;
@@ -1412,5 +1416,9 @@ pre[class*="language-"] code {
         > h4 {
             color: #dedede !important
         }
+
+        .demo-footer {
+            background-color: #535353 !important;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index 88e2e16ea..cbe39c499 100755
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -56,7 +56,7 @@
                 </div>
             </template>
             <template slot="footer">
-                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
                     <div class="p-col-4 wizard-footer-back-button">
                         <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
                     </div>
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index 39818157c..52138dcbe 100755
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -24,13 +24,11 @@
                 </div>
                 <div class="p-grid p-fluid wizard-content">
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                        <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" />
-                        <label class="wizard-input-label">First</label>
+                        <InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname"/>
                         <ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px">Firstname is required.</ValidationMessage>
                     </div>
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
-                        <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" />
-                        <label class="wizard-input-label">Last</label>
+                        <InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname" />
                         <ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px">Lastname is required.</ValidationMessage>
                     </div>
                 </div>
@@ -43,7 +41,7 @@
                 </div>
             </template>
             <template slot="footer">
-                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
                     <div class="p-col-4 wizard-footer-back-button">
                         <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
                     </div>
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 812dbd2ea..ba5ad008f 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -25,11 +25,9 @@
                 <div class="p-grid p-fluid wizard-content">
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
                         <Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
-                        <label class="wizard-input-label">Class</label>
                     </div>
                     <div class="p-col-12 p-md-3" style="max-width: 176px;">
                         <Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
-                        <label class="wizard-input-label">Vagon</label>
                     </div>
                 </div>
                 <div class="p-grid p-fluid wizard-content">
@@ -40,7 +38,7 @@
                 </div>
             </template>
             <template slot="footer">
-                <div class="p-grid p-fluid p-justify-between wizard-footer">
+                <div class="p-grid p-fluid p-justify-between wizard-footer demo-footer">
                     <div class="p-col-4 wizard-footer-back-button">
                         <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
                     </div>
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index 7c2cf1325..c85791435 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -82,9 +82,10 @@ export default {
 
     .p-card-body {
         padding: 0;
-        padding-bottom: 0;
-        padding-top: 0;
-        border-radius: 2px;
+    }
+
+    .p-card-content {
+        padding: 1em;
     }
 
     .card-header-message {
@@ -145,19 +146,12 @@ export default {
     }
 
     .wizard-footer {
-        background-color: #ededed;
         margin-top: 2em;
         margin-left: 0;
         margin-right:0;
 
-        & button {
-            max-width: 77px;
-
-            &:disabled {
-                background-color: #a0a0a0;
-                border: none;
-                cursor: unset;
-            }
+        button {
+            max-width: 75px;
         }
     }
 
@@ -167,7 +161,7 @@ export default {
         margin-left: .5em;
 
         span.pi {
-            top: 54%;
+            margin-top: -.4em;
         }
     }
 
@@ -177,7 +171,7 @@ export default {
         margin-right: .5em;
 
         span.pi {
-            top: 54%;
+            margin-top: -.4em;
         }
     }
 
@@ -186,7 +180,7 @@ export default {
         text-align: right;
         margin-right: .5em;
 
-        & button {
+        button {
             max-width: 108px;
         }
     }
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index cb3223813..08f8848ce 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -169,152 +169,7 @@ export default {
     }
 }
 </CodeHighlight>
-<CodeHighlight lang="css">
-/deep/ .stepsdemo-content  {
-    h1 {
-        font-weight: 400;
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 24px;
-        margin-top: 1em;
-    }
 
-    i {
-        vertical-align: middle;
-        font-size: 2em;
-        margin-top: .3em;
-    }
-
-    .p-card-body {
-        padding: 0;
-        padding-bottom: 0;
-        padding-top: 0;
-        border-radius: 2px;
-    }
-
-    .card-header-message {
-        font-size: 14px;
-        color: #ffffff;
-    }
-
-    .wizard-header {
-        background-color: #057ad8;
-        margin:0;
-        max-height: 48px;
-    }
-
-    .wizard-header-content {
-        align-self: center;
-        padding: 0px;
-        font-weight: 600;
-        margin-left: 1em;
-    }
-
-    .wizard-header-steps {
-        align-self: center;
-        text-align: center;
-        max-width:90px;
-        padding: 0px;
-        font-size: 14px;
-        font-weight: normal;
-    }
-
-    .wizard-content {
-        padding-left: 1em;
-        margin-top: .1em;
-
-        p {
-            margin: 0;
-        }
-
-        &.wizard-confirmation {
-            box-shadow: 0 25px 0 -23px #ededed;
-
-            p {
-                font-weight: 600;
-            }
-            label.wizard-input-label {
-                opacity: 0.6;
-                font-size: 14px;
-            }
-        }
-    }
-
-    .wizard-content-summary {
-        margin-bottom: .1em;
-        padding-left: 1em;
-
-        p {
-            margin: 0;
-        }
-    }
-
-    .wizard-footer {
-        background-color: #ededed;
-        margin-top: 2em;
-        margin-left: 0;
-        margin-right:0;
-
-        & button {
-            max-width: 77px;
-
-            &:disabled {
-                background-color: #a0a0a0;
-                border: none;
-                cursor: unset;
-            }
-        }
-    }
-
-    .wizard-footer-back-button {
-        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 {
-        align-self: center;
-        text-align: right;
-        margin-right: .5em;
-
-        & button {
-            max-width: 108px;
-        }
-    }
-
-    .wizard-input-label {
-        font-size: 12px;
-    }
-
-    p.wizard-input-header {
-        margin-bottom: 7px;
-    }
-
-    @media screen and (max-width: 768px) {
-        .wizard-content {
-            padding-right: 1em;
-        }
-
-        .wizard-header {
-            max-height: 66px;
-        }
-    }
-}
-</CodeHighlight>
 			</TabPanel>
             <TabPanel header="Personal">
 <CodeHighlight>
@@ -344,13 +199,11 @@ export default {
             &lt;/div&gt;
             &lt;div class="p-grid p-fluid wizard-content"&gt;
                 &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" /&gt;
-                    &lt;label class="wizard-input-label"&gt;First&lt;/label&gt;
+                    &lt;InputText v-model="$v.firstname.$model" :class="{'p-error':$v.firstname.$invalid && submitted}" placeholder="Firstname" /&gt;
                     &lt;ValidationMessage v-show="$v.firstname.$invalid && submitted" style="font-size: 12px"&gt;Firstname is required.&lt;/ValidationMessage&gt;
                 &lt;/div&gt;
                 &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
-                    &lt;InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" /&gt;
-                    &lt;label class="wizard-input-label"&gt;Last&lt;/label&gt;
+                    &lt;InputText v-model="$v.lastname.$model" :class="{'p-error':$v.lastname.$invalid && submitted}" placeholder="Lastname"/&gt;
                     &lt;ValidationMessage v-show="$v.lastname.$invalid && submitted" style="font-size: 12px"&gt;Lastname is required.&lt;/ValidationMessage&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
@@ -363,7 +216,7 @@ export default {
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt;
+            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
                 &lt;div class="p-col-4 wizard-footer-back-button"&gt;
                     &lt;Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" /&gt;
                 &lt;/div&gt;
@@ -443,11 +296,9 @@ export default {
             &lt;div class="p-grid p-fluid wizard-content"&gt;
                 &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
                     &lt;Dropdown v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" /&gt;
-                    &lt;label class="wizard-input-label"&gt;Class&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="p-col-12 p-md-3" style="max-width: 176px;"&gt;
                     &lt;Dropdown v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" /&gt;
-                    &lt;label class="wizard-input-label"&gt;Vagon&lt;/label&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="p-grid p-fluid wizard-content"&gt;
@@ -458,7 +309,7 @@ export default {
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt;
+            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
                 &lt;div class="p-col-4 wizard-footer-back-button"&gt;
                     &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
                 &lt;/div&gt;
@@ -661,7 +512,7 @@ export default {
             &lt;/div&gt;
         &lt;/template&gt;
         &lt;template slot="footer"&gt;
-            &lt;div class="p-grid p-fluid p-justify-between wizard-footer"&gt;
+            &lt;div class="p-grid p-fluid p-justify-between wizard-footer demo-footer"&gt;
                 &lt;div class="p-col-4 wizard-footer-back-button"&gt;
                     &lt;Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" /&gt;
                 &lt;/div&gt;