From 8e9cd3600d7a4036a8660befcb228daa5aad1426 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 29 Jan 2019 09:20:18 +0100
Subject: [PATCH 1/4] Add new portfolio page layout

---
 client/src/components/AddWidget.vue           | 35 ++++++++++
 client/src/components/WidgetFooter.vue        | 62 +++++++++++++++++
 .../src/components/portfolio/AddProject.vue   | 13 ++++
 .../src/components/portfolio/OwnerWidget.vue  | 40 +++++++++++
 client/src/components/portfolio/Portfolio.vue | 65 ++++++++++++++++++
 .../components/portfolio/ProjectWidget.vue    | 67 +++++++++++++++++++
 client/src/components/rooms/AddRoom.vue       | 26 +------
 ...ryCountWidget.vue => EntryCountWidget.vue} |  4 +-
 client/src/components/rooms/RoomWidget.vue    | 52 ++++----------
 client/src/pages/portfolio.vue                | 15 ++++-
 client/src/pages/room.vue                     |  6 +-
 client/src/pages/start.vue                    |  1 +
 client/src/styles/_variables.scss             |  2 +
 13 files changed, 319 insertions(+), 69 deletions(-)
 create mode 100644 client/src/components/AddWidget.vue
 create mode 100644 client/src/components/WidgetFooter.vue
 create mode 100644 client/src/components/portfolio/AddProject.vue
 create mode 100644 client/src/components/portfolio/OwnerWidget.vue
 create mode 100644 client/src/components/portfolio/Portfolio.vue
 create mode 100644 client/src/components/portfolio/ProjectWidget.vue
 rename client/src/components/rooms/{RoomEntryCountWidget.vue => EntryCountWidget.vue} (89%)

diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
new file mode 100644
index 00000000..f0133fa9
--- /dev/null
+++ b/client/src/components/AddWidget.vue
@@ -0,0 +1,35 @@
+<template>
+  <router-link :to="link" tag="div" class="add-widget">
+    <add-icon class="add-widget__add"></add-icon>
+  </router-link>
+</template>
+
+<script>
+  import AddIcon from '@/components/icons/AddIcon.vue';
+
+  export default {
+    props: ['link'],
+
+    components: {
+      AddIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .add-widget {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include widget-shadow;
+    cursor: pointer;
+
+    &__add {
+      width: 80px;
+      fill: $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/components/WidgetFooter.vue b/client/src/components/WidgetFooter.vue
new file mode 100644
index 00000000..9ec6e1a5
--- /dev/null
+++ b/client/src/components/WidgetFooter.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="widget-footer">
+    <a @click="showMenu = !showMenu" class="widget-footer__more-link">
+      <ellipses></ellipses>
+    </a>
+    <widget-popover :entity="entity"
+                    @delete="onDelete"
+                    @hide-me="showMenu = false"
+                    @edit="onEdit"
+                    :id="id"
+                    v-if="showMenu"></widget-popover>
+  </div>
+</template>
+
+<script>
+  import Ellipses from '@/components/icons/Ellipses.vue';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
+
+  export default {
+    props: ['on-delete', 'on-edit', 'id', 'entity'],
+
+    components: {
+      Ellipses,
+      WidgetPopover
+    },
+
+    data() {
+      return {
+        showMenu: false
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .widget-footer {
+    background-color: $color-grey--lighter;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    position: relative;
+    border-bottom-left-radius: $default-border-radius;
+    border-bottom-right-radius: $default-border-radius;
+
+    /*
+     * For IE10+
+     */
+    -ms-grid-row: 2;
+
+    &__more-link {
+      cursor: pointer;
+    }
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+  }
+</style>
diff --git a/client/src/components/portfolio/AddProject.vue b/client/src/components/portfolio/AddProject.vue
new file mode 100644
index 00000000..abf6e7df
--- /dev/null
+++ b/client/src/components/portfolio/AddProject.vue
@@ -0,0 +1,13 @@
+<template>
+  <add-widget link="/new-portfolio-entry"></add-widget>
+</template>
+
+<script>
+  import AddWidget from '@/components/AddWidget';
+
+  export default {
+    components: {
+      AddWidget
+    }
+  }
+</script>
diff --git a/client/src/components/portfolio/OwnerWidget.vue b/client/src/components/portfolio/OwnerWidget.vue
new file mode 100644
index 00000000..6bec8b66
--- /dev/null
+++ b/client/src/components/portfolio/OwnerWidget.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="owner-widget">
+    <user-icon></user-icon>
+    <span>
+        {{name}}
+    </span>
+  </div>
+</template>
+
+<script>
+  import UserIcon from '@/components/icons/UserIcon.vue';
+
+  export default {
+    props: ['name'],
+
+    components: {
+      UserIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+  .owner-widget {
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+
+    svg {
+      width: 30px;
+      fill: $color-darkgrey-1;
+      margin-right: 15px;
+    }
+
+    & > span {
+      @include room-widget-text-style;;
+    }
+  }
+</style>
diff --git a/client/src/components/portfolio/Portfolio.vue b/client/src/components/portfolio/Portfolio.vue
new file mode 100644
index 00000000..7af4b136
--- /dev/null
+++ b/client/src/components/portfolio/Portfolio.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="portfolio">
+    <add-project></add-project>
+
+    <project-widget
+      v-for="project in projects"
+      v-bind="project" :key="project.id"
+      class="portfolio__project"
+    ></project-widget>
+  </div>
+</template>
+
+<script>
+  import ProjectWidget from '@/components/portfolio/ProjectWidget';
+  import AddProject from '@/components/portfolio/AddProject';
+
+  export default {
+    components: {
+      ProjectWidget,
+      AddProject
+    },
+
+    data() {
+      return {
+        projects: [
+          {
+            id: 1,
+            title: 'Quartalsarbeit: Mein Lehrbetrieb',
+            appearance: 'green',
+            slug: 'quartalsarbeit'
+          },
+          {
+            id: 2,
+            title: 'Mein Projekt 2',
+            appearance: 'red',
+            slug: 'mein-projekt-2'
+          },
+          {
+            id: 3,
+            title: 'Mein Projekt 3',
+            appearance: 'blue',
+            slug: 'mein-projekt-3'
+          },
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .portfolio {
+
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+
+    grid-row-gap: 30px;
+    grid-auto-rows: 200px;
+    width: 640px;
+    justify-self: center;
+    box-sizing: border-box;
+
+  }
+</style>
diff --git a/client/src/components/portfolio/ProjectWidget.vue b/client/src/components/portfolio/ProjectWidget.vue
new file mode 100644
index 00000000..e96bd94e
--- /dev/null
+++ b/client/src/components/portfolio/ProjectWidget.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="project-widget" :class="widgetClass">
+    <router-link :to="{name: 'project', params: {slug: slug}}" tag="div" class="project-widget__content">
+            <h3 class="project-widget__title">{{title}}</h3>
+
+      <entry-count-widget entry-count="4"></entry-count-widget>
+      <owner-widget name="Hans Muster"></owner-widget>
+
+    </router-link>
+    <widget-footer
+      entity="Eintrag"
+    ></widget-footer>
+  </div>
+</template>
+
+<script>
+  import OwnerWidget from '@/components/portfolio/OwnerWidget';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+  import WidgetFooter from '@/components/WidgetFooter';
+
+  export default {
+    props: ['title', 'appearance', 'slug'],
+
+    components: {
+      WidgetFooter,
+      EntryCountWidget,
+      OwnerWidget
+    },
+
+    computed: {
+      widgetClass() {
+        return `project-widget--${this.appearance}`;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
+
+  .project-widget {
+    border-radius: $default-border-radius;
+    background-color: $color-accent-4;
+    @include widget-shadow;
+    box-sizing: border-box;
+
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-template-rows: 150px 1fr;
+
+    &__content {
+      padding: 23px;
+      cursor: pointer;
+    }
+
+    &__title {
+      font-size: toRem(22px);
+      font-weight: 600;
+    }
+
+    @include skillbox-colors;
+  }
+</style>
diff --git a/client/src/components/rooms/AddRoom.vue b/client/src/components/rooms/AddRoom.vue
index 63a9ccb1..7d487a27 100644
--- a/client/src/components/rooms/AddRoom.vue
+++ b/client/src/components/rooms/AddRoom.vue
@@ -1,33 +1,13 @@
 <template>
-  <router-link to="/new-room" tag="div" class="add-room">
-    <add-icon class="add-room__add"></add-icon>
-  </router-link>
+  <add-widget link="/new-room"></add-widget>
 </template>
 
 <script>
-  import AddIcon from '@/components/icons/AddIcon.vue';
+  import AddWidget from '@/components/AddWidget';
 
   export default {
     components: {
-      AddIcon
+      AddWidget
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .add-room {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    @include widget-shadow;
-    cursor: pointer;
-
-    &__add {
-      width: 80px;
-      fill: $color-grey;
-    }
-  }
-</style>
diff --git a/client/src/components/rooms/RoomEntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
similarity index 89%
rename from client/src/components/rooms/RoomEntryCountWidget.vue
rename to client/src/components/rooms/EntryCountWidget.vue
index 3424f6c2..46e81309 100644
--- a/client/src/components/rooms/RoomEntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="room-entry-count-widget">
+  <div class="entry-count-widget">
     <cards></cards>
     <span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
   </div>
@@ -20,7 +20,7 @@
 <style scoped lang="scss">
   @import "@/styles/_mixins.scss";
 
-  .room-entry-count-widget {
+  .entry-count-widget {
     display: flex;
     align-items: center;
     opacity: 0.6;
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index d0cfd58c..e0562355 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -3,21 +3,16 @@
     <router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
       <room-group-widget v-bind="schoolClass"></room-group-widget>
-      <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
+      <entry-count-widget :entryCount="entryCount"></entry-count-widget>
     </router-link>
-    <div class="room-widget__footer" v-if="canEditRoom">
-      <div>
-        <a @click="showMenu = !showMenu" class="room-widget__more-link">
-          <ellipses></ellipses>
-        </a>
-        <widget-popover entity="Raum"
-                        @delete="deleteRoom"
-                        @hide-me="showMenu = false"
-                        @edit="editRoom"
-                        :id="id"
-                        v-if="showMenu"></widget-popover>
-      </div>
-    </div>
+    <widget-footer
+      v-if="canEditRoom"
+      :on-delete="deleteRoom"
+      :on-edit="editRoom"
+      :id="id"
+      entity="Raum"
+    >
+    </widget-footer>
   </div>
 </template>
 
@@ -25,10 +20,9 @@
   import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
   import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
 
-  import Ellipses from '@/components/icons/Ellipses.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+  import WidgetFooter from '@/components/WidgetFooter';
 
   import {meQuery} from '@/graphql/queries';
 
@@ -36,10 +30,9 @@
     props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
 
     components: {
-      RoomEntryCountWidget,
-      Ellipses,
+      EntryCountWidget,
       RoomGroupWidget,
-      WidgetPopover
+      WidgetFooter
     },
 
     data() {
@@ -128,24 +121,5 @@
     &__title {
       font-size: 1.375rem;
     }
-
-    &__more-link {
-      cursor: pointer;
-    }
-
-    &__footer {
-      background-color: rgba(51, 51, 51, 0.18);
-      display: flex;
-      flex-direction: row-reverse;
-      align-items: center;
-      position: relative;
-      border-bottom-left-radius: $default-border-radius;
-      border-bottom-right-radius: $default-border-radius;
-
-      /*
-       * For IE10+
-       */
-      -ms-grid-row: 2;
-    }
   }
 </style>
diff --git a/client/src/pages/portfolio.vue b/client/src/pages/portfolio.vue
index e14fe602..f1b0686c 100644
--- a/client/src/pages/portfolio.vue
+++ b/client/src/pages/portfolio.vue
@@ -1,12 +1,23 @@
 <template>
-  <p class="portfolio-page">Diese Funktion steht noch nicht zur Verfügung.</p>
+  <div class="portfolio-page">
+    <portfolio></portfolio>
+  </div>
 </template>
 
+<script>
+  import Portfolio from '@/components/portfolio/Portfolio';
+
+  export default {
+    components: {
+      Portfolio
+    }
+  }
+</script>
+
 <style>
   .portfolio-page {
     display: grid;
     align-content: center;
     justify-content: center;
-    padding-top: 25vh;
   }
 </style>
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index c1967d83..f06fb5ae 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -7,7 +7,7 @@
       </p>
       <div class="room__meta">
         <room-group-widget v-bind="room.schoolClass"></room-group-widget>
-        <room-entry-count-widget :entry-count="roomEntryCount"></room-entry-count-widget>
+        <entry-count-widget :entry-count="roomEntryCount"></entry-count-widget>
       </div>
     </div>
     <div class="room__content">
@@ -23,13 +23,13 @@
   import AddRoomEntryButton from '@/components/rooms/AddRoomEntryButton.vue';
   import RoomEntry from '@/components/rooms/RoomEntry.vue';
   import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
 
   export default {
     props: ['slug'],
 
     components: {
-      RoomEntryCountWidget,
+      EntryCountWidget,
       RoomGroupWidget,
       AddRoomEntryButton,
       RoomEntry
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index d22614cf..3c0d3b85 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -21,6 +21,7 @@
         title="Portfolio"
         subtitle="Dokumentieren & reflektieren"
         link-text="Portfolio anzeigen"
+        route="/portfolio"
       ></section-block>
     </div>
     <div class="start-page__news news">
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 2dec992f..17131970 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -25,12 +25,14 @@ $color-brand-light: #ddf3ee;
 $color-darkgrey-1: #333333;
 $color-darkgrey-2: #515151;
 $color-grey: rgba(51, 51, 51, 0.5);
+$color-grey--lighter: rgba(51, 51, 51, 0.18);
 $color-lightgrey-2: #dbdbdb;
 $color-lightgrey: #f3f3f3;
 $color-white: #ffffff;
 $color-text-gray: rgb(161, 161, 161);
 
 
+
 $header-color: $color-darkgrey-1;
 $intro-color: $color-grey;
 

From 85914a1f1474de17127c93aa4a5569e839b7ab1a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 29 Jan 2019 17:34:41 +0100
Subject: [PATCH 2/4] Add project page

---
 client/src/components/AddWidget.vue           | 40 +++++++-
 .../src/components/portfolio/AddProject.vue   |  2 +-
 .../components/portfolio/AddProjectEntry.vue  | 20 ++++
 .../src/components/portfolio/ProjectEntry.vue | 50 ++++++++++
 client/src/components/rooms/AddRoom.vue       |  2 +-
 client/src/pages/project.vue                  | 99 +++++++++++++++++++
 client/src/router/index.js                    |  2 +
 client/src/styles/_mixins.scss                | 11 ++-
 8 files changed, 220 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/portfolio/AddProjectEntry.vue
 create mode 100644 client/src/components/portfolio/ProjectEntry.vue
 create mode 100644 client/src/pages/project.vue

diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index f0133fa9..e8338fc2 100644
--- a/client/src/components/AddWidget.vue
+++ b/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>
diff --git a/client/src/components/portfolio/AddProject.vue b/client/src/components/portfolio/AddProject.vue
index abf6e7df..ff4e961d 100644
--- a/client/src/components/portfolio/AddProject.vue
+++ b/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>
diff --git a/client/src/components/portfolio/AddProjectEntry.vue b/client/src/components/portfolio/AddProjectEntry.vue
new file mode 100644
index 00000000..71d00f7d
--- /dev/null
+++ b/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>
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
new file mode 100644
index 00000000..31a5d4d5
--- /dev/null
+++ b/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>
diff --git a/client/src/components/rooms/AddRoom.vue b/client/src/components/rooms/AddRoom.vue
index 7d487a27..1263f526 100644
--- a/client/src/components/rooms/AddRoom.vue
+++ b/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>
diff --git a/client/src/pages/project.vue b/client/src/pages/project.vue
new file mode 100644
index 00000000..ef1e017e
--- /dev/null
+++ b/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>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index da6ae9ec..a2fbec0e 100644
--- a/client/src/router/index.js
+++ b/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',
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 92a78309..ce0cfd61 100644
--- a/client/src/styles/_mixins.scss
+++ b/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;

From 906b5c88bde66dfdb9fc5fb8113565cc721a9b23 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 29 Jan 2019 17:35:14 +0100
Subject: [PATCH 3/4] Add modal basics for new project entry

---
 client/src/App.vue                                |  4 +++-
 .../portfolio/NewProjectEntryWizard.vue           | 15 +++++++++++++++
 client/src/layouts/DefaultLayout.vue              | 12 +++++++++---
 client/src/store/index.js                         | 13 +++++++++++--
 4 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/portfolio/NewProjectEntryWizard.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index e78c6e57..a3da91e2 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -16,6 +16,7 @@
   import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
   import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
   import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
+  import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
 
   export default {
     name: 'App',
@@ -30,7 +31,8 @@
       NewRoomEntryWizard,
       EditRoomEntryWizard,
       NewObjectiveGroupWizard,
-      EditObjectiveGroupWizard
+      EditObjectiveGroupWizard,
+      NewProjectEntryWizard
     },
 
     computed: {
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
new file mode 100644
index 00000000..a4e51c75
--- /dev/null
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -0,0 +1,15 @@
+<template>
+  <modal>
+    <h1>Hello</h1>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+
+  export default {
+    components: {
+      Modal
+    },
+  }
+</script>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 56bf13ed..49611e41 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -37,7 +37,7 @@
       },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
-        return cls ? `skillbox--${cls}` : ''
+        return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
       }
     },
 
@@ -63,13 +63,19 @@
     margin: 0 auto;
     width: 100%;
     display: grid;
-    grid-template-rows: auto auto 1fr;
+    grid-template-rows: auto 1fr;
     grid-row-gap: 32px;
     min-height: 100vh;
+    grid-auto-rows: 1fr;
 
-    grid-template-areas: "h" "." "c";
+    grid-template-areas: "h" "c";
     padding-bottom: 50px;
 
+    &--show-filter {
+      grid-template-rows: auto auto 1fr;
+      grid-template-areas: "h" "." "c";
+    }
+
     /*
      * For IE10+
      */
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 5950370a..045a4362 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -17,7 +17,8 @@ export default new Vuex.Store({
     parentRoom: null,
     parentModule: '',
     objectiveGroupType: '',
-    currentObjectiveGroup: ''
+    currentObjectiveGroup: '',
+    parentProject: null
   },
 
   getters: {},
@@ -39,6 +40,7 @@ export default new Vuex.Store({
       commit('setParentModule', '');
       commit('setObjectiveGroupType', '');
       commit('setCurrentObjectiveGroup', '');
+      commit('setParentProject', null);
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -77,7 +79,11 @@ export default new Vuex.Store({
     },
     setfilterForSchoolClass({commit}, payload) {
       commit('setfilterForSchoolClass', payload);
-    }
+    },
+    addProjectEntry({commit, dispatch}, payload) {
+      commit('setParentProject', payload);
+      dispatch('showModal', 'new-project-entry-wizard');
+    },
   },
 
   mutations: {
@@ -116,6 +122,9 @@ export default new Vuex.Store({
     },
     setCurrentObjectiveGroup(state, payload) {
       state.currentObjectiveGroup = payload;
+    },
+    setParentProject(state, payload) {
+      state.parentProject = payload;
     }
   }
 })

From 662a3b8d4bc77984454858b3ebf49939127807f8 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 30 Jan 2019 10:50:07 +0100
Subject: [PATCH 4/4] Add basics for project entry wizard

---
 client/src/components/Modal.vue               | 22 ++++++-
 .../content-forms/TextFormWithHelpText.vue    | 57 +++++++++++++++++++
 .../portfolio/NewProjectEntryWizard.vue       | 21 ++++++-
 client/src/styles/_variables.scss             |  3 +
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/content-forms/TextFormWithHelpText.vue

diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index c9df6725..cf315cac 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal">
+    <div class="modal" :class="{'modal--hide-header': hideHeader}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
@@ -19,6 +19,13 @@
 
 <script>
   export default {
+    props: {
+      hideHeader: {
+        type: Boolean,
+        default: false
+      }
+    },
+
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -44,6 +51,19 @@
     grid-template-areas: "header" "body" "footer";
     position: relative;
 
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
+    }
+
+    &--hide-header &__header {
+      display: none;
+    }
+
+    &--hide-header &__body {
+      padding: $default-padding;
+    }
+
     &__backdrop {
       display: grid;
       position: fixed;
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
new file mode 100644
index 00000000..fabbe49a
--- /dev/null
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="text-form-with-help-text">
+    <h3 class="text-form-with-help-text__heading"><span class="text-form-with-help-text__title">{{title}}</span>
+      <info-icon class="text-form-with-help-text__icon"></info-icon>
+    </h3>
+    <text-form @text-change-value="$emit('change', $event.target.value)" :value="v"></text-form>
+  </div>
+</template>
+
+<script>
+  import TextForm from '@/components/content-forms/TextForm';
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    props: ['title', 'value'],
+
+    components: {
+      TextForm,
+      InfoIcon
+    },
+
+    computed: {
+      v() {
+        return {
+          text: this.value
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .text-form-with-help-text {
+    margin-bottom: 30px;
+
+    &__heading {
+      margin-bottom: 15px;
+      display: flex;
+      justify-items: center;
+    }
+
+    &__title {
+      font-size: toRem(22px);
+      font-weight: 600;
+      margin-right: 8px;
+    }
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index a4e51c75..99968e16 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -1,15 +1,30 @@
 <template>
-  <modal>
-    <h1>Hello</h1>
+  <modal :hide-header="true">
+    <div class="project-entry-modal">
+      <text-form-with-help-text title="Tätigkeit" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Reflexion" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Nächste Schritte" :value="value">
+      </text-form-with-help-text>
+    </div>
   </modal>
 </template>
 
 <script>
   import Modal from '@/components/Modal';
+  import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
 
   export default {
     components: {
-      Modal
+      Modal,
+      TextFormWithHelpText
     },
+
+    data() {
+      return {
+        value: ''
+      }
+    }
   }
 </script>
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 17131970..92484050 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -54,3 +54,6 @@ $input-border-radius: 3px;
 //modal stuff
 $modal-lateral-padding: 34px;
 $modal-input-width: 560px;
+
+
+$default-padding: 30px;