Add project page

client/src/components/AddWidget.vue

@@ -1,14 +1,40 @@
 <template>
-  <router-link :to="link" tag="div" class="add-widget">
+  <component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')" :class="{ 'add-widget--reverse': reverse }">
     <add-icon class="add-widget__add"></add-icon>
-  </router-link>
+  </component>
 </template>
 
 <script>
   import AddIcon from '@/components/icons/AddIcon.vue';
 
   export default {
-    props: ['link'],
+    props: {
+      route: {
+        type: String,
+        default: null
+      },
+      reverse: { // use reverse colors
+        type: Boolean,
+        default: false
+      },
+      click: {
+        type: Function,
+        default: null
+      }
+    },
+
+    computed: {
+      component() {
+        // only use the router link if the route prop is provided, otherwise render a normal anchor tag
+        return this.route ? 'router-link' : 'a'
+      },
+      properties() {
+        return this.route ? {
+          to: this.route,
+          tag: 'div'
+        } : {}
+      }
+    },
 
     components: {
       AddIcon
@@ -31,5 +57,13 @@
       width: 80px;
       fill: $color-grey;
     }
+
+    &--reverse {
+      @include widget-shadow-reverse;
+    }
+
+    &--reverse &__add {
+      fill: white;
+    }
   }
 </style>

client/src/components/portfolio/AddProject.vue

@@ -1,5 +1,5 @@
 <template>
-  <add-widget link="/new-portfolio-entry"></add-widget>
+  <add-widget route="/new-project"></add-widget>
 </template>
 
 <script>

client/src/components/portfolio/AddProjectEntry.vue

@@ -0,0 +1,20 @@
+<template>
+  <add-widget :reverse="true" @click="addProjectEntry"></add-widget>
+</template>
+
+<script>
+  import AddWidget from '@/components/AddWidget';
+
+  export default {
+    components: {
+      AddWidget
+    },
+
+    methods: {
+      addProjectEntry() {
+        console.log('click');
+        this.$store.dispatch('addProjectEntry', '');
+      }
+    }
+  }
+</script>

client/src/components/portfolio/ProjectEntry.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="project-entry">
+    <h3 class="project-entry__heading">Tätigkeit</h3>
+    <p class="project-entry__paragraph">
+      Ich führe das Interview mit meiner Kollegin durch.
+    </p>
+    <h3 class="project-entry__heading">Reflexion</h3>
+    <p class="project-entry__paragraph">
+      Da ich geeignete Fragen hatte, konnte meine Kollegin umfangreiche Antworten zum Thema geben. Die Eingangshalle
+      eignete sich nicht als Interviewort, da es viele Nebengeräusche hatte. Wir fanden aber dann ein freies
+      Klassenzimmer. Nicht nur die Fragen sind wichtig. Auch die Ortswahl, wo man das Interview aufzeichnen möchte,
+      ist sehr wichtig für ein erfolgreiches Interview.
+    </p>
+    <h3 class="project-entry__heading">
+      Nächste Schritte
+    </h3>
+    <p class="project-entry__paragraph">
+      Interview im Raum „Mein Lehrbetrieb“ ablegen.
+    </p>
+    <div class="project-entry__date">
+      21. Juni 2018
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .project-entry {
+    background-color: $color-white;
+    border-radius: $default-border-radius;
+    padding: 30px 20px;
+
+    &__heading {
+      font-size: toRem(22px);
+      margin-bottom: 6px;
+    }
+
+    &__paragraph {
+      margin-bottom: 30px;
+    }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+      color: $color-text-gray;
+      font-size: toRem(17px);
+    }
+  }
+</style>

client/src/components/rooms/AddRoom.vue

@@ -1,5 +1,5 @@
 <template>
-  <add-widget link="/new-room"></add-widget>
+  <add-widget route="/new-room"></add-widget>
 </template>
 
 <script>

client/src/pages/project.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="project">
+    <div class="project__header">
+      <h1 class="project__title">Quartalsarbeit: Mein Lehrbetrieb</h1>
+      <p class="project__description">
+        Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200
+        Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten.
+      </p>
+
+      <h2 class="project__objectives-title">Ziele</h2>
+      <ul class="project__objectives">
+        <li class="project__objective">Ich kann ein Interview mit geeigneten Fragen vorbereiten.</li>
+        <li class="project__objective">Ich kann ein Interview führen und auf interessante oder ausweichende
+          Antworten näher eingehen.
+        </li>
+        <li class="project__objective">Ich kann ein mündlich geführtes Interview in Standardsprache
+          aufzeichnen.
+        </li>
+      </ul>
+
+    </div>
+    <div class="project__content">
+      <add-project-entry class="project__add-entry"></add-project-entry>
+      <project-entry></project-entry>
+      <project-entry></project-entry>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ProjectEntry from '@/components/portfolio/ProjectEntry';
+  import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
+
+  export default {
+
+    components: {
+      AddProjectEntry,
+      ProjectEntry
+    },
+
+    created() {
+      this.$store.dispatch('setSpecialContainerClass', 'red');
+    },
+
+    beforeDestroy() {
+      this.$store.dispatch('setSpecialContainerClass', '');
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .project {
+    margin-bottom: -50px;
+
+    &__header {
+      padding: 30px;
+    }
+
+    &__add-entry {
+      height: 120px;
+    }
+
+    &__description,
+    &__objective {
+      font-family: $sans-serif-font-family;
+    }
+
+    &__description {
+      margin-bottom: 30px;
+    }
+
+    &__objectives-title {
+      font-size: toRem(22px);
+      margin-bottom: 8px;
+    }
+
+    &__objectives {
+      list-style: disc;
+      padding-left: 30px;
+    }
+
+    &__objective {
+      line-height: 1.5;
+    }
+
+    &__content {
+      background-color: $color-grey--lighter;
+      display: grid;
+      grid-template-columns: 840px;
+      grid-row-gap: 30px;
+      justify-content: center;
+      padding-top: 30px;
+      padding-bottom: 50px;
+    }
+  }
+</style>

client/src/router/index.js

@@ -16,6 +16,7 @@ import p404 from '@/pages/p404'
 import start from '@/pages/start'
 import submission from '@/pages/studentSubmission'
 import portfolio from '@/pages/portfolio'
+import project from '@/pages/project'
 
 const routes = [
   {path: '/', component: start, meta: {layout: 'blank'}},
@@ -47,6 +48,7 @@ const routes = [
   {path: '/basic-knowledge/:slug', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
   {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
   {path: '/portfolio', name: 'portfolio', component: portfolio},
+  {path: '/portfolio/:slug', name: 'project', component: project},
   {
     path: '/book',
     name: 'book',

client/src/styles/_mixins.scss

@@ -1,11 +1,20 @@
 @import 'variables';
 
-@mixin widget-shadow {
+@mixin widget-shadow-base {
   border-radius: $default-border-radius;
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+}
+
+@mixin widget-shadow {
+  @include widget-shadow-base;
   border: 1px solid $color-lightgrey-2;
 }
 
+@mixin widget-shadow-reverse {
+  @include widget-shadow-base;
+  border: 2px solid $color-white;
+}
+
 @mixin room-widget-text-style {
   font-family: $sans-serif-font-family;
   font-size: 1rem;