MDL-56198 assignment: improve grading info responsiveness

BenKelada · Oct 3, 2016 · 9bee35d · 9bee35d
1 parent ddd8dc0
commit 9bee35d
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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}}
+{{/js}}