Update assignment widget styling
This commit is contained in:
Ramon Wenger
parent
ea9fa06634
commit
091b5b4d39
|
|
@ -1,14 +1,50 @@
|
|||
<template>
|
||||
<div class="assignment">
|
||||
{{assignment.title}}
|
||||
<p v-html="assignment.assignment"></p>
|
||||
<textarea
|
||||
class="assignment__input"
|
||||
placeholder="Text schreiben"
|
||||
:value="assignment.submission.text"
|
||||
@input="saveInput"
|
||||
></textarea>
|
||||
<button class="assignment__submit button">Ergebnis teilen</button>
|
||||
<h3 class="assignment__title">{{assignment.title}}</h3>
|
||||
<p class="assignment__assignment-text">
|
||||
{{assignment.assignment}}
|
||||
</p>
|
||||
|
||||
<div class="assignment__toggle-input-container">
|
||||
<button
|
||||
class="assignment__toggle-input"
|
||||
@click="inputType = 'text'"
|
||||
:class="{'assignment__toggle-input--active': inputType === 'text'}"
|
||||
>Text
|
||||
erfassen
|
||||
</button>
|
||||
<button
|
||||
class="assignment__toggle-input"
|
||||
@click="inputType = 'file'"
|
||||
:class="{'assignment__toggle-input--active': inputType === 'file'}"
|
||||
>Dokument hochladen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="assignment__answer">
|
||||
|
||||
<div class="assignment__text-answer"
|
||||
v-if="inputType === 'text'">
|
||||
<textarea
|
||||
class="assignment__textarea"
|
||||
placeholder="Ergebnis erfassen"
|
||||
:value="assignment.submission.text"
|
||||
@input="saveInput"
|
||||
></textarea>
|
||||
<div class="assignment__save-status">
|
||||
<tick-circle-icon class="assignment__save-status-icon"></tick-circle-icon>
|
||||
<span class="assignment__save-status-text">Alle Änderungen gespeichert</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="assignment__file-upload"
|
||||
v-if="inputType === 'file'">
|
||||
File Input goes here
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="assignment__submit button button--primary button--white-bg">Ergebnis mit Lehrperson teilen</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,15 +53,17 @@
|
|||
import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
|
||||
import debounce from 'debounce';
|
||||
|
||||
import TickCircleIcon from '@/components/icons/TickCircleIcon';
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
|
||||
computed: {
|
||||
loading() {
|
||||
return this.$apollo.loading;
|
||||
}
|
||||
components: {
|
||||
TickCircleIcon
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
saveInput: debounce(function (event) {
|
||||
this.$apollo.mutate({
|
||||
|
|
@ -59,7 +97,8 @@
|
|||
submission: {
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
inputType: 'text'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,20 +106,82 @@
|
|||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_functions.scss';
|
||||
|
||||
.assignment {
|
||||
margin-bottom: 2em;
|
||||
padding: 20px;
|
||||
border-radius: $default-border-radius;
|
||||
background-color: $color-brand-light;
|
||||
|
||||
&__input {
|
||||
&__title {
|
||||
font-size: toRem(17px);
|
||||
}
|
||||
|
||||
&__toggle-input-container {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&__toggle-input {
|
||||
border: 0;
|
||||
font-family: $sans-serif-font-family;
|
||||
background: transparent;
|
||||
font-size: toRem(14px);
|
||||
padding: 5px 0;
|
||||
margin-right: 15px;
|
||||
outline: 0;
|
||||
color: $color-grey;
|
||||
cursor: pointer;
|
||||
|
||||
&--active {
|
||||
border-bottom: 2px solid $color-darkgrey-1;
|
||||
color: $color-darkgrey-1;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #DBDBDB;
|
||||
padding: 13px;
|
||||
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 0;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
&__save-status {
|
||||
background-color: $color-white;
|
||||
font-family: $sans-serif-font-family;
|
||||
padding: 13px;
|
||||
border-radius: 3px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border: 1px solid #DBDBDB;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__save-status-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: $color-grey;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__save-status-text {
|
||||
font-size: toRem(14px);
|
||||
color: $color-grey;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
|
||||
tick-circle</title>
|
||||
<path
|
||||
d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
|
||||
<path d="M69.27,41a2.45,2.45,0,1,0-3.46-3.46L45,58.3,34.2,47.49A2.45,2.45,0,0,0,30.73,51L45,65.23Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -15,4 +15,8 @@
|
|||
&--primary {
|
||||
border-color: $color-brand;
|
||||
}
|
||||
|
||||
&--white-bg {
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue