From b0aab84b2797a95c162d508dd82babceff2c95bf Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Fri, 7 Dec 2018 18:19:11 +0100
Subject: [PATCH] fixed linewrapping with only vuetify components
---
.../AnnotatedSubmissionBottomToolbar.vue | 43 ++++++++++++-------
1 file changed, 27 insertions(+), 16 deletions(-)
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index e7c8390a..a6cb0d63 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,9 +1,9 @@
<!-- TODO: remove inline stylings -->
<template>
-<v-layout>
- <div class="tb-container">
- <div style="margin-top: 10px;">
+ <v-container>
+ <v-layout wrap>
+ <v-flex sm4 md4 lg3>
<v-tooltip top v-if="skippable">
<v-btn
slot="activator"
@@ -19,8 +19,8 @@
icon="warning"
:value="scoreError"
>{{ scoreError }}</v-alert>
- </div>
- <div style="margin-top: 10px;">
+ </v-flex>
+ <v-flex xs>
<span class="mr-2">Score:</span>
<input
class="score-text-field"
@@ -40,15 +40,19 @@
@click="score = fullScore"
color="blue darken-3"
class="score-button">{{fullScore}}</v-btn>
- </div>
- <div style="display: flex; flex-wrap: wrap; margin-left: 20px; margin-top: 10px;">
+ </v-flex>
+ <v-flex class="submit-container" xs4 sm4>
+ <v-layout wrap>
+ <v-flex xs4 md3>
<v-tooltip top v-if="showFinalCheckbox">
- <v-toolbar-items slot="activator">
+ <v-toolbar-items class="final-container" slot="activator">
+ <label>Final</label>
<v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/>
- <label style="margin-top: 25%; margin-right: 20px;">Final</label>
</v-toolbar-items>
<span>Non final feedback will be sent to the reviewer.</span>
</v-tooltip>
+ </v-flex>
+ <v-flex xs>
<v-tooltip top>
<v-btn
color="success"
@@ -58,9 +62,11 @@
>Submit<v-icon>chevron_right</v-icon></v-btn>
<span>Submit and continue</span>
</v-tooltip>
- </div>
- </div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
</v-layout>
+ </v-container>
</template>
<script>
@@ -169,7 +175,6 @@ export default {
.score-text-field {
max-width: 50px;
box-sizing: border-box;
- height: 2.5vh;
border: 1px solid grey;
border-radius: 2px;
padding: 3px;
@@ -180,11 +185,17 @@ export default {
.score-button {
min-width: 0px;
}
+ .final-container {
+ margin-top: 15px;
+ height: 10px;
+ }
.final-checkbox {
- margin-top: 10px;
+ margin-left: 10px;
+ padding-top: 0;
+ margin-top: 0;
}
- .tb-container {
- display: flex;
- flex-wrap: wrap;
+ .submit-container {
+ min-width: 260px;
+ margin-left: 10px;
}
</style>
--
GitLab