From 85414ff9761527ffcab6c85a7f77bc5f4f70982d Mon Sep 17 00:00:00 2001 From: Adrian Packel Date: Mon, 17 Aug 2020 11:30:16 -0500 Subject: [PATCH] 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 Reviewed-by: Spencer Olson Reviewed-by: Syed Hussain QA-Review: Daniel Sasaki Product-Review: Jody Sailor --- app/stylesheets/bundles/grade_summary.scss | 70 ++++++++++++++++--- app/views/gradebooks/grade_summary.html.erb | 14 ++-- app/views/layouts/application.html.erb | 1 + config/feature_flags/apogee_release_flags.yml | 5 ++ 4 files changed, 78 insertions(+), 12 deletions(-) diff --git a/app/stylesheets/bundles/grade_summary.scss b/app/stylesheets/bundles/grade_summary.scss index 9fa331a4526..0c14ed5ba69 100644 --- a/app/stylesheets/bundles/grade_summary.scss +++ b/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; + } +} diff --git a/app/views/gradebooks/grade_summary.html.erb b/app/views/gradebooks/grade_summary.html.erb index c032234fb30..e45685fd5d1 100644 --- a/app/views/gradebooks/grade_summary.html.erb +++ b/app/views/gradebooks/grade_summary.html.erb @@ -16,6 +16,8 @@ # with this program. If not, see . %> <% + @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 @@

<%= t("Grades for %{student}", student: @presenter.student_name) %>

- -
+ <% if !@use_responsive_design %> +
+ <% end %>
@@ -116,7 +119,10 @@
- +
<% if @presenter.editable? %> <% end %> @@ -159,7 +165,7 @@ <% if assignment_presenter.group %>
<%= assignment_presenter.group.name %>
<% end %> - +
<%= whatif_instructions %>
<% if assignment_presenter.has_no_group_weight? %> <%= datetime_string(assignment.due_at, :due_date) rescue "" %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 87161045404..37bf5295122 100644 --- a/app/views/layouts/application.html.erb +++ b/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) -%> "> <%if @current_user && @real_current_user && @real_current_user != @current_user %> diff --git a/config/feature_flags/apogee_release_flags.yml b/config/feature_flags/apogee_release_flags.yml index 97b21c04e1e..4ee8ff30b35 100644 --- a/config/feature_flags/apogee_release_flags.yml +++ b/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.