MDL-36550 usability: CSS updates on course page

diff --git a/blocks/navigation/styles.css b/blocks/navigation/styles.css
index 6d08f5e..9126897 100644 (file)
--- a/blocks/navigation/styles.css
+++ b/blocks/navigation/styles.css
@@ -7,6 +7,7 @@
 .block_navigation .block_tree li > p.hasicon img {vertical-align:middle;position:absolute;left:0;top:-1px;width:16px;height:16px;}
 .block_navigation .block_tree li.item_with_icon.contains_branch > p img {left:16px;}
 .block_navigation .block_tree .type_activity > p.branch.hasicon,
+.block_navigation .block_tree .type_activity > p.emptybranch.hasicon,
 .block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-left:37px;}
 
 .block_navigation .block_tree li ul {padding-left:0;margin:0;}
@@ -16,7 +17,9 @@
 
 .block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 0;background-repeat: no-repeat;}
 .block_navigation .block_tree .tree_item.branch.navigation_node {background-image:none;padding-left:0;}
+.block_navigation .block_tree .type_activity > .tree_item.emptybranch,
 .block_navigation .block_tree .type_activity > .tree_item.branch {background-image:none;position:relative;}
+.block_navigation .block_tree .type_activity > .tree_item.hasicon.emptybranch img,
 .block_navigation .block_tree .type_activity > .tree_item.branch img {left: 16px;}
 .block_navigation .block_tree .root_node.leaf {padding-left:0px;}
 .block_navigation .block_tree .active_tree_node {font-weight:bold;}

diff --git a/course/format/topics/styles.css b/course/format/topics/styles.css
index 3460a0a..432ad96 100644 (file)
--- a/course/format/topics/styles.css
+++ b/course/format/topics/styles.css
@@ -1,7 +1,10 @@
 .course-content ul.topics {margin:0;}
-.course-content ul.topics li.section {list-style: none;margin:5px 0 0 0;padding:0;}
+.course-content ul.topics li.section {list-style: none;margin:0 0 5px 0;padding:0;}
 .course-content ul.topics li.section .content {margin:0 40px;}
-.course-content ul.topics li.section .left {width:40px;float:left;text-align:center;padding-top: 4px;}
-.course-content ul.topics li.section .right {width:40px;float:right;text-align:center;padding-top: 4px;}
+.course-content ul.topics li.section .left {float:left;}
+.course-content ul.topics li.section .right {float:right;}
+.course-content ul.topics li.section .left,
+.course-content ul.topics li.section .right {width:40px;text-align:center;padding: 6px 0;}
+.course-content ul.topics li.section .right img.icon { padding: 0 0 4px 0;}
 .course-content ul.topics li.section .left .section-handle img.icon { padding:0; vertical-align: baseline; }
 .jumpmenu {text-align:center;}

diff --git a/course/format/weeks/styles.css b/course/format/weeks/styles.css
index 17cf4cd..80d3479 100644 (file)
--- a/course/format/weeks/styles.css
+++ b/course/format/weeks/styles.css
@@ -1,7 +1,10 @@
 .course-content ul.weeks {margin:0;}
-.course-content ul.weeks li.section {list-style: none;margin:5px 0 0 0;padding:0;}
+.course-content ul.weeks li.section {list-style: none;margin:0 0 5px 0;padding:0;}
 .course-content ul.weeks li.section .content {margin:0 40px;}
-.course-content ul.weeks li.section .left {width:40px;float:left;text-align:center;padding-top: 4px;}
-.course-content ul.weeks li.section .right {width:40px;float:right;text-align:center;padding-top: 4px;}
+.course-content ul.weeks li.section .left {float:left;}
+.course-content ul.weeks li.section .right {float:right;}
+.course-content ul.weeks li.section .left,
+.course-content ul.weeks li.section .right {width:40px;text-align:center;padding: 6px 0;}
+.course-content ul.weeks li.section .right img.icon { padding: 0 0 4px 0;}
 .course-content ul.weeks li.section .left .section-handle img.icon { padding:0; vertical-align: baseline; }
 .jumpmenu {text-align:center;}
\ No newline at end of file

diff --git a/course/lib.php b/course/lib.php
index 9f5fce1..e1a54f0 100644 (file)
--- a/course/lib.php
+++ b/course/lib.php
@@ -1484,6 +1484,9 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                 $altname = get_accesshide(' '.$altname);
             }
 
+            // Start the div for the activity title, excluding the edit icons.
+            echo html_writer::start_tag('div', array('class' => 'activityinstance'));
+
             // We may be displaying this just in order to show information
             // about visibility, without the actual link
             $contentpart = '';
@@ -1498,51 +1501,49 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
                         $linkclasses .= ' conditionalhidden';
                         $textclasses .= ' conditionalhidden';
                     }
-                    $accesstext = '<span class="accesshide">'.
-                        get_string('hiddenfromstudents').': </span>';
+                    $accesstext = get_accesshide(get_string('hiddenfromstudents').': ');
                 } else {
                     $accesstext = '';
                 }
                 if ($linkclasses) {
-                    $linkcss = 'class="activityinstance ' . trim($linkclasses) . '" ';
+                    $linkcss = trim($linkclasses) . ' ';
                 } else {
-                    $linkcss = 'class="activityinstance"';
+                    $linkcss = '';
                 }
                 if ($textclasses) {
-                    $textcss = 'class="' . trim($textclasses) . '" ';
+                    $textcss = trim($textclasses) . ' ';
                 } else {
                     $textcss = '';
                 }
 
                 // Get on-click attribute value if specified
                 $onclick = $mod->get_on_click();
-                if ($onclick) {
-                    $onclick = ' onclick="' . $onclick . '"';
+
+                $groupinglabel = '';
+                if (!empty($mod->groupingid) && has_capability('moodle/course:managegroups', context_course::instance($course->id))) {
+                    $groupings = groups_get_all_groupings($course->id);
+                    $groupinglabel = html_writer::tag('span', '('.format_string($groupings[$mod->groupingid]->name).')',
+                            array('class' => 'groupinglabel'));
                 }
 
                 if ($url = $mod->get_url()) {
-                    // Display link itself
-                    echo '<a ' . $linkcss . $mod->extra . $onclick .
-                            ' href="' . $url . '"><img src="' . $mod->get_icon_url() .
-                            '" class="iconlarge activityicon" alt="' . $mod->modfullname . '" />' .
-                            $accesstext . '<span class="instancename">' .
-                            $instancename . $altname . '</span></a>';
-
-                    // If specified, display extra content after link
+                    // Display link itself.
+                    $activitylink = html_writer::empty_tag('img', array('src' => $mod->get_icon_url(),
+                            'class' => 'iconlarge activityicon', 'alt' => $mod->modfullname)) . $accesstext .
+                            html_writer::tag('span', $instancename . $altname, array('class' => 'instancename'));
+                    echo html_writer::link($url, $activitylink, array('class' => $linkcss, 'onclick' => $onclick)) .
+                            $groupinglabel;
+
+                    // If specified, display extra content after link.
                     if ($content) {
-                        $contentpart = '<div class="' . trim('contentafterlink' . $textclasses) .
-                                '">' . $content . '</div>';
+                        $contentpart = html_writer::tag('div', $content, array('class' =>
+                                trim('contentafterlink ' . $textclasses)));
                     }
                 } else {
-                    // No link, so display only content
-                    $contentpart = '<div ' . $textcss . $mod->extra . '>' .
-                            $accesstext . $content . '</div>';
+                    // No link, so display only content.
+                    $contentpart = html_writer::tag('div', $accesstext . $content, array('class' => $textcss));
                 }
 
-                if (!empty($mod->groupingid) && has_capability('moodle/course:managegroups', context_course::instance($course->id))) {
-                    $groupings = groups_get_all_groupings($course->id);
-                    echo " <span class=\"groupinglabel\">(".format_string($groupings[$mod->groupingid]->name).')</span>';
-                }
             } else {
                 $textclasses = $extraclasses;
                 $textclasses .= ' dimmed_text';
@@ -1573,6 +1574,9 @@ function print_section($course, $section, $mods, $modnamesused, $absolute=false,
             // Module can put text after the link (e.g. forum unread)
             echo $mod->get_after_link();
 
+            // Closing the tag which contains everything but edit icons. $contentpart should not be part of this.
+            echo html_writer::end_tag('div');
+
             // If there is content but NO link (eg label), then display the
             // content here (BEFORE any icons). In this case cons must be
             // displayed after the content so that it makes more sense visually
@@ -3349,7 +3353,10 @@ function make_editing_buttons(stdClass $mod, $absolute_ignored = true, $movesele
         );
     }
 
-    $output = html_writer::start_tag('span', array('class' => 'commands'));
+    // The space added before the <span> is a ugly hack but required to set the CSS property white-space: nowrap
+    // and having it to work without attaching the preceding text along with it. Hopefully the refactoring of
+    // the course page HTML will allow this to be removed.
+    $output = ' ' . html_writer::start_tag('span', array('class' => 'commands'));
     foreach ($actions as $action) {
         if ($action instanceof renderable) {
             $output .= $OUTPUT->render($action);

diff --git a/lib/completionlib.php b/lib/completionlib.php
index 05d24d4..1dd79dd 100644 (file)
--- a/lib/completionlib.php
+++ b/lib/completionlib.php
@@ -259,9 +259,9 @@ class completion_info {
         global $PAGE, $OUTPUT;
         $result = '';
         if ($this->is_enabled() && !$PAGE->user_is_editing() && isloggedin() && !isguestuser()) {
-            $result .= '<span id = "completionprogressid" class="completionprogress">'.get_string('yourprogress','completion').' ';
-            $result .= $OUTPUT->help_icon('completionicons', 'completion');
-            $result .= '</span>';
+            $result .= html_writer::tag('div', get_string('yourprogress','completion') .
+                    $OUTPUT->help_icon('completionicons', 'completion'), array('id' => 'completionprogressid',
+                    'class' => 'completionprogress'));
         }
         return $result;
     }

diff --git a/theme/base/style/course.css b/theme/base/style/course.css
index 1bd7200..38ea247 100644 (file)
--- a/theme/base/style/course.css
+++ b/theme/base/style/course.css
@@ -19,13 +19,20 @@
 .dir-rtl .sitetopic .section .activity img.activityicon,
 .dir-rtl .course-content .section .activity img.activityicon {margin-left: 6px; margin-right: 0;}
 .sitetopic .section .activity .activityinstance,
-.course-content .section .activity .activityinstance { padding-right: 3em;}
+.course-content .section .activity .activityinstance
+.sitetopic .section .activity .activityinstance div,
+.course-content .section .activity .activityinstance div, { display: inline;}
+.sitetopic .section .activity .activityinstance,
+.course-content .section .activity .activityinstance { padding-right: 3em; }
 .dir-rtl .sitetopic .section .activity .activityinstance,
 .dir-rtl .course-content .section .activity .activityinstance { padding-right: 0; padding-left: 3em;}
+.sitetopic .section .activity .commands,
+.course-content .section .activity .commands { white-space: nowrap; display: inline; }
 .sitetopic .section .activity .commands img,
 .course-content .section .activity .commands img { vertical-align: baseline; padding: 0 2px; }
 .sitetopic .section li.activity,
 .course-content .section li.activity {padding: .2em;}
+.section .activity .activityinstance .groupinglabel { padding-left: .45em; }
 .sitetopic .section .activity .availabilityinfo,
 .sitetopic .section .activity .contentafterlink,
 .course-content .section .activity .availabilityinfo,
@@ -34,10 +41,11 @@
 .dir-rtl .sitetopic .section .activity .contentafterlink,
 .dir-rtl .course-content .section .activity .availabilityinfo,
 .dir-rtl .course-content .section .activity .contentafterlink { margin-left: 0; margin-right: 30px;}
+.section .activity .contentafterlink p { margin:.5em 0; }
 .sitetopic .section .activity:hover,
 .course-content .section .activity:hover { background-color: #EEE; }
 .course-content .section-summary { border: 1px solid #DDD; margin-top: 5px; list-style: none; }
-.course-content .section-summary .section-title  { margin: 2px 5px 2px 5px; }
+.course-content .section-summary .section-title  { margin: 2px 5px 10px 5px; }
 .course-content .section-summary .summarytext { margin: 2px 5px 2px 5px; }
 .course-content .section-summary .section-summary-activities .activity-count {margin-right: 10px;color: #AAA; font-size: 12px; margin-right: 15px;}
 .course-content .section-summary .summary { margin-top: 5px; }
@@ -61,9 +69,9 @@
 .path-course-view .subscribelink {text-align:right;}
 .path-course-view .unread {margin-left: 3em;}
 .path-course-view .block.drag .header {cursor: move;}
-.path-course-view .completionprogress {float:right;}
-.path-course-view .completionprogress img.iconhelp {vertical-align:top;}
-.path-course-view .single-section .completionprogress {margin-right: -3.5em; padding-left: 1.5em; padding-right: 0em;}
+.path-course-view .completionprogress { text-align: right; }
+.dir-rtl.path-course-view .completionprogress { text-align: left; }
+.path-course-view .single-section .completionprogress { margin-right: 5px; }
 .path-course-view .section .summary {line-height:normal;}
 
 .path-site li.activity > div,

diff --git a/theme/magazine/style/core.css b/theme/magazine/style/core.css
index a8db47e..bb572db 100644 (file)
--- a/theme/magazine/style/core.css
+++ b/theme/magazine/style/core.css
@@ -1028,7 +1028,7 @@ div.course-content div.left.side {
     color: #666;
 }
 
-span.completionprogress {
+div.completionprogress {
     font-size: 11px;
     font-weight: 200;
 }

diff --git a/theme/standard/style/core.css b/theme/standard/style/core.css
index 7da1eda..adbae91 100644 (file)
--- a/theme/standard/style/core.css
+++ b/theme/standard/style/core.css
@@ -92,6 +92,11 @@ table.formtable tbody th {background-color: transparent;background-image: none;}
 
 .mod_introbox {border-color:#DDDDDD;}
 
+.block_navigation .dimmed img,
+.block_site_main_menu .dimmed img,
+.sitetopic .dimmed img.activityicon,
+.path-course-view .dimmed img.activityicon {opacity:0.5;filter: alpha(opacity=50);}
+
 /**
  * Docs
  */

diff --git a/theme/standard/style/course.css b/theme/standard/style/course.css
index 0d78973..c20c07a 100644 (file)
--- a/theme/standard/style/course.css
+++ b/theme/standard/style/course.css
@@ -39,8 +39,8 @@
 .path-course-view .section td.side {background: #FFFFFF;}
 .path-course-view .weeks .current,
 .path-course-view .topics .current,
-.path-course-view .current td.side {background: #FFD991;}
-.path-course-view .section-summary.current {border-color: #FFD991;}
+.path-course-view .current td.side {background: #9fc6fb;}
+.path-course-view .section-summary.current {border-color: #9fc6fb;}
 .path-course-view .weeks .hidden,
 .path-course-view .topics .hidden,
 .path-course-view .hidden td.side {background: #DDDDDD;}
@@ -63,7 +63,7 @@
 #page-import .plugin {margin-bottom: 20px;margin-left:10%;margin-right:10%;border: 1px solid #cecece;background-color: #fdfdfd;}
 
 .path-course-view .unread {background: #9EBEFF;}
-.path-course-view .completionprogress {font-size:0.80em; padding:8px 26px 5px 5px;}
+.path-course-view .completionprogress {font-size:0.80em; margin-right: 1.5em; }
 
 #page-course-category .courseboxes,
 #page-course-index .courseboxes {padding:20px;}

diff --git a/theme/upgrade.txt b/theme/upgrade.txt
index 908ffb5..8197060 100644 (file)
--- a/theme/upgrade.txt
+++ b/theme/upgrade.txt
@@ -5,6 +5,7 @@ information provided here is intended especially for theme designer.
 
 required changes:
 * output course and course content header/footer that may be returned by course format (see MDL-36048)
+* span.completionprogress has been changed to a <div> and is not a float by default any more.
 
 deprecation:
 * i/roles: Use t/assignroles instead