Style submissions page

client/src/components/AssignmentWithSubmissions.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="assignment-with-submissions">
-    <!--<h1 class="assignment-with-submissions__title">{{assignment.assignment}}</h1>-->
     <p class="assignment-with-submissions__text">{{assignment.assignment}}</p>
 
     <div>
@@ -21,9 +20,9 @@
       </div>
     <router-link
       :to="submissionLink(submission)"
-      v-for="(submission, index) in submissions"
+      v-for="submission in submissions"
       class="assignment-with-submissions__link"
-      :key="index">
+      :key="submission.id">
       <student-submission class="assignment-with-submissions__submission"
                           :submission="submission"
       >

client/src/components/content-blocks/assignment/Assignment.vue

@@ -41,8 +41,8 @@
 
         <final-submission
           v-if="final"
-          :user-input="assignment.submission"
-          :text="assignment.submission.text"
+          :user-input="assignment.submission.text"
+          :shared-msg="'Das Ergebnis wurde mit der Lehrperson geteilt'"
           @reopen="reopen"></final-submission>
       </div>
     </template>

client/src/graphql/gql/studentSubmissionQuery.gql

@@ -12,6 +12,7 @@ query StudentSubmissions($id: ID!) {
       assignment
     }
     submissionfeedback {
+      id
       text
       final
     }

client/src/pages/submissions.vue

@@ -51,14 +51,21 @@
 
 <style scoped lang="scss">
   @import "@/styles/_mixins.scss";
+  @import "@/styles/_variables.scss";
 
   .submissions-page {
     display: grid;
 
-    grid-row-gap: $large-spacing;
     grid-template-rows: auto 1fr;
 
     margin-top: 2rem;
+    margin-left: $large-spacing;
+    margin-right: $large-spacing;
+
+    @include desktop {
+      margin-left: $medium-spacing;
+      margin-right: $medium-spacing;
+    }
 
   }
 </style>

client/src/styles/_student-submission.scss

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