diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue index a6cb0d630d7cff9703be6d083b3640ad54ebfe1e..4e02f83528150dadc83e8e04a72f3400ce1e0a64 100644 --- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue +++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue @@ -1,72 +1,73 @@ <!-- TODO: remove inline stylings --> <template> - <v-container> - <v-layout wrap> - <v-flex sm4 md4 lg3> - <v-tooltip top v-if="skippable"> - <v-btn - slot="activator" - outline round color="grey darken-2" - @click="skipSubmission" - >Skip</v-btn> - <span>Skip this submission</span> - </v-tooltip> - <v-spacer/> - <v-alert - class="score-alert ma-3" - color="error" - icon="warning" - :value="scoreError" - >{{ scoreError }}</v-alert> - </v-flex> - <v-flex xs> - <span class="mr-2">Score:</span> - <input - class="score-text-field" - type="number" - v-model="score" - @input="validateScore" - @change="validateScore" - /> - <span> / {{fullScore}}</span> - <v-btn - outline round flat - @click="score = 0" - color="red lighten-1" - class="score-button">0</v-btn> - <v-btn - outline round flat - @click="score = fullScore" - color="blue darken-3" - class="score-button">{{fullScore}}</v-btn> + <v-container class="bottom-container"> + <v-layout wrap> + <v-flex sm4 md4 lg2> + <v-tooltip top v-if="skippable"> + <v-btn slot="activator" outline round + color="grey darken-2" + @click="skipSubmission">Skip</v-btn> + <span>Skip this submission</span> + </v-tooltip> + <v-spacer /> + <v-alert class="score-alert ma-3" + color="error" + icon="warning" + :value="scoreError">{{ scoreError }}</v-alert> </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 class="final-container" slot="activator"> - <label>Final</label> - <v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/> - </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" - slot="activator" - :loading="loading" - @click="submit" - >Submit<v-icon>chevron_right</v-icon></v-btn> - <span>Submit and continue</span> - </v-tooltip> - </v-flex> - </v-layout> - </v-flex> -</v-layout> - </v-container> + <v-flex> + <v-layout wrap class="score-submit-container"> + <v-flex xs5 class="score-flex"> + <span class="mr-2">Score:</span> + <input class="score-text-field" + type="number" + v-model="score" + @input="validateScore" + @change="validateScore" /> + <span> / {{fullScore}}</span> + <v-btn outline round flat + class="score-button" + @click="score=0" + color="red lighten-1">0 + </v-btn> + <v-btn outline round flat + @click="score=fullScore" + color="blue darken-3" + class="score-button">{{fullScore}} + </v-btn> + </v-flex> + <v-flex class="submit-flex" xs3 sm3> + <v-layout> + <v-flex xs4> + <v-tooltip top v-if="showFinalCheckbox"> + <v-toolbar-items class="final-container" + slot="activator"> + <label>Final</label> + <v-checkbox slot="activator" + v-model="isFinal" + class="final-checkbox" /> + </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" + slot="activator" + :loading="loading" + @click="submit">Submit + <v-icon>chevron_right</v-icon> + </v-btn> + <span>Submit and continue</span> + </v-tooltip> + </v-flex> + </v-layout> + </v-flex> + </v-layout> + </v-flex> + </v-layout> + </v-container> </template> <script> @@ -169,6 +170,9 @@ export default { </script> <style scoped> + .bottom-container { + padding: 0px; + } .bottom-toolbar { font-size: large; } @@ -194,8 +198,16 @@ export default { padding-top: 0; margin-top: 0; } - .submit-container { - min-width: 260px; + .submit-flex { + min-width: 190px; + margin-left: 10px; + } + .score-flex { margin-left: 10px; + min-width: 250px; + + } + .score-submit-container { + justify-content: space-between; } </style>