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

Add exercise form component

This commit is contained in:
Ramon Wenger 2018-09-06 15:31:13 +02:00
parent 4fb8220f7d
commit 48e88ddc45
1 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/components/content-forms/ExerciseForm.vue
View File

@ -1,15 +1,49 @@
<template> <template>
<div class="exercise-form"> <div class="exercise-form">
<h1>Exercise Form</h1> <input class="exercise-form__title skillbox-input" placeholder="Aufgabentitel">
<textarea class="exercise-form__exercise-text skillbox-textarea" placeholder="Aufgabe erfassen..."></textarea>
<info-icon class="exercise-form__help-icon help-text__icon"></info-icon>
<p class="exercise-form__help-description help-text__description">
Ein Eingabefeld für die Antwort wird automatisch hinzugefügt.
</p>
</div> </div>
</template> </template>
<script> <script>
</script> import InfoIcon from '@/components/icons/InfoIcon';
export default {
components: {
InfoIcon
}
}
</script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.exercise-form { .exercise-form {
display: grid;
grid-auto-rows: auto;
grid-row-gap: 13px;
grid-template-columns: 40px 1fr;
grid-column-gap: 16px;
align-items: center;
&__title {
width: $modal-input-width;
grid-column: span 2;
}
&__exercise-text {
width: $modal-input-width;
grid-column: span 2;
}
&__help-icon {
width: 40px;
height: 40px;
}
&__help-description {}
} }
</style> </style>