WIP Merge 127 ui improvements

frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue

 <!-- 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>&nbsp;/ {{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>&nbsp;/ {{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>