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

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

@ -10,11 +10,9 @@
></textarea> ></textarea>
<div class="submission-form__save-status submission-form__save-status--saved" v-if="saved"> <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> <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>
<div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved"> <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> <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>
</div> </div>
</template> </template>
@ -38,30 +36,25 @@
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.submission-form { .submission-form {
display: flex;
flex-direction: row;
justify-content: space-between;
&__textarea { &__textarea {
display: block; display: flex;
width: 100%; width: 95%;
border-radius: $input-border-radius; padding: 0;
padding: 13px;
@include input-box-shadow;
box-sizing: border-box; box-sizing: border-box;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
line-height: 1.5; line-height: 1.5;
border-bottom: 0; border: 0;
min-height: 110px; min-height: 110px;
} }
&__save-status { &__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; position: relative;
display: flex; /*width: 50px;*/
align-items: center; align-items: center;
} }
@ -69,12 +62,6 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
fill: $color-silver-dark; fill: $color-silver-dark;
margin-right: 8px;
}
&__save-status-text {
font-size: toRem(14px);
color: $color-silver-dark;
} }
@keyframes spin { @keyframes spin {