Make annotation UI more compact (#2208)

* add no-padding-bottom class to input fields * Reduce margin * remove more padding
autolab · Sep 20, 2024 · e4714ba · e4714ba
1 parent 502e05b
commit e4714ba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -249,13 +249,22 @@
   border: 1px solid red;
 }
 
+.code-table .annotation-line .annotation-form .row {
+  margin-bottom: 0;
+}
+
 .code-table .annotation-line .annotation-preview {
   border: 1px solid $autolab-highlight-gray;
   padding: 5px;
   margin: 0 10px;
   width: 100%;
 }
 
+.code-table .annotation-line .annotation-form .row .input-field {
+  margin-bottom: 0;
+  margin-top: 0.75rem !important;
+}
+
 .code-table .float-left {
   float: left;
 }

diff --git a/app/views/submissions/_annotation_form.html.erb b/app/views/submissions/_annotation_form.html.erb
@@ -2,7 +2,7 @@
   <div class="error" style="display: none;"></div>
   <form>
     <div class="row">
-      <div class="input-field col s12 annotation-comment">
+      <div class="input-field col s12 annotation-comment no-padding-bottom">
         <textarea class="comment materialize-textarea" id="comment-textarea" placeholder=""></textarea>
         <label for="comment-textarea">Comment</label>
         <p>
@@ -17,29 +17,29 @@
 
     <div class="row annotation-problem-score">
       <% if global %>
-        <div class="input-field col s12">
+        <div class="input-field col s12 no-padding-bottom">
           <input class="score" type="number" value="0" placeholder="0" step="any" id="comment-score" autocomplete="on">
           <label for="comment-score">Score</label>
           <span> Grading style: <b><%= @assessment.is_positive_grading ? "Positive grading" : "Negative grading" %></b>
             <i class="material-icons" title="<%= "#{@assessment.is_positive_grading ? 'Score is added, starting from 0.' : 'Score is deducted from the total points.'} Change this setting in Edit Assessment > Problems" %>">info_outline</i> </span>
         </div>
       <% else %>
-        <div class="input-field col s6">
+        <div class="input-field col s6 no-padding-bottom">
           <input class="score" type="number" value="0" placeholder="0" step="any" id="comment-score" autocomplete="on">
           <label for="comment-score">Score</label>
           <span> Grading style: <b><%= @assessment.is_positive_grading ? "Positive grading" : "Negative grading" %></b>
               <i class="material-icons" title="<%= "#{@assessment.is_positive_grading ? 'Score is added, starting from 0.' : 'Score is deducted from the total points.'} Change this setting in Edit Assessment > Problems" %>">info_outline</i> </span>
         </div>
 
-        <div class="input-field col s6">
+        <div class="input-field col s6 no-padding-bottom">
           <select class="browser-default problem-id">
           </select>
         </div>
       <% end %>
     </div>
 
     <div class="row">
-      <div class="input-field col s12">
+      <div class="input-field col s12 no-padding-bottom">
         <input type="submit" class="btn" value="Add annotation">
         <button class="btn grey annotation-cancel-button">Cancel</button>
       </div>