Added more sub pages, menu component, and a basic layout

src/app/app.vue

@@ -1,19 +1,37 @@
 <template>
   <div id="app">
-    <main>
+    <app-menu :menu="menu" />
+    <main id="app">
       <router-view></router-view>
     </main>
   </div>
 </template>
 
 <script>
+  import Menu from '@/components/menu'
   export default {
-    name: 'Eur-O-Mat'
+    name: 'Eur-O-Mat',
+
+    components: {
+      'app-menu': Menu
+    },
+
+    data () {
+      return {
+        menu: [
+          { label: 'Startseite', route: { path: '/' } },
+          { label: 'FAQ', route: { path: '/faq' } },
+          { label: 'Presse', route: { path: '/presse' } },
+          { label: 'Impressum', route: { path: '/impressum' } }
+        ]
+      }
+    }
   }
 </script>
 
 <style lang="scss">
   @import "~node_modules/normalize.css/normalize";
+  @import "~styles/colors";
 
   * {
     padding: 0;
@@ -25,20 +43,40 @@
   body {
     width: 100vw;
     height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   body {
+    background: $background-primary;
+    color: $text-color-base;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  button {
-    padding: 10px;
+  a {
+    color: $text-color-special;
   }
 
-  main {
-    max-width: 50vw;
-    margin: 0 auto;
+  button {
+    padding: 10px 20px;
+    background: $button-background;
+    color: $button-color;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+
+    &:active,
+    &:focus {
+      outline: none;
+      background: $yellow;
+    }
+  }
+
+  #app {
+    max-width: 650px;
+    width: 95vw;
   }
 </style>

src/app/euromat/components/index.vue

@@ -1,26 +1,27 @@
 <template>
   <section class="euromat">
+    <div class="header-progress">
+      <span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
+      <progress :value="currentThesis + 1" :max="thesesCount">
+        {{ currentThesis }}
+      </progress>
+    </div>
+
     <header class="euromat-header">
-      <div class="header-progress">
-        <span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
-        <progress :value="currentThesis + 1" :max="thesesCount">
-          {{ currentThesis }}
-        </progress>
-      </div>
       <h1 class="thesis">{{ thesisTitle }}</h1>
     </header>
 
     <div class="euromat-controls">
-      <button class="controls-skip" type="button" @click="submitAnswer(optionSkip)">
-        {{ optionSkip.label }}
-      </button>
       <ul class="euromat-btns">
         <li v-for="option in options" v-if="option.position !== 'skipped'">
-          <button type="button" @click="submitAnswer(option)">
+          <button type="button" @click="submitAnswer(option, $event)">
             {{ option.label }}
           </button>
         </li>
       </ul>
+      <button class="controls-skip" type="button" @click="submitAnswer(optionSkip)">
+        {{ optionSkip.label }}
+      </button>
     </div>
   </section>
 </template>
@@ -53,7 +54,7 @@
     },
 
     methods: {
-      submitAnswer (option) {
+      submitAnswer (option, event) {
         if (!option) {
           return console.warn('Invalid answer')
         }
@@ -64,6 +65,7 @@
         const thesis = getThesis(this.currentThesis)
         this.answers.push({ thesis, option })
         this.currentThesis += 1
+        event.target.blur()
       },
       forwardToResults () {
         localStorage.setItem('results', JSON.stringify(this.answers, null, 2))
@@ -74,14 +76,34 @@
 </script>
 
 <style lang="scss" scoped>
+  @import "~styles/colors";
+  @import "~styles/layout";
+
   .header-progress {
     display: flex;
+    margin-bottom: $base-gap * 2;
 
-    progress {
+    progress[value] {
+      appearance: none;
       width: 100%;
+      margin-left: 15px;
+
+      &::-webkit-progress-bar {
+        background: rgba(0,0,0,.3);
+        border-radius: 20px;
+      }
+
+      &::-webkit-progress-value {
+        background: $yellow;
+        border-radius: 20px;
+      }
     }
   }
 
+  .euromat-header {
+    margin-bottom: $base-gap * 2;
+  }
+
   .euromat-controls {
     display: flex;
     flex-direction: column;
@@ -89,9 +111,19 @@
     align-items: center;
   }
 
+  .controls-skip {
+    background: transparent;
+    font-style: italic;
+    color: $text-color-base;
+  }
+
   .euromat-btns {
     list-style: none;
     display: flex;
     justify-content: center;
+
+    li:not(:last-child) {
+      margin-right: 15px;
+    }
   }
 </style>

src/app/euromat/routes.js

@@ -1,8 +1,8 @@
-import EuroMat from './components/euromat'
+import EuroMat from './components/index'
 
 export default [
   {
-    path: '/',
+    path: '/thesen',
     name: 'euromat',
     component: EuroMat
   }

src/app/faq/components/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <section>
+    <h1>FAQ</h1>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'FAQ'
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/app/faq/index.js

@@ -0,0 +1 @@
+export { default as routes } from './routes'

src/app/faq/routes.js

@@ -0,0 +1,9 @@
+import FAQ from './components/index'
+
+export default [
+  {
+    path: '/faq',
+    name: 'faq',
+    component: FAQ
+  }
+]

src/app/imprint/components/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <section>
+    <h1>Impressum</h1>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'Imprint'
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/app/imprint/index.js

@@ -0,0 +1 @@
+export { default as routes } from './routes'

src/app/imprint/routes.js

@@ -0,0 +1,9 @@
+import Imprint from './components/index'
+
+export default [
+  {
+    path: '/impressum',
+    name: 'imprint',
+    component: Imprint
+  }
+]

src/app/intro/components/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <section>
+    <h1>Willkommen beim EuroMat</h1>
+    <router-link tag="button" :to="{ path: '/thesen' }">
+      Start
+    </router-link>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'Intro'
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/app/intro/index.js

@@ -0,0 +1 @@
+export { default as routes } from './routes'

src/app/intro/routes.js

@@ -0,0 +1,9 @@
+import Intro from './components/index'
+
+export default [
+  {
+    path: '/',
+    name: 'intro',
+    component: Intro
+  }
+]

src/app/press/components/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <section>
+    <h1>Presse</h1>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'Presse'
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/app/press/index.js

@@ -0,0 +1 @@
+export { default as routes } from './routes'

src/app/press/routes.js

@@ -0,0 +1,9 @@
+import Press from './components/index'
+
+export default [
+  {
+    path: '/presse',
+    name: 'press',
+    component: Press
+  }
+]

src/app/results/components/index.vue

@@ -32,8 +32,10 @@
     methods: {
       getPartyMatch (party) {
         const { positions } = getParty(party.token)
-        return this.results.filter(answer =>
-          answer.option.position === positions[answer.thesis.id].position).length
+        return this.results
+          .filter(answer =>
+            answer.option.position === positions[answer.thesis.id].position)
+          .length
       }
     },
 

src/app/results/routes.js

@@ -1,4 +1,4 @@
-import Results from './components/results'
+import Results from './components/index'
 
 export default [
   {

src/components/menu.vue

@@ -0,0 +1,23 @@
+<template>
+  <aside>
+    <ul>
+      <li v-for="item in menu">
+        <router-link :to="item.route">
+          {{ item.label }}
+        </router-link>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script>
+  export default {
+    name: 'Menu',
+
+    props: {
+      menu: { type: Array, default: () => [] }
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/data/options.json

@@ -2,21 +2,21 @@
   {
     "position": "positive",
     "id": 0,
-    "label": "Ich stimme zu"
+    "label": "👍🏻 Ich stimme zu"
   },
   {
     "position": "neutral",
     "id": 1,
-    "label": "Neutral"
+    "label": "🖐🏻 Neutral"
   },
   {
     "position": "negative",
     "id": 2,
-    "label": "Ich bin dagegen"
+    "label": "👎🏻 Ich bin dagegen"
   },
   {
     "position": "skipped",
     "id": 3,
-    "label": "Thesis überspringen"
+    "label": "These überspringen"
   }
 ]

src/router/index.js

@@ -1,15 +1,23 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import { routes as intro } from '@/app/intro'
 import { routes as euromat } from '@/app/euromat'
 import { routes as results } from '@/app/results'
+import { routes as faq } from '@/app/faq'
+import { routes as press } from '@/app/press'
+import { routes as imprint } from '@/app/imprint'
 
 Vue.use(Router)
 
 export default new Router({
   mode: 'hash',
   routes: [
+    ...intro,
     ...euromat,
-    ...results
+    ...results,
+    ...faq,
+    ...press,
+    ...imprint
   ]
 })

src/styles/colors.scss

@@ -0,0 +1,11 @@
+$blue: rgba(9, 9, 225, 0.93);
+$yellow: #ffda00;
+
+$background-primary: $blue;
+
+$text-color-base: white;
+$text-color-invert: rgba(0, 0, 0, .8);
+$text-color-special: $yellow;
+
+$button-background: white;
+$button-color: $blue;

src/styles/layout.scss

@@ -0,0 +1 @@
+$base-gap: 25px;