From 13d2b17be0d1a42ae7e370c7d75f0be2182c7b8b Mon Sep 17 00:00:00 2001
From: Bogdan Kovtun <nemo48@yandex.ru>
Date: Fri, 27 Apr 2018 19:07:36 +0300
Subject: [PATCH] Add SelectAge page. Add router links

---
 package.json                     |   3 +-
 src/App.vue                      |   2 +-
 src/layouts/NavigationLayout.vue |   4 +-
 src/main.js                      |   3 +
 src/pages/Cards.vue              |  49 +++++---------
 src/pages/Courses.vue            |  31 +++++----
 src/pages/Details.vue            |  17 +++--
 src/pages/SelectAge.vue          | 109 +++++++++++++++++++++++++++++++
 src/pages/SelectCharacter.vue    |   2 +-
 src/router/index.js              |   6 ++
 yarn.lock                        |  95 ++++++++++++++++++++++++++-
 11 files changed, 265 insertions(+), 56 deletions(-)
 create mode 100644 src/pages/SelectAge.vue

diff --git a/package.json b/package.json
index 5d12cba..3ded4ba 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "lodash": "^4.17.10",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vue-touch": "next"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/src/App.vue b/src/App.vue
index 9c7ec93..53659b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,7 +35,7 @@ h1 {
 
 .container {
   max-width: 375px;
-  padding: 0 30px;
+  padding: 0 20px;
   margin: 0 auto;
 }
 </style>
diff --git a/src/layouts/NavigationLayout.vue b/src/layouts/NavigationLayout.vue
index 9096aef..204ecb1 100644
--- a/src/layouts/NavigationLayout.vue
+++ b/src/layouts/NavigationLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container" :style="{paddingTop: topImage ? '20px' : '0'}" >
     <img v-if="topImage" :src="topImage" class="top">
-    <NavigationControls :back="true" :menu="true" />
+    <NavigationControls :back="back" :menu="menu" />
     <slot />
   </div>
 </template>
@@ -9,7 +9,7 @@
 <script>
 import NavigationControls from '@/components/NavigationControls'
 export default {
-  props: ['topImage'],
+  props: ['topImage', 'back', 'menu'],
   components: {
     NavigationControls
   }
diff --git a/src/main.js b/src/main.js
index 417390e..6b14328 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,12 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import VueTouch from 'vue-touch'
 
 Vue.config.productionTip = false
 
+Vue.use(VueTouch, { name: 'v-touch' })
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/src/pages/Cards.vue b/src/pages/Cards.vue
index 49ce38f..a0ad71b 100644
--- a/src/pages/Cards.vue
+++ b/src/pages/Cards.vue
@@ -1,28 +1,26 @@
 <template>
-  <div class="container">
-    <img src="@/assets/top.png" class="top">
-    <div class="navigation">
-      <img src="@/assets/back.png" alt="">
-      <img src="@/assets/big_dots.png" alt="">
-    </div>
-    <h1>Cavity Prevention</h1>
-    <Switcher :menuNames='menuNames'/>
-    <div class="cards">
-      <div class="content">
-        <div class="title">Introduction</div>
-        <div class="article">Article</div>
-        <div class="text">Lorem ipsum dolor sit amet,consectetur adipiscing elit sed eiusmod tempor</div>
+  <NavigationLayout :topImage="require('@/assets/top.png')" :back="true" :menu="true">
+    <div>
+      <h1>Cavity Prevention</h1>
+      <Switcher :menuNames='menuNames'/>
+      <div class="cards">
+        <div class="content">
+          <div class="title">Introduction</div>
+          <div class="article">Article</div>
+          <div class="text">Lorem ipsum dolor sit amet,consectetur adipiscing elit sed eiusmod tempor</div>
+        </div>
+        <img src='@/assets/card.png' class="card main">
+        <img src='@/assets/card.png' class="card one">
+        <img src='@/assets/card.png' class="card two">
+        <img src='@/assets/card.png' class="card three">
       </div>
-      <img src='@/assets/card.png' class="card main">
-      <img src='@/assets/card.png' class="card one">
-      <img src='@/assets/card.png' class="card two">
-      <img src='@/assets/card.png' class="card three">
     </div>
-  </div>
+  </NavigationLayout>
 </template>
 
 
 <script>
+import NavigationLayout from '@/layouts/NavigationLayout'
 import Switcher from '@/components/CoursesSwitcher'
 export default {
   data: () => ({
@@ -33,24 +31,13 @@ export default {
     ]
   }),
   components: {
-    Switcher
+    Switcher,
+    NavigationLayout
   }
 }
 </script>
 
 <style scoped lang='scss'>
-  .container {
-    position: relative; 
-    padding-top: 20px;
-
-    .top {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: auto;
-      height: 13px;
-    }
-  }
 
   .navigation {
     display: flex;
diff --git a/src/pages/Courses.vue b/src/pages/Courses.vue
index 0b1e3fe..6fc563f 100644
--- a/src/pages/Courses.vue
+++ b/src/pages/Courses.vue
@@ -5,7 +5,7 @@
     </div>
     <Switcher :menuNames="menuNames" />
     <div class="courses_wrapper">
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/1.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -13,7 +13,7 @@
         </div>
         <div class="progress_bar"></div>
       </div>
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/2.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -21,7 +21,7 @@
         </div>
         <div class="progress_bar"></div>
       </div>
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/3.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -29,7 +29,7 @@
         </div>
         <div class="progress_bar"></div>
       </div>
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/4.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -37,7 +37,7 @@
         </div>
         <div class="progress_bar"></div>
       </div>
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/5.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -45,7 +45,7 @@
         </div>
         <div class="complete">Complete</div>
       </div>
-      <div class="course">
+      <div @click="navigateToCourse" class="course">
         <div class="course_top">
           <img class="icon" src="@/assets/Courses/6.png" alt="">
           <img class="dotts" src="@/assets/Courses/dotts.png" alt="">
@@ -60,13 +60,18 @@
 <script>
 import Switcher from '@/components/CoursesSwitcher'
   export default {
-  data: () => ({
-    menuNames: [
-      'All',
-      'Ongoing',
-      'Completed'
-    ]
-  }),
+    data: () => ({
+      menuNames: [
+        'All',
+        'Ongoing',
+        'Completed'
+      ]
+    }),
+    methods: {
+      navigateToCourse() {
+        this.$router.push('/details')
+      }
+    },
     components: {
       Switcher
     }
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index bd3eb74..877c069 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -22,17 +22,24 @@
           <div class="name">Lessons</div>
         </div>
       </div>
-      <img class="download" src="@/assets/download_btn.png" alt="btn">
-    </div>
-    <div class="swipe_up">
-      <img class="arrow" src="@/assets/swipe_arrow.png" />
-      <p>Swipe up to see course contents</p>
+      <img @click="$router.go(-1)" class="download" src="@/assets/download_btn.png" alt="btn">
     </div>
+    <v-touch @swipeup="handleSwipeTop">
+      <div class="swipe_up">
+        <img class="arrow" src="@/assets/swipe_arrow.png" />
+        <p>Swipe up to see course contents</p>
+      </div>
+    </v-touch>
   </div>
 </template>
 
 <script>
 export default {
+  methods: {
+    handleSwipeTop () {
+      this.$router.push('/cards')
+    }
+  }
 }
 </script>
 
diff --git a/src/pages/SelectAge.vue b/src/pages/SelectAge.vue
new file mode 100644
index 0000000..49a9c0c
--- /dev/null
+++ b/src/pages/SelectAge.vue
@@ -0,0 +1,109 @@
+<template>
+  <NavigationLayout :back="true" :menu="true">
+    <h1> Age Group </h1>
+    <div class="content">
+      <div
+        class="avatar"
+        :style="{ backgroundImage: `url(${require('@/assets/characters/character-girl-3.png')}` }"
+      >
+      </div>
+      <div class="age-buttons">
+        <div
+          :class="getButtonClassName(1)"
+          @click="handleButtonClick(1)"
+        >
+          3-5 years
+        </div>
+        <div
+          :class="getButtonClassName(2)"
+          @click="handleButtonClick(2)"
+        >
+          5-7 years
+        </div>
+        <div
+          :class="getButtonClassName(3)"
+          @click="handleButtonClick(3)"
+        >
+          7-10 years
+        </div>
+        <div
+          :class="getButtonClassName(4)"
+          @click="handleButtonClick(4)"
+        >
+          10+ years
+        </div>
+      </div>
+      <ComponentButton @click="$router.push('/courses')">Continue </ComponentButton>
+    </div>
+  </NavigationLayout>
+</template>
+
+<script>
+import NavigationLayout from '@/layouts/NavigationLayout'
+import ComponentButton from '@/components/Button'
+
+export default {
+  data () {
+    return {
+      selected: null
+    }
+  },
+  methods: {
+    getButtonClassName (number) {
+      return ['age-button', number === this.selected ? 'age-button--selected' : '']
+    },
+     handleButtonClick (number) {
+       this.selected = number
+     }
+  },
+  components: {
+    NavigationLayout,
+    ComponentButton
+  }
+}
+</script>
+
+<style>
+.content {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.avatar {
+  margin: 30px 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  box-shadow: rgba(255, 255, 255, 0.12 ) 0 0 0 8px;
+  width: 130px;
+  height: 130px;
+  background-position: 50% 15px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  background-color: #FFEBAE;
+}
+
+.age-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 40px;
+}
+
+.age-button {
+  font-family: 'Gotham';
+  text-transform: uppercase;
+  background-color: #2E4A6E;
+  border-radius: 50px;
+  padding: 29px 22px 18px 22px;
+  width: 150px;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 30px;
+  color: #FFFFFF;
+}
+
+.age-button--selected {
+  background-color: #278ab5;
+}
+</style>
diff --git a/src/pages/SelectCharacter.vue b/src/pages/SelectCharacter.vue
index 3956b7d..076bcb5 100644
--- a/src/pages/SelectCharacter.vue
+++ b/src/pages/SelectCharacter.vue
@@ -1,5 +1,5 @@
 <template>
-  <NavigationLayout>
+  <NavigationLayout :back="true" :menu="true">
     <h1>Select A Character</h1>
     <div>
       <div
diff --git a/src/router/index.js b/src/router/index.js
index 2b950ba..ccdb117 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,7 @@ import Details from '@/pages/Details'
 import Cards from '@/pages/Cards'
 import Login from '@/pages/Login'
 import SelectCharacter from '@/pages/SelectCharacter'
+import SelectAge from '@/pages/SelectAge'
 
 Vue.use(Router)
 
@@ -40,6 +41,11 @@ export default new Router({
       path: '/select-character',
       name: 'SelectCharacter',
       component: SelectCharacter
+    },
+    {
+      path: '/select-age',
+      name: 'SelectAge',
+      component: SelectAge
     }
   ]
 })
diff --git a/yarn.lock b/yarn.lock
index a84e7f2..b25c8e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,7 +19,11 @@ acorn-dynamic-import@^2.0.0:
   dependencies:
     acorn "^4.0.3"
 
-acorn@^4.0.3:
+acorn@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+
+acorn@^4.0.1, acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
@@ -986,6 +990,12 @@ brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
+browser-resolve@^1.11.0:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  dependencies:
+    resolve "1.1.7"
+
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
@@ -1072,7 +1082,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^1.0.0:
+builtin-modules@^1.0.0, builtin-modules@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -2068,6 +2078,14 @@ estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+
+estree-walker@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -2588,6 +2606,10 @@ gzip-size@^4.1.0:
     duplexer "^0.1.1"
     pify "^3.0.0"
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
@@ -3467,6 +3489,18 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
+magic-string@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.16.0.tgz#970ebb0da7193301285fb1aa650f39bdd81eb45a"
+  dependencies:
+    vlq "^0.2.1"
+
+magic-string@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  dependencies:
+    vlq "^0.2.1"
+
 make-dir@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
@@ -4965,6 +4999,10 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+
 resolve@^1.1.6, resolve@^1.1.7, resolve@^1.4.0:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
@@ -5001,6 +5039,46 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-cleanup@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-cleanup/-/rollup-plugin-cleanup-0.1.4.tgz#9fed3ab4300988a882d63de3321e410cdafc6331"
+  dependencies:
+    acorn "^3.3.0"
+    magic-string "^0.16.0"
+    rollup-pluginutils "^1.5.2"
+
+rollup-plugin-commonjs@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-7.1.0.tgz#c3a772c2e4a5fa13507f5c578b66cc13b0cb8a79"
+  dependencies:
+    acorn "^4.0.1"
+    estree-walker "^0.3.0"
+    magic-string "^0.19.0"
+    resolve "^1.1.7"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-node-resolve@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.1.1.tgz#cbb783b0d15b02794d58915350b2f0d902b8ddc8"
+  dependencies:
+    browser-resolve "^1.11.0"
+    builtin-modules "^1.1.0"
+    resolve "^1.1.6"
+
+rollup-pluginutils@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
+rollup-pluginutils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
+  dependencies:
+    estree-walker "^0.3.0"
+    micromatch "^2.3.11"
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -5878,6 +5956,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -5928,6 +6010,15 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
+vue-touch@next:
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/vue-touch/-/vue-touch-2.0.0-beta.4.tgz#0259a5fbf89fed12d5e5d789fffb99b874ae0501"
+  dependencies:
+    hammerjs "^2.0.8"
+    rollup-plugin-cleanup "^0.1.4"
+    rollup-plugin-commonjs "^7.0.0"
+    rollup-plugin-node-resolve "^2.0.0"
+
 vue@^2.5.2:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"