ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add styling for spell check and teacher feedback

This commit is contained in:
Ramon Wenger 2020-02-03 15:07:30 +01:00
parent 6948c6724f
commit e8ada8f372
5 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/content-blocks/assignment/Assignment.vue
View File

@ -25,9 +25,8 @@
<spell-check :corrections="corrections" :text="submission.text"></spell-check> <spell-check :corrections="corrections" :text="submission.text"></spell-check>
<div v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback"> <p v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback" v-html="feedbackText">
<p>{{feedbackText}}</p> </p>
</div>
</template> </template>
<template v-if="!isStudent"> <template v-if="!isStudent">
<router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den <router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den
@ -91,7 +90,7 @@
}, },
feedbackText() { feedbackText() {
let feedback = this.assignment.submission.submissionFeedback; 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 { &__feedback {
margin-top: $medium-spacing; @include regular-text;
} }
} }

10
client/src/components/content-blocks/assignment/SpellCheck.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="spellcheck" v-if="corrections"> <p class="spellcheck" v-if="corrections">
<p v-html="highlightedText"></p> <span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText"></span>
</div> </p>
</template> </template>
<script> <script>
@ -48,7 +48,11 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/styles/_mixins.scss";
.spellcheck { .spellcheck {
@include regular-text;
&__correction { &__correction {
background: yellow; background: yellow;
} }

1
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -108,6 +108,7 @@
border-radius: $input-border-radius; border-radius: $input-border-radius;
border: 1px solid $color-silver; border: 1px solid $color-silver;
padding: $medium-spacing; padding: $medium-spacing;
margin-bottom: $medium-spacing;
&__inputs { &__inputs {
margin-bottom: 12px; margin-bottom: 12px;

5
client/src/styles/_mixins.scss
View File

@ -125,6 +125,11 @@
line-height: $default-heading-line-height; line-height: $default-heading-line-height;
} }
@mixin inline-title {
@include regular-text;
color: $color-silver-dark;
}
@mixin lead-paragraph { @mixin lead-paragraph {
font-family: $serif-font-family; font-family: $serif-font-family;
line-height: 1.4; line-height: 1.4;

4
client/src/styles/_typography.scss
View File

@ -71,3 +71,7 @@ input, textarea, select, button {
margin-bottom: 7.5px; margin-bottom: 7.5px;
font-weight: 600; font-weight: 600;
} }
.inline-title {
@include inline-title;
}