add new components with dummy data

client/src/components/profile/ModuleActivity.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="module-activity">
+    <h3 class="module-activity__module-name">Geld und Kauf - Modul 9</h3>
+    <h2 class="module-activity__title">Ökololololologie</h2>
+    <div class="module-activity__tasks activity-tasks">
+      <h4 class="activity-tasks__title">Aufträge</h4>
+      <ol class="activity-tasks__task-list task-list">
+        <li class="task-list__item task-item">
+          <h5 class="task-item__title">Auftrag x, Begründung</h5>
+          <p class="task-item__submission">"eine Antwrotasdfasdfasdf"</p>
+        </li>
+        <li class="task-list__item task-item">
+          <h5 class="task-item__title">Auftrag x, Begründung</h5>
+          <p class="task-item__submission">"eine Antwrotasdfasdfasdf"</p>
+        </li>
+        <li class="task-list__item task-item">
+          <h5 class="task-item__title">Auftrag x, Begründung</h5>
+          <p class="task-item__submission">"eine Antwrotasdfasdfasdf"</p>
+        </li>
+        <li class="task-list__item task-item">
+          <h5 class="task-item__title">Auftrag x, Begründung</h5>
+          <p class="task-item__submission">"eine Antwrotasdfasdfasdf"</p>
+        </li>
+      </ol>
+    </div>
+    <div class="module-activity__tasks activity-tasks">
+      <h4 class="activity-tasks__title activity-tasks__title--alternative">Basiswissen</h4>
+      <ol class="activity-tasks__task-list task-list">
+        <li class="task-list__item task-item">
+          <h5 class="task-item__title">Auftrag x, Begründung</h5>:
+          <p class="task-item__submission">"eine Antwrotasdfasdfasdf"</p>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .module-activity {
+    @include widget-shadow;
+    padding: $medium-spacing;
+
+    &__module-name {
+      @include small-text;
+      color: $color-grey;
+    }
+  }
+
+  .activity-tasks {
+    &__title {
+      background-color: $color-brand-light;
+      padding: $small-spacing $medium-spacing;
+      border-radius: $default-border-radius;
+
+      &--alternative {
+        background-color: $color-accent-1-light;
+      }
+    }
+  }
+
+  .task-item {
+    display: flex;
+    flex-direction: row;
+    margin-left: $medium-spacing;
+
+    &__title {
+        &::after {
+        content: ":"
+      }
+      margin-right: $medium-spacing;
+    }
+
+    &__title, &__submission {
+      line-height: 50px;
+      height: 50px;
+    }
+  }
+
+</style>

client/src/pages/activity.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="activity">
+    <h1 class="activity__header">Meine Aktivität</h1>
+    <module-activity class="activity"></module-activity>
+    <module-activity class="activity"></module-activity>
+    <module-activity class="activity"></module-activity>
+  </div>
+</template>
+
+<script>
+
+  import ModuleActivity from '@/components/profile/ModuleActivity';
+
+  export default {
+    components: {
+      ModuleActivity
+    },
+
+    // apollo: {
+    //   schoolClasses: {
+    //     query: MY_SCHOOL_CLASSES_QUERY,
+    //     update(data) {
+    //       return this.$getRidOfEdges(data).me.schoolClasses
+    //     }
+    //   }
+    // },
+
+    data() {
+      return {
+        activities: []
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .module-activity {
+    margin-bottom: $large-spacing;
+  }
+
+</style>

client/src/pages/myClasses.vue

@@ -28,9 +28,6 @@
       return {
         schoolClasses: []
       }
-    },
-    methods: {
-
     }
   }
 </script>

client/src/pages/profile.vue

@@ -32,13 +32,16 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .profile {
     padding: $medium-spacing;
+    max-width: 640px;
+    margin: 0 auto;
 
-    @media screen and (max-width: 1024px) {
+    @include desktop {
-      max-width: 640px;
+      max-width: 100%;
-      margin: 0 auto;
+      margin: 0;
     }
 
     &__submenu {

client/src/router/index.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import Router from 'vue-router'
 // import index from '@/pages/index'
 import topic from '@/pages/topic'
 import book from '@/pages/book'
@@ -21,6 +20,8 @@ import project from '@/pages/project'
 import profilePage from '@/pages/profile'
 import passwordChange from '@/pages/passwordChange'
 import myClasses from '@/pages/myClasses'
+import activity from '@/pages/activity'
+import Router from 'vue-router'
 
 const routes = [
   {path: '/', component: start, meta: {layout: 'blank'}},
@@ -75,6 +76,7 @@ const routes = [
     children: [
       {path: 'password-change', name: 'pw-change', component: passwordChange, meta: {isProfile: true}},
       {path: 'myclasses', name: 'my-classes', component: myClasses, meta: {isProfile: true}},
+      {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
     ]
   },
   {path: '*', component: p404}