Add new portfolio page layout

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>

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>

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>

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>

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>

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>

client/src/components/rooms/AddRoom.vue

@@ -1,33 +1,13 @@
 <template>
-  <router-link to="/new-room" tag="div" class="add-room">
+  <add-widget link="/new-room"></add-widget>
-    <add-icon class="add-room__add"></add-icon>
-  </router-link>
 </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>

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;

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">
+    <widget-footer
-      <div>
+      v-if="canEditRoom"
-        <a @click="showMenu = !showMenu" class="room-widget__more-link">
+      :on-delete="deleteRoom"
-          <ellipses></ellipses>
+      :on-edit="editRoom"
-        </a>
+      :id="id"
-        <widget-popover entity="Raum"
+      entity="Raum"
-                        @delete="deleteRoom"
+    >
-                        @hide-me="showMenu = false"
+    </widget-footer>
-                        @edit="editRoom"
-                        :id="id"
-                        v-if="showMenu"></widget-popover>
-      </div>
-    </div>
   </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 EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetPopover from '@/components/rooms/WidgetPopover';
+  import WidgetFooter from '@/components/WidgetFooter';
 
   import {meQuery} from '@/graphql/queries';
 
@@ -36,10 +30,9 @@
     props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
 
     components: {
-      RoomEntryCountWidget,
+      EntryCountWidget,
-      Ellipses,
       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>

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>

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

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">

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;