ui for create

.gitignore

@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+package-lock.json

package.json

@@ -8,12 +8,17 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
+    "bootstrap-vue": "^2.0.0-rc.11",
+    "node-sass": "^4.9.4",
+    "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.17"
   },
   "eslintConfig": {

src/App.vue

@@ -1,22 +1,14 @@
 <template>
   <div id="app">
-
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="nav">
+      <!-- <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link> -->
+    </div>
+    <router-view/>
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
+<style lang="scss">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -25,4 +17,10 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+body {
+  * {
+    font-family: "Open Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
+}
 </style>

src/main.js

@@ -1,8 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import store from './store'
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 
 Vue.config.productionTip = false
 
+Vue.use(BootstrapVue);
+
 new Vue({
+  router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/router.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'create',
+      component: () => import(/* webpackChunkName: "create" */ './views/Create.vue')
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+    }
+  ]
+})

src/store.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})

src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/views/Create.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="home">
+    <div class="dialog">
+      <div class="dialog-header">
+        <div class="tab" :class="(step === 1) ? 'active': ''">
+          Describe your dream
+        </div>
+        <div class="tab" :class="(step === 2) ? 'active': ''">
+          Enter dream info
+        </div>
+        <div class="tab" :class="(step === 3) ? 'active': ''">
+          Share?
+        </div>
+      </div>
+      <div class="dialog-content" v-if='step === 1'>
+
+        <b-form-textarea
+          v-model="description"
+          placeholder="Describe your dream in details"
+          :rows="4"
+          :max-rows="8">
+        </b-form-textarea>
+
+
+      </div>
+      <div class="dialog-content" v-if='step === 2'>
+        <label>
+          When you want it?
+
+          <b-form-select v-model="when" :options="whenOptions" />
+        </label>
+        <label>
+          How strong your wish?
+          <b-form-input :type="'number'" v-model="dreamPower"
+            placeholder='Enter value from 1 to 10' min="1" max="10"
+          ></b-form-input>
+
+        </label>
+      </div>
+      <div class="dialog-content" v-if='step === 3'>
+         <b-form-group label="Want to share with others?">
+          <b-form-radio-group v-model="share"
+                        :options="shareOptions"
+                        stacked>
+          </b-form-radio-group>
+        </b-form-group>
+      </div>
+      <div class="button-holder">
+
+        <b-button @click="step -= 1" v-if="step > 1" >
+            Prev
+        </b-button>
+        <div></div>
+        <b-button @click="step += 1" v-if="step < 3">
+            Next
+        </b-button>
+        <b-button @click="step += 1" v-else>
+            Complete
+        </b-button>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'home',
+  data() {
+    return {
+      step: 1,
+      description: '',
+      when: 'afteraweek',
+      dreamPower: 5,
+      whenOptions: [
+        { value: 'afteraweek', text: 'After a week' },
+        { value: 'afteramonth', text: 'After a month' },
+        { value: 'afterayear', text: 'After a year' },
+      ],
+      share: 'no',
+      shareOptions: [
+        { value: 'yes', text: 'Yes' },
+        { value: 'no', text: 'No' },
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.custom-control-label::before {
+  background-color: #a2c0df;
+}
+
+</style>
+
+<style lang="scss" scoped>
+
+
+$dlg-color: rgb(228, 228, 228);
+$border-radius: 15px;
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top:0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  .dialog {
+    background-color: $dlg-color;
+    width: 700px;
+    height: 350px;
+    border-radius: $border-radius;
+    box-shadow: 0 0 20px darken($dlg-color, 30);
+    display: flex;
+    flex-direction: column;
+
+    .dialog-header {
+      display: flex;
+      justify-content: space-between;
+      height: 60px;
+      .tab {
+        &:not(.active) {
+          background-color: darken($dlg-color, 30);
+          color: white;
+
+          &:last-of-type {
+            border-top-right-radius: $border-radius;
+          }
+
+          &:first-of-type {
+            border-top-left-radius: $border-radius;
+          }
+        }
+
+        &.active {
+          font-weight: bold;
+        }
+        width: 100%;
+        
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .dialog-content {
+      padding: 30px;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .button-holder {
+      display: flex;
+      justify-content: space-between;
+      padding: 30px;
+    }
+  }
+}
+
+
+</style>