finish wizard

Author: Di Wang

README.md

@@ -12,7 +12,7 @@ Material-design Dashboard
 4. ng serve -o (it will automatically open localhost:4200)
 
 ## Further Plan
-- [ ] Add Wizard Component
+- [x] Add Wizard Component
 - [ ] Responsive Sidebar
 - [ ] Consolidate form elements, like switch
 

src/app/dashboard/component/wizard/wizard.component.css

@@ -35,7 +35,7 @@
   color: #fff;
   top: -2px;
   left: -1vw;
-  width: 35%;
+  width: calc((100% - 260px) / 2);
   height: 114%;
   display: flex;
   justify-content: center;

src/app/dashboard/component/wizard/wizard.component.html

@@ -5,7 +5,7 @@
       <div class="wizard-panel card">
         <div class="wizard-header">
           <h3 class="text-center">Build Your Profile</h3>
-          <h5 class="text-center" style="margin-top: 5px">This information will let us know more about you.</h5>
+          <h5 class="text-center" style="margin-top: 5px; padding: 0 20px;">This information will let us know more about you.</h5>
         </div>
         <div class="wizard-navigation">
           <ul class="nav nav-pills">

src/app/dashboard/component/wizard/wizard.component.ts

@@ -20,12 +20,14 @@ export class WizardComponent implements OnInit, AfterViewInit {
     $(window).resize(() => {
       const screenWidth = document.body.clientWidth;
       if (screenWidth > 990) {
+        moveTab.style.width = 'calc((100% - 260px) / 2)';
         if (this.tabIndex === 1) {
           moveTab.style.left = '20vw';
         } else if (this.tabIndex === 2) {
-          moveTab.style.left = '41vw';
+          moveTab.style.left = '42vw';
         }
       } else {
+        moveTab.style.width = '34%';
         if (this.tabIndex === 1) {
           moveTab.style.left = '30vw';
         } else if (this.tabIndex === 2) {
@@ -78,7 +80,7 @@ export class WizardComponent implements OnInit, AfterViewInit {
       moveTab.innerHTML = 'Account';
     }else if (this.tabIndex === 1) {
       this.tabIndex++;
-      moveTab.style.left = screenWidth > 990 ? '41vw' : '61.5vw';
+      moveTab.style.left = screenWidth > 990 ? '42vw' : '61.5vw';
       nextBtn.style.visibility = 'hidden';
       moveTab.innerHTML = 'Address';
     }