better styling for empty comments fields when submitting an assignment

The "Comments:" blabel was unnecessary and actually kind of confusing, so I replaced with just a textarea that has a placeholder and a title. The labels were also not accessible since all the comments textareas had the same ids, so all but one label were referencing the wrong textarea. test plan: - make sure you can still make comments when submitting an assignment Change-Id: I9fc97d7827d564cb9cfb7c5903ac1e4301b8ef9c Reviewed-on: https://gerrit.instructure.com/12040 Tested-by: Jenkins <[email protected]> Reviewed-by: Ryan Shaw <[email protected]>
rthbound · Oct 11, 2012 · ac4c0fc · ac4c0fc
1 parent 181904c
commit ac4c0fc
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/app/stylesheets/full_assignment.sass b/app/stylesheets/full_assignment.sass
@@ -6,3 +6,11 @@
   :padding-left 20px
   :font-weight bold
 
+#submit_assignment
+  .submission_comment_textarea
+    width: 300px
+    height: 14px
+    padding: 3px
+    &.focus_or_content
+      width: 100%
+      height: 72px
diff --git a/app/views/assignments/_submit_assignment.html.erb b/app/views/assignments/_submit_assignment.html.erb
@@ -69,8 +69,7 @@
       <% end %>
       <tr>
         <td colspan="2">
-          <%= blabel :submission, :comment, :en => "Comments" %>
-          <%= text_area :submission, :comment, :style => "width: 100%; height: 16px;" %>
+          <%= text_area :submission, :comment, :class => 'submission_comment_textarea', :placeholder => t('comments_placeholder', 'Comments...'), :title => t('additional_comments', 'Additional comments') %>
         </td>
       </tr>
       <%= render :partial => "group_comment" %>
@@ -109,8 +108,7 @@
         </td>
       </tr><tr>
         <td>
-          <%= blabel :submission, :comment, :en => "Comments" %>
-          <%= text_area :submission, :comment, :style => "width: 100%; height: 16px;" %>
+          <%= text_area :submission, :comment, :class => 'submission_comment_textarea', :placeholder => t('comments_placeholder', 'Comments...'), :title => t('additional_comments', 'Additional comments') %>
         </td>
       </tr>
       <%= render :partial => "group_comment" %>
@@ -145,9 +143,8 @@
       </tr><tr>
         <td colspan="2" style="text-align: center;">
           <div style="text-align: left;">
-            <%= blabel :submission, :comment, :en => "Comments" %>
+            <%= text_area :submission, :comment, :class => 'submission_comment_textarea', :placeholder => t('comments_placeholder', 'Comments...'), :title => t('additional_comments', 'Additional comments') %>
           </div>
-          <%= text_area :submission, :comment, :style => "width: 100%; height: 16px;" %>
         </td>
       </tr>
       <%= render :partial => "group_comment" %>
@@ -229,9 +226,8 @@
           </tr><tr>
             <td colspan="2" style="text-align: center;">
               <div style="text-align: left;">
-                <%= blabel :submission, :comment, :en => "Comments" %>
+                <%= text_area :submission, :comment, :class => 'submission_comment_textarea', :placeholder => t('comments_placeholder', 'Comments...'), :title => t('additional_comments', 'Additional comments') %>
               </div>
-              <%= text_area :submission, :comment, :style => "width: 100%; height: 75px;" %>
             </td>
           </tr>
           <%= render :partial => "group_comment" %>
@@ -297,9 +293,8 @@
           <tr>
             <td colspan="2" style="text-align: center;">
               <div style="text-align: left;">
-                <%= blabel :submission, :comment, :en => "Comments" %>
+                <%= text_area :submission, :comment, :class => 'submission_comment_textarea', :placeholder => t('comments_placeholder', 'Comments...'), :title => t('additional_comments', 'Additional comments') %>
               </div>
-              <%= text_area :submission, :comment, :style => "width: 100%; height: 16px;" %>
             </td>
           </tr>
           <%= render :partial => "group_comment" %>

diff --git a/public/javascripts/submit_assignment.js b/public/javascripts/submit_assignment.js
@@ -42,10 +42,10 @@ define([
     // hasn't entered any content.
     submissionForm.delegate('#submission_comment', 'focus', function(e) {
       var box = $(this);
-      if (box.val().trim() === '') { box.css('height', '72px'); }
+      if (box.val().trim() === '') { box.addClass('focus_or_content'); }
     }).delegate('#submission_comment', 'blur', function(e) {
       var box = $(this);
-      if (box.val().trim() === '') { box.css('height', '16px'); }
+      if (box.val().trim() === '') { box.removeClass('focus_or_content'); }
     });
 
     submissionForm.submit(function(event) {

diff --git a/spec/selenium/assignments_student_spec.rb b/spec/selenium/assignments_student_spec.rb
@@ -49,7 +49,7 @@ def click_away_accept_alert
 
       f('.submit_assignment_link').click
       wait_for_ajaximations
-      driver.execute_script("return $('#submission_comment').height()").should == 16
+      driver.execute_script("return $('#submission_comment').height()").should == 14
       driver.execute_script("$('#submission_comment').focus()")
       wait_for_ajaximations
       driver.execute_script("return $('#submission_comment').height()").should == 72
@@ -224,4 +224,4 @@ def click_away_accept_alert
       end
     end
   end
-end
+end