Update styling on project detail page

client/src/components/AddWidget.vue

@@ -48,8 +48,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .add-widget {
     display: none;

client/src/components/BackLink.vue

@@ -11,6 +11,7 @@
   import ChevronLeft from '@/components/icons/ChevronLeft';
   import {MODULE_PAGE} from '@/router/module.names';
   import {ROOMS_PAGE} from '@/router/room.names';
+  import {PROJECTS_PAGE} from '@/router/portfolio.names';
 
   export default {
     props: {
@@ -39,6 +40,8 @@
             return {name: 'topic', params: {topicSlug: this.slug}};
           case 'module':
             return {name: MODULE_PAGE};
+          case 'portfolio':
+            return {name: PROJECTS_PAGE};
           default:
             return {name: ROOMS_PAGE};
         }

client/src/components/icons/PlusIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    viewBox="16 16 23 23"
+    viewBox="15 15 20 20"
     xmlns="http://www.w3.org/2000/svg">
     <path
       d="M33.855 23.7749H26.215V16.1349C26.215 15.4584 25.6666 14.9099 24.99 14.9099C24.3135 14.9099 23.765 15.4584 23.765 16.1349V23.7749H16.125C15.4485 23.7749 14.9 24.3234 14.9 24.9999C14.9 25.6765 15.4485 26.2249 16.125 26.2249H23.765V33.8649C23.765 34.5415 24.3135 35.0899 24.99 35.0899C25.6666 35.0899 26.215 34.5415 26.215 33.8649V26.2249H33.855C34.5316 26.2249 35.08 25.6765 35.08 24.9999C35.08 24.3234 34.5316 23.7749 33.855 23.7749Z"

client/src/components/page-form/PageForm.vue

@@ -24,8 +24,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .page-form {
     width: 710px;
@@ -41,6 +40,8 @@
     }
     grid-template-rows: 1fr 55px;
 
+    @include widget-shadow;
+
     margin: $large-spacing 0;
 
     &__page {

client/src/components/portfolio/AddProject.vue

@@ -1,15 +0,0 @@
-<template>
-  <add-widget
-    route="/new-project"
-    data-cy="add-project-widget"/>
-</template>
-
-<script>
-  import AddWidget from '@/components/AddWidget';
-
-  export default {
-    components: {
-      AddWidget
-    }
-  };
-</script>

client/src/components/portfolio/AddProjectEntry.vue

@@ -1,18 +1,17 @@
 <template>
-  <add-widget
+  <a
-    :reverse="true"
+    class="add-project-entry"
-    @click="addProjectEntry"/>
+    @click="addProjectEntry">
+    <plus-icon class="add-project-entry__icon" />
+    <span class="add-project-entry__text">Beitrag erfassen</span>
+  </a>
 </template>
 
 <script>
-  import AddWidget from '@/components/AddWidget';
+  import PlusIcon from '@/components/icons/PlusIcon';
-
   export default {
     props: ['project'],
-
+    components: {PlusIcon},
-    components: {
-      AddWidget
-    },
 
     methods: {
       addProjectEntry() {
@@ -21,3 +20,28 @@
     }
   };
 </script>
+
+<style lang="scss" scoped>
+  @import "~styles/helpers";
+
+  .add-project-entry {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid $color-brand;
+    border-radius: $default-border-radius;
+    cursor: pointer;
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+      margin-right: $small-spacing;
+    }
+
+    &__text {
+      @include navigation-link;
+      color: $color-brand;
+    }
+  }
+</style>

client/src/components/portfolio/EditProject.vue

@@ -27,7 +27,6 @@
                 id: project.id,
                 title: project.title,
                 description: project.description,
-                appearance: project.appearance,
                 objectives: project.objectives
               }
             }

client/src/components/portfolio/ProjectForm.vue

@@ -9,10 +9,6 @@
       v-model="localProject.description"
       label="Beschreibung"
       type="textarea"/>
-    <color-chooser
-      :selected-color="localProject.appearance"
-      @input="updateColor"
-    />
     <template slot="footer">
       <button
         :class="{'button--disabled': !formValid}"
@@ -55,20 +51,13 @@
         return this.localProject.title;
       }
     },
-
-    created() {
-      this.$store.dispatch('setSpecialContainerClass', this.localProject.appearance);
-    },
-
-    beforeDestroy() {
-      this.$store.dispatch('setSpecialContainerClass', '');
-    },
-
-    methods: {
-      updateColor(newColor) {
-        this.localProject.appearance = newColor;
-        this.$store.dispatch('setSpecialContainerClass', newColor);
-      }
-    },
   };
 </script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  .project-form {
+    @include widget-shadow;
+  }
+</style>

client/src/pages/portfolio/newProject.vue

@@ -11,8 +11,6 @@
   import ADD_PROJECT_MUTATION from '@/graphql/gql/mutations/addProject.gql';
   import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
-  const defaultAppearance = 'blue';
-
   export default {
     components: {
       ProjectForm
@@ -24,7 +22,6 @@
           title: '',
           description: '',
           objectives: '',
-          appearance: defaultAppearance
         };
       }
     },

client/src/pages/portfolio/portfolio.vue

@@ -17,7 +17,6 @@
 
 <script>
   import ProjectWidget from '@/components/portfolio/ProjectWidget';
-  import AddProject from '@/components/portfolio/AddProject';
 
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
@@ -30,8 +29,7 @@
       ProjectList,
       CreateProjectButton,
       PortfolioOnboarding,
-      ProjectWidget,
+      ProjectWidget
-      AddProject
     },
 
     apollo: {

client/src/pages/portfolio/project.vue

@@ -3,6 +3,18 @@
     :class="specialContainerClass"
     class="project">
     <div class="project__header">
+      <back-link
+        class="project__back"
+        title="Zurück zur Übersicht"
+        type="portfolio"/>
+
+      <a class="link">Mit Lehrperson teilen</a>
+
+      <project-actions
+        :id="project.id"
+        class="project__actions"
+        v-if="!me.readOnly && !me.selectedClass.readOnly"/>
+
       <h1
         class="project__title"
         data-cy="project-title">{{ project.title }}</h1>
@@ -10,19 +22,7 @@
         {{ project.description }}
       </p>
 
-      <h2 class="project__objectives-title">Ziele</h2>
-      <ul class="project__objectives">
-        <li
-          :key="index"
-          class="project__objective"
-          v-for="(objective, index) in objectives">{{ objective }}
-        </li>
-      </ul>
-
       <div class="project__meta">
-        <project-actions
-          :id="project.id"
-          v-if="!me.readOnly && !me.selectedClass.readOnly"/>
         <owner-widget :owner="project.student"/>
         <entry-count-widget :entry-count="projectEntryCount"/>
       </div>
@@ -52,11 +52,13 @@
 
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+  import BackLink from '@/components/BackLink';
 
   export default {
     props: ['slug'],
 
     components: {
+      BackLink,
       AddProjectEntry,
       ProjectEntry,
       ProjectActions,
@@ -126,10 +128,32 @@
   @import "~styles/helpers";
 
   .project {
-    @include skillbox-colors;
-
     &__header {
       padding: $large-spacing;
+      border-bottom: 1px solid $color-silver;
+
+      display: grid;
+      grid-template-areas:
+        "b a"
+        "t t"
+        "d d"
+        "m m"
+    }
+
+    &__back {
+      grid-area: b;
+    }
+
+    &__actions {
+      grid-area: a;
+
+      justify-self: end;
+    }
+    &__title {
+      grid-area: t;
+    }
+    &__description {
+      grid-area: d;
     }
 
     &__add-entry {
@@ -160,6 +184,8 @@
     }
 
     &__meta {
+      grid-area: m;
+
       display: flex;
       flex-direction: column;
       @include desktop {
@@ -179,7 +205,6 @@
     }
 
     &__content {
-      background-color: rgba($color-charcoal-dark, 0.18);
       display: flex;
       flex-direction: column;
       /*max-width: 840px;*/

client/src/router/portfolio.names.js

@@ -1 +1,2 @@
 export const NEW_PROJECT_PAGE = 'new-project';
+export const PROJECTS_PAGE = 'portfolio';

client/src/router/portfolio.routes.js

@@ -2,10 +2,10 @@ import portfolio from '@/pages/portfolio/portfolio';
 import project from '@/pages/portfolio/project';
 import newProject from '@/pages/portfolio/newProject';
 import editProject from '@/pages/portfolio/editProject';
-import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
+import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
 
 const portfolioRoutes = [
-  {path: '/portfolio', name: 'portfolio', component: portfolio, meta: {hideFooter: true}},
+  {path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},
   {path: '/portfolio/:slug', name: 'project', component: project, props: true},
   {path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject},
   {path: '/edit-project/:id', name: 'edit-project', component: editProject, props: true},