From e8ada8f372c21e1bbbb6aa48b3eeec32b33064a3 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 3 Feb 2020 15:07:30 +0100
Subject: [PATCH] Add styling for spell check and teacher feedback

---
 .../content-blocks/assignment/Assignment.vue           |  9 ++++-----
 .../content-blocks/assignment/SpellCheck.vue           | 10 +++++++---
 .../content-blocks/assignment/SubmissionForm.vue       |  1 +
 client/src/styles/_mixins.scss                         |  5 +++++
 client/src/styles/_typography.scss                     |  4 ++++
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 9a0b5d2d..42166111 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -25,9 +25,8 @@
 
       <spell-check :corrections="corrections" :text="submission.text"></spell-check>
 
-      <div v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback">
-        <p>{{feedbackText}}</p>
-      </div>
+      <p v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback" v-html="feedbackText">
+      </p>
     </template>
     <template v-if="!isStudent">
       <router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den
@@ -91,7 +90,7 @@
       },
       feedbackText() {
         let feedback = this.assignment.submission.submissionFeedback;
-        return `Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}: ${feedback.text}`;
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${feedback.text}`;
       }
     },
 
@@ -284,7 +283,7 @@
     }
 
     &__feedback {
-      margin-top: $medium-spacing;
+      @include regular-text;
     }
 
   }
diff --git a/client/src/components/content-blocks/assignment/SpellCheck.vue b/client/src/components/content-blocks/assignment/SpellCheck.vue
index d39fa051..c72aefc3 100644
--- a/client/src/components/content-blocks/assignment/SpellCheck.vue
+++ b/client/src/components/content-blocks/assignment/SpellCheck.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="spellcheck" v-if="corrections">
-    <p v-html="highlightedText"></p>
-  </div>
+  <p class="spellcheck" v-if="corrections">
+    <span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText"></span>
+  </p>
 </template>
 
 <script>
@@ -48,7 +48,11 @@
 </script>
 
 <style lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .spellcheck {
+    @include regular-text;
+
     &__correction {
       background: yellow;
     }
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 952987ca..96945c18 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -108,6 +108,7 @@
     border-radius: $input-border-radius;
     border: 1px solid $color-silver;
     padding: $medium-spacing;
+    margin-bottom: $medium-spacing;
 
     &__inputs {
       margin-bottom: 12px;
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 1e9ceb0f..dd443ea2 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -125,6 +125,11 @@
   line-height: $default-heading-line-height;
 }
 
+@mixin inline-title {
+  @include regular-text;
+  color: $color-silver-dark;
+}
+
 @mixin lead-paragraph {
   font-family: $serif-font-family;
   line-height: 1.4;
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 6947084f..a13ac756 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -71,3 +71,7 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
+
+.inline-title {
+  @include inline-title;
+}