From 4a46feb4af5a672b5265a62a153b15ea84615a3f Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 8 Aug 2018 17:31:19 +0200
Subject: [PATCH] Add first component

---
 client/src/components/ModuleTeaser.vue | 29 ++++++++++++++++++++++++++
 client/src/layouts/default.vue         | 26 +++++++++++++++++++++++
 client/src/pages/index.vue             |  1 +
 client/src/pages/topic.vue             | 22 +++++++++++++++++++
 4 files changed, 78 insertions(+)
 create mode 100644 client/src/components/ModuleTeaser.vue
 create mode 100644 client/src/layouts/default.vue
 create mode 100644 client/src/pages/topic.vue

diff --git a/client/src/components/ModuleTeaser.vue b/client/src/components/ModuleTeaser.vue
new file mode 100644
index 00000000..79af41f9
--- /dev/null
+++ b/client/src/components/ModuleTeaser.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="module-teaser">
+    <img src="~/assets/maggie.jpg" alt="" class="module-teaser__image">
+    <div class="module-teaser__body">
+      <h3 class="module-teaser__meta-title">Modul 1</h3>
+      <h3 class="module-teaser__title">Mein neues Umfeld</h3>
+      <p class="module-teaser__description">Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .module-teaser {
+    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+    border: 1px solid #E2E2E2;
+    height: 330px;
+    width: 300px;
+    border-radius: 12px;
+
+    &__image {
+      width: 100%;
+      max-height: 150px;
+    }
+
+    &__body {
+      padding: 20px;
+    }
+  }
+</style>
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
new file mode 100644
index 00000000..14810f48
--- /dev/null
+++ b/client/src/layouts/default.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <header>Header</header>
+    <aside>
+      <h2>Themen</h2>
+      <ul>
+        <li>1. Berufliche Grundbildung</li>
+        <li>2. Geld und Kauf</li>
+        <li>3. Geld und Kauf</li>
+        <li>4. Geld und Kauf</li>
+        <li>5. Geld und Kauf</li>
+        <li>6. Geld und Kauf</li>
+        <li>7. Geld und Kauf</li>
+        <li>8. Geld und Kauf</li>
+        <li>9. Geld und Kauf</li>
+      </ul>
+      <h2>Basiswissen</h2>
+      <h2>ABU News</h2>
+
+    </aside>
+    <main>
+      <nuxt/>
+    </main>
+    <footer>Footer</footer>
+  </div>
+</template>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 5c48cc9d..6e88e0fc 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -22,6 +22,7 @@
       modules: {
         query: ALL_MODULES,
         prefetch: true,
+        manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
             this.modules = data.modules.edges.map(node => node.node);
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
new file mode 100644
index 00000000..63c055cf
--- /dev/null
+++ b/client/src/pages/topic.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="topic">
+    <h1 class="topic__title">Berufliche Grundbildung</h1>
+    <p class="topic__teaser">
+      Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene mündliche Kommunikation erleichtert
+      das Zusammenleben und Zusammenarbeiten.
+    </p>
+    <module-teaser></module-teaser>
+    <module-teaser></module-teaser>
+    <module-teaser></module-teaser>
+  </div>
+</template>
+
+<script>
+  import ModuleTeaser from '~/components/ModuleTeaser.vue';
+
+  export default {
+    components: {
+      ModuleTeaser
+    }
+  }
+</script>