From 12b5da3ae3220da3ada2793d471fcf23768218ef Mon Sep 17 00:00:00 2001
From: Matt Hughes <mhughes@edx.org>
Date: Fri, 25 Jan 2019 11:18:06 -0500
Subject: [PATCH] Improve screen real estate usage of proctoring courseware
 banner

The banner took up too much room with the browser
zoomed in. This adds a button to hide/show much of the copy, reducing the
portion of the page on zoomed-in desktop browsers stickily obscuring
courseware. The toggle's initial state is set according to browser
width.

update semantic structure of some proctoring banner elements

JIRA:EDUCATOR-3899

JIRA:EDUCATOR-3900
---
 .../course/layout/_courseware_preview.scss     |  7 ++++++-
 .../proctored-exam-status.underscore           | 18 ++++++++++++------
 requirements/edx/base.txt                      |  2 +-
 requirements/edx/development.txt               |  2 +-
 requirements/edx/testing.txt                   |  2 +-
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss
index 82447d5421..b53628e14f 100644
--- a/lms/static/sass/course/layout/_courseware_preview.scss
+++ b/lms/static/sass/course/layout/_courseware_preview.scss
@@ -1,3 +1,4 @@
+$proctoring-banner-text-size: 14px;
 .wrapper-preview-menu {
   @include clearfix();
 
@@ -67,7 +68,7 @@
   }
 
   .exam-timer {
-    font-size: 14px;
+    font-size: $proctoring-banner-text-size;
     background-color: rgb(229, 234, 236);
     padding: $baseline ($baseline*2);
     border-left: 4px solid theme-color("primary");
@@ -190,6 +191,10 @@
         border-top-left-radius: 0;
         margin-right: 0;
       }
+      h3 {
+        display: inline;
+        font-size: $proctoring-banner-text-size;
+      }
 
       b {
         padding-right: ($baseline/5);
diff --git a/lms/templates/courseware/proctored-exam-status.underscore b/lms/templates/courseware/proctored-exam-status.underscore
index 5c47a58b6e..6f223b3c7f 100644
--- a/lms/templates/courseware/proctored-exam-status.underscore
+++ b/lms/templates/courseware/proctored-exam-status.underscore
@@ -6,12 +6,18 @@
                 .replace(/>/g, '&gt;')
         }
     %>
-    <div class='exam-text'>
+    <div class='exam-text js-exam-text' data-show-long="true">
         <% // xss-lint: disable=underscore-not-escaped %>
-        <%= interpolate_text('You are taking "{exam_link}" as a {exam_type} exam. The timer on the right shows the time remaining in the exam.', {exam_link: "<a href='" + exam_url_path + "'>"+gtLtEscape(exam_display_name)+"</a>", exam_type: (!_.isUndefined(arguments[0].exam_type)) ? exam_type : gettext('timed')}) %>
-        <%- gettext('To receive credit for problems, you must select "Submit" for each problem before you select "End My Exam".') %>
+        <%= interpolate_text('You are taking "{exam_link}" as a {exam_type} exam. ', {exam_link: "<a href='" + exam_url_path + "'>"+gtLtEscape(exam_display_name)+"</a>", exam_type: (!_.isUndefined(arguments[0].exam_type)) ? exam_type : gettext('timed')}) %>
+        <span class="js-exam-additional-text" aria-hidden="false">
+            <%- gettext('The timer on the right shows the time remaining in the exam.') %>
+            <%- gettext('To receive credit for problems, you must select "Submit" for each problem before you select "End My Exam".') %>
+        </span>
+        <button class="js-toggle-show-more btn btn-link" data-show-more-text="<%- gettext('Show More') %>" data-show-less-text="<%- gettext('Show Less') %>">
+            <%- gettext('Show Less') %>
+        </button>
     </div>
-    <div id="turn_in_exam_id" class="pull-right turn_in_exam">
+    <div id="turn_in_exam_id" class="pull-right turn_in_exam" role="region" aria-label="<%- gettext('Exam timer and end exam button')%>">
         <span>
             <% if(attempt_status !== 'ready_to_submit') {%>
                 <button class="exam-button-turn-in-exam btn btn-pl-primary btn-primary">
@@ -21,10 +27,10 @@
         </span>
         <span class="sr timer-announce" aria-live="assertive"></span>
         <span class="exam-timer-clock">
-            <span id="time_remaining_id">
+            <h3 id="time_remaining_id">
                 <b>
                 </b>
-            </span>
+            </h3>
             <button role="button" id="toggle_timer" class="btn btn-primary" aria-label="<%- gettext("Hide Timer") %>" aria-pressed="false">
                 <i class="fa fa-eye-slash" aria-hidden="true"></i>
             </button>
diff --git a/requirements/edx/base.txt b/requirements/edx/base.txt
index 4d16e6bc76..1473f75dab 100644
--- a/requirements/edx/base.txt
+++ b/requirements/edx/base.txt
@@ -124,7 +124,7 @@ edx-oauth2-provider==1.2.2
 edx-opaque-keys[django]==0.4.4
 edx-organizations==1.0.0
 edx-proctoring-proctortrack==1.0.1
-edx-proctoring==1.5.7
+edx-proctoring==1.5.8
 edx-rest-api-client==1.9.2
 edx-search==1.2.1
 edx-submissions==2.1.1
diff --git a/requirements/edx/development.txt b/requirements/edx/development.txt
index 91a2a9cf2c..9a5b9685db 100644
--- a/requirements/edx/development.txt
+++ b/requirements/edx/development.txt
@@ -143,7 +143,7 @@ edx-oauth2-provider==1.2.2
 edx-opaque-keys[django]==0.4.4
 edx-organizations==1.0.0
 edx-proctoring-proctortrack==1.0.1
-edx-proctoring==1.5.7
+edx-proctoring==1.5.8
 edx-rest-api-client==1.9.2
 edx-search==1.2.1
 edx-sphinx-theme==1.4.0
diff --git a/requirements/edx/testing.txt b/requirements/edx/testing.txt
index d9869b0604..c012ba16a1 100644
--- a/requirements/edx/testing.txt
+++ b/requirements/edx/testing.txt
@@ -138,7 +138,7 @@ edx-oauth2-provider==1.2.2
 edx-opaque-keys[django]==0.4.4
 edx-organizations==1.0.0
 edx-proctoring-proctortrack==1.0.1
-edx-proctoring==1.5.7
+edx-proctoring==1.5.8
 edx-rest-api-client==1.9.2
 edx-search==1.2.1
 edx-submissions==2.1.1