From 9bee35d5adfb177f35050b755647389e133b4cf2 Mon Sep 17 00:00:00 2001
From: Tim Hunt <T.J.Hunt@open.ac.uk>
Date: Thu, 29 Sep 2016 17:23:27 +0100
Subject: [PATCH] MDL-56198 assignment: improve grading info responsiveness

---
 mod/assign/styles.css                         |  8 ++++
 .../templates/grading_navigation.mustache     | 41 +++++++++++++++---
 .../mod_assign/grading_navigation.mustache    | 42 +++++++++++++++----
 3 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/mod/assign/styles.css b/mod/assign/styles.css
index 66031d41ffe..3e332264630 100644
--- a/mod/assign/styles.css
+++ b/mod/assign/styles.css
@@ -401,6 +401,14 @@
 .path-mod-assign [data-region="grading-navigation"] {
     padding: 1em;
 }
+.path-mod-assign [data-region="assignment-info"] {
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+.path-mod-assign [data-region="assignment-info"] small[data-region="assignment-tooltip"] {
+    margin-left: 0.5em;
+}
 
 .path-mod-assign [data-region="user-info"] {
     height: 60px;
diff --git a/mod/assign/templates/grading_navigation.mustache b/mod/assign/templates/grading_navigation.mustache
index 93f5093d062..4b107deec3f 100644
--- a/mod/assign/templates/grading_navigation.mustache
+++ b/mod/assign/templates/grading_navigation.mustache
@@ -31,13 +31,29 @@
     Example context (json):
     This template includes ajax functionality, so it cannot be shown in the template library.
 }}
+
 <div data-region="grading-navigation" class="row-fluid">
+
+{{!
+    There are three chunks, which appear side-by-side at large screen sizes.
+    A) Assignment info, which has 3 rows:
+}}
+
 <div data-region="assignment-info" class="span4">
-<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}">{{{coursename}}}</a><br/>
-<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}">{{name}}</a>
-{{#caneditsettings}}
-<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
-{{/caneditsettings}}
+
+{{!
+    Row 1) course name & link.
+}}
+<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}" title="{{{coursename}}}">{{{coursename}}}</a><br/>
+
+{{!
+    Row 2) Assignment name & link.
+}}
+<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}" title="{{name}}">{{name}}</a>
+
+{{!
+    Row 3) Edit settings, due date, with tool-tip thing.
+}}
 <div role="tooltip" id="tooltip-{{uniqid}}" class="accesshide">
 {{#duedate}}
 {{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}
@@ -51,14 +67,27 @@
 <br>{{timeremainingstr}}
 {{/duedate}}
 </div>
+
+<br/>
+{{#caneditsettings}}
+<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
+{{/caneditsettings}}
 {{#duedate}}
-<br/><small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
+<small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
 {{/duedate}}
 </span>
 </div>
+
+{{!
+    B) Current user name and info.
+}}
 <div data-region="user-info" class="span4" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}">
     {{> mod_assign/grading_navigation_user_info }}
 </div>
+
+{{!
+    C) User selector widget.
+}}
 <div data-region="user-selector" class="span4">
     <div class="alignment">
         {{> mod_assign/grading_navigation_user_selector }}
diff --git a/theme/boost/templates/mod_assign/grading_navigation.mustache b/theme/boost/templates/mod_assign/grading_navigation.mustache
index 23d1aa7ab92..bc769ab8791 100644
--- a/theme/boost/templates/mod_assign/grading_navigation.mustache
+++ b/theme/boost/templates/mod_assign/grading_navigation.mustache
@@ -33,12 +33,27 @@
 }}
 <div class="container-fluid">
 <div data-region="grading-navigation" class="row">
+
+{{!
+    There are three chunks, which appear side-by-side at large screen sizes.
+    A) Assignment info, which has 3 rows:
+}}
+
 <div data-region="assignment-info" class="col-md-4">
-<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}">{{{coursename}}}</a><br/>
-<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}">{{name}}</a>
-{{#caneditsettings}}
-<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
-{{/caneditsettings}}
+
+{{!
+    Row 1) course name & link.
+}}
+<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}" title="{{{coursename}}}">{{{coursename}}}</a><br/>
+
+{{!
+    Row 2) Assignment name & link.
+}}
+<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}" title="{{name}}">{{name}}</a>
+
+{{!
+    Row 3) Edit settings, due date, with tool-tip thing.
+}}
 <div role="tooltip" id="tooltip-{{uniqid}}" class="accesshide">
 {{#duedate}}
 {{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}
@@ -52,14 +67,27 @@
 <br>{{timeremainingstr}}
 {{/duedate}}
 </div>
+
+<br/>
+{{#caneditsettings}}
+<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
+{{/caneditsettings}}
 {{#duedate}}
-<br/><small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
+<small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
 {{/duedate}}
 </span>
 </div>
+
+{{!
+    B) Current user name and info.
+}}
 <div data-region="user-info" class="col-md-4" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}">
     {{> mod_assign/grading_navigation_user_info }}
 </div>
+
+{{!
+    C) User selector widget.
+}}
 <div data-region="user-selector" class="col-md-4">
     <div class="alignment">
         {{> mod_assign/grading_navigation_user_selector }}
@@ -72,4 +100,4 @@ require(['mod_assign/grading_navigation', 'core/tooltip'], function(GradingNavig
     var nav = new GradingNavigation('[data-region="user-selector"]');
     var tooltip = new ToolTip('[data-region="assignment-tooltip"]');
 });
-{{/js}}
\ No newline at end of file
+{{/js}}