Add feedback to submission view, style view

client/src/components/AssignmentWithSubmissions.vue

@@ -1,14 +1,24 @@
 <template>
   <div class="assignment-with-submissions">
     <!--<h1 class="assignment-with-submissions__title">{{assignment.assignment}}</h1>-->
-      <h4 class="assignment-with-submissions__heading">Aufgabe</h4>
-
     <p class="assignment-with-submissions__text">{{assignment.assignment}}</p>
+
+    <div>
+      <a class="button button--primary submissions-page__back" @click="back">Aufgabe im Modul anzeigen</a>
+    </div>
+
     <div class="assignment-with-submissions__solution" v-if="assignment.solution">
       <h4 class="assignment-with-submissions__heading">Lösung</h4>
       <p class="assignment-with-submissions__solution-text">{{assignment.solution}}</p>
     </div>
     <p v-if="!assignment.submissions.length">Zu diesem Auftrag sind noch keine Ergebnisse vorhanden</p>
+
+    <div class="assignment-with-submissions__submissions submissions">
+      <div class="submissions__header student-submission-row submission-header">
+          <p class="submission-header__title">Lernende</p>
+          <p class="submission-header__title">Ergebnisse</p>
+          <p class="submission-header__title">Feedback</p>
+      </div>
     <router-link
       :to="submissionLink(submission)"
       v-for="(submission, index) in submissions"
@@ -20,6 +30,8 @@
       </student-submission>
     </router-link>
     </div>
+
+  </div>
 </template>
 
 <script>
@@ -80,6 +92,7 @@
     }
 
     &__text {
+      font-size: toRem(26px);
       margin-bottom: 1rem;
     }
 
@@ -95,10 +108,19 @@
 
     &__link {
       display: block;
-      &:first-of-type {
-        border-top: 1px solid $color-silver-dark;
     }
+
+    &__submissions {
+      margin-top: 3rem;
     }
 
   }
+
+  .submission-header {
+    &__title {
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+    }
+  }
+
 </style>

client/src/components/StudentSubmission.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="student-submission">
+  <div class="student-submission student-submission-row">
     <div class="student-submission__student-name">
       {{name}}
     </div>
@@ -9,6 +9,9 @@
           <student-submission-document :document="submission.document" class="entry-document"></student-submission-document>
       </p>
     </div>
+    <div class="student-submission__feedback entry">
+      <p>{{submission.submissionfeedback.text | trimToLength(50)}}</p>
+    </div>
   </div>
 </template>
 
@@ -50,12 +53,6 @@
   @import "@/styles/_functions.scss";
 
   .student-submission {
-    display: grid;
-    grid-template-columns: 170px 1fr;
-    grid-column-gap: 80px;
-    align-items: center;
-    border-bottom: 1px solid $color-silver-dark;
-    padding: 15px 0;
 
     &__student-name {
       font-size: toRem(17px);

client/src/graphql/gql/assignmentWithSubmissionsQuery.gql

@@ -19,6 +19,11 @@ query AssignmentWithSubmissions($id: ID!) {
           }
         }
       }
+      submissionfeedback {
+        id
+        text
+        final
+      }
     }
   }
 }

client/src/pages/submissions.vue

@@ -1,9 +1,6 @@
 <template>
-  <div class="submissions-page">
+  <div class="submissions-page skillbox__content">
-    <div>
+    <h2 class="submissions-page__heading">Aufgabe</h2>
-      <a class="button button--primary submissions-page__back" @click="back">Zurück zur Aufgabe</a>
-    </div>
-
     <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
                                  :assignment="assignment"></assignment-with-submissions>
   </div>
@@ -61,8 +58,9 @@
     grid-row-gap: $large-spacing;
     grid-template-rows: auto 1fr;
 
-    @include desktop {
+    margin-top: 2rem;
-      width: 800px;
+
-    }
   }
+
+
 </style>

client/src/styles/_student-submission.scss

@@ -0,0 +1,10 @@
+@import "@/styles/_variables.scss";
+
+.student-submission-row {
+  display: grid;
+  grid-template-columns: 170px 1fr 1fr;
+  grid-column-gap: 80px;
+  align-items: center;
+  border-bottom: 1px solid $color-silver-dark;
+  padding: 15px 0;
+}

client/src/styles/main.scss

@@ -20,3 +20,4 @@
 @import "solutions";
 @import "password_forms";
 @import "public-page";
+@import "student-submission"