Make student grades page responsive

flag=responsive_student_grades_page
closes EVAL-583

Test plan:
- Enable the Responsive Student Grades Page feature flag
- Enable the Student Learning Mastery Gradebook feature flag
- Have a course with some students and some graded assignments
- As a student, visit the Grades page for the course
- Check that:
  - The print button no longer drops down into the filters
  - The grades table overflows less or not at all (data tables are okay
    to horizontally scroll for WCAG)
  - If you select the Learning Mastery tab, the expand and collapse
    buttons don't occlude the tabs, but instead appear to the right or
    below

Change-Id: Iede98130c5c75902eafcc8e2e6af9416f7d774a5
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/245263
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
Reviewed-by: Syed Hussain <shussain@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Product-Review: Jody Sailor

app/stylesheets/bundles/grade_summary.scss

@@ -22,6 +22,9 @@
 
 // print button for grades summary page
 .print-grades {
+  body:not(.responsive_student_grades_page) & {
+    float: direction(right);
+  }
   @media print {
     display: none;
   }
@@ -117,11 +120,28 @@
 
 #grades_summary td.assignment_score {
   cursor: pointer;
-  white-space: nowrap;
+
+  body:not(.responsive_student_grades_page) & {
+    white-space: nowrap;
+  }
+
+  body.responsive_student_grades_page & {
+    @include breakpoint(tablet) {
+      white-space: nowrap;
+    }
+  }
 }
 
 #grades_summary th.possible {
-  white-space: nowrap;
+  body:not(.responsive_student_grades_page) & {
+    white-space: nowrap;
+  }
+
+  body.responsive_student_grades_page & {
+    @include breakpoint(tablet) {
+      white-space: nowrap;
+    }
+  }
 }
 
 #grades_summary td a, #grades_summary th a {
@@ -136,8 +156,18 @@
 #grades_summary td.details {
   text-align: direction(right);
   padding-#{direction(left)}: 0;
-  white-space: nowrap;
-  min-width: 80px;  // equals 4 x 20 pixel icons
+
+  body:not(.responsive_student_grades_page) & {
+    white-space: nowrap;
+    min-width: 80px;  // equals 4 x 20 pixel icons
+  }
+
+  body.responsive_student_grades_page & {
+    @include breakpoint(tablet) {
+      white-space: nowrap;
+      min-width: 80px;  // equals 4 x 20 pixel icons
+    }
+  }
 
   & a {
     color: $ic-icon-link-color;
@@ -156,7 +186,10 @@
 }
 
 #grades_summary th.title .context {
-  visibility: hidden;
+  body:not(.responsive_student_grades_page) & {
+    visibility: hidden;
+  }
+
   font-size: $ic-font-size - 2;
   color: $ic-font-color-dark;
   @media print {
@@ -166,12 +199,22 @@
   }
 }
 
-#grades_summary th.title .context.context_hover {
-  visibility: visible;
+body:not(.responsive_student_grades_page) {
+  #grades_summary th.title .context.context_hover {
+    visibility: visible;
+  }
 }
 
 #grades_summary td.due {
-  white-space: nowrap;
+  body:not(.responsive_student_grades_page) & {
+    white-space: nowrap;
+  }
+
+  body.responsive_student_grades_page & {
+    @include breakpoint(tablet) {
+      white-space: nowrap;
+    }
+  }
 }
 
 #grades_summary tr.assignment_graded {
@@ -652,3 +695,14 @@ $outcome-border: 1px solid #BCC2CA;
     color: $ic-color-dark;
   }
 }
+
+.ic-Table.ic-Table--grades-summary-table th,
+.ic-Table.ic-Table--grades-summary-table td {
+  padding-#{direction(left)}: 0;
+  padding-#{direction(right)}: 0;
+
+  @include breakpoint(tablet) {
+    padding-#{direction(left)}: $ic-sp + 2;
+    padding-#{direction(right)}: $ic-sp + 2;
+  }
+}

app/views/gradebooks/grade_summary.html.erb

@@ -16,6 +16,8 @@
 # with this program. If not, see <http://www.gnu.org/licenses/>.
 %>
 <%
+  @use_responsive_design = @domain_root_account.feature_enabled?(:responsive_student_grades_page)
+
   provide :page_title, join_title(t(:page_title, "Grades for %{student}", :student => @presenter.student_name), @context.name)
 %>
 <%
@@ -77,8 +79,9 @@
       <h1 class="ic-Action-header__Heading">
         <%= t("Grades for %{student}", student: @presenter.student_name) %>
       </h1>
-
-      <div class="col-xs-6" ></div>
+      <% if !@use_responsive_design %>
+        <div class="col-xs-6" ></div>
+      <% end %>
     </div>
 
     <div id="print-grades-button-container" class="ic-Action-header__Secondary">
@@ -116,7 +119,10 @@
 
   <div id="assignments">
     <span id="aria-announcer" class="hide-text affix" aria-live="polite"></span>
-  <table id="grades_summary" class="<%= 'editable' if @presenter.editable? %> ic-Table ic-Table--hover-row">
+  <table
+    id="grades_summary"
+    class="<%= 'editable' if @presenter.editable? %> ic-Table ic-Table--hover-row <%= 'ic-Table--grades-summary-table' if @use_responsive_design %>"
+  >
     <% if @presenter.editable? %>
       <caption class="screenreader-only"><%= whatif_instructions %></caption>
     <% end %>
@@ -159,7 +165,7 @@
           <% if assignment_presenter.group %>
             <div class="context"><%= assignment_presenter.group.name %></div>
           <% end %>
-        </td>
+        </th>
         <td class="due">
           <% if assignment_presenter.has_no_group_weight?  %>
             <%= datetime_string(assignment.due_at, :due_date) rescue "" %>

app/views/layouts/application.html.erb

@@ -77,6 +77,7 @@
   body_classes << "context-#{@context.asset_string}" if @context
   body_classes << "responsive_awareness" if !!@domain_root_account&.feature_enabled?(:responsive_awareness)
   body_classes << "responsive_misc" if !!@domain_root_account&.feature_enabled?(:responsive_misc)
+  body_classes << "responsive_student_grades_page" if !!@domain_root_account&.feature_enabled?(:responsive_student_grades_page)
 -%>
 <body class="<%= (body_classes).uniq.join(" ") %>">
 <%if @current_user && @real_current_user && @real_current_user != @current_user %>

config/feature_flags/apogee_release_flags.yml

@@ -84,3 +84,8 @@ final_grade_override_in_gradebook_history:
   display_name: Final Grade Override in Gradebook History
   description: Includes overridden course grades in the Gradebook History.
   applies_to: RootAccount
+responsive_student_grades_page:
+  state: hidden
+  applies_to: RootAccount
+  display_name: Responsive Student Grades Page
+  description: Makes the student grades page responsive.