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

Adjust style of assignment input

This commit is contained in:
Ramon Wenger 2019-07-11 14:13:28 +02:00
parent d768087b2e
commit 6710f51b64
2 changed files with 24 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,28 +10,20 @@
<final-submission :submission="assignment.submission" v-if="final"></final-submission>
<div class="assignment__submission" v-if="!final">
<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__toggle-input-container">-->
<!--<button-->
<!--class="assignment__toggle-input"-->
<!--@click="inputType = 'file'"-->
<!--:class="{'assignment__toggle-input&#45;&#45;active': inputType === 'file'}"-->
<!--&gt;Dokument hochladen-->
<!--</button>-->
<!--</div>-->
<div class="assignment__inputs">
<submission-form
@input="saveInput"
:submission="submission"
:saved="!unsaved"
v-if="inputType === 'text'"
></submission-form>
<div
class="assignment__file-upload"
@ -66,7 +58,7 @@
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import {mapGetters, mapActions} from 'vuex';
import ASSIGNMENT_QUERY from '@/graphql/gql/assignmentQuery.gql';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
@ -235,6 +227,7 @@
.assignment {
margin-bottom: 3rem;
position: relative;
&__title {
font-size: toRem(17px);
@ -266,6 +259,11 @@
&__submission {
/*margin-bottom: 12px;*/
@include input-box-shadow;
background-color: $color-white;
border-radius: $input-border-radius;
border: 1px solid $color-silver;
padding: $medium-spacing;
}
&__inputs {

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

@ -10,11 +10,9 @@
></textarea>
<div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
<tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
<span class="submission-form__save-status-text">Alle Änderungen gespeichert</span>
</div>
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
<loading-icon class="submission-form__save-status-icon submission-form__saving-icon"></loading-icon>
<span class="submission-form__save-status-text">Änderungen werden gespeichert</span>
</div>
</div>
</template>
@ -38,30 +36,25 @@
@import "@/styles/_mixins.scss";
.submission-form {
display: flex;
flex-direction: row;
justify-content: space-between;
&__textarea {
display: block;
width: 100%;
border-radius: $input-border-radius;
padding: 13px;
@include input-box-shadow;
display: flex;
width: 95%;
padding: 0;
box-sizing: border-box;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
line-height: 1.5;
border-bottom: 0;
border: 0;
min-height: 110px;
}
&__save-status {
background-color: $color-white;
font-family: $sans-serif-font-family;
padding: 13px;
border-radius: $input-border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: 1px solid #DBDBDB;
position: relative;
display: flex;
/*width: 50px;*/
align-items: center;
}
@ -69,12 +62,6 @@
width: 22px;
height: 22px;
fill: $color-silver-dark;
margin-right: 8px;
}
&__save-status-text {
font-size: toRem(14px);
color: $color-silver-dark;
}
@keyframes spin {