From 26dd99d29288a13a65cb9b2c5c697c26b449a06b Mon Sep 17 00:00:00 2001 From: Andrew Nicols Date: Tue, 29 Oct 2013 15:35:38 +0800 Subject: [PATCH] MDL-40975 Course: Move all editing icons to the end of the line --- course/renderer.php | 16 +++- theme/base/style/course.css | 66 ++++++++++++++-- theme/bootstrapbase/less/moodle/course.less | 76 ++++++++++++++++++- .../bootstrapbase/less/moodle/responsive.less | 1 - 4 files changed, 144 insertions(+), 15 deletions(-) diff --git a/course/renderer.php b/course/renderer.php index b741c24afa9..781b7767490 100644 --- a/course/renderer.php +++ b/course/renderer.php @@ -609,6 +609,9 @@ class core_course_renderer extends plugin_renderer_base { } $completion = $completioninfo->is_enabled($mod); if ($completion == COMPLETION_TRACKING_NONE) { + if ($this->page->user_is_editing()) { + $output .= html_writer::span(' ', 'filler'); + } return $output; } @@ -972,7 +975,7 @@ class core_course_renderer extends plugin_renderer_base { $output .= course_get_cm_move($mod, $sectionreturn); } - $output .= html_writer::start_tag('span', array('class' => $indentclasses)); + $output .= html_writer::start_tag('div', array('class' => $indentclasses)); // Start the div for the activity title, excluding the edit icons. $output .= html_writer::start_tag('div', array('class' => 'activityinstance')); @@ -1001,13 +1004,18 @@ class core_course_renderer extends plugin_renderer_base { $output .= $contentpart; } + $modicons = ''; if ($this->page->user_is_editing()) { $editactions = course_get_cm_edit_actions($mod, $mod->indent, $sectionreturn); - $output .= ' '. $this->course_section_cm_edit_actions($editactions, $mod, $displayoptions); - $output .= $mod->get_after_edit_icons(); + $modicons .= ' '. $this->course_section_cm_edit_actions($editactions, $mod, $displayoptions); + $modicons .= $mod->get_after_edit_icons(); } - $output .= $this->course_section_cm_completion($course, $completioninfo, $mod, $displayoptions); + $modicons .= $this->course_section_cm_completion($course, $completioninfo, $mod, $displayoptions); + + if (!empty($modicons)) { + $output .= html_writer::span($modicons, 'actions'); + } // If there is content AND a link, then display the content here // (AFTER any icons). Otherwise it was displayed before diff --git a/theme/base/style/course.css b/theme/base/style/course.css index 32c66257dea..b897e9c47ab 100644 --- a/theme/base/style/course.css +++ b/theme/base/style/course.css @@ -16,22 +16,71 @@ .course-content ul.section { margin: 1em;} .sitetopic .section .activity img.activityicon, .course-content .section .activity img.activityicon { - vertical-align: middle; + vertical-align: text-bottom; margin-right: 3px; margin-left: 3px; width: 24px; height: 24px; } -.section .activity .activityinstance .instancename { - vertical-align: bottom; -} + .sitetopic .section .activity .activityinstance, .course-content .section .activity .activityinstance, +.section .activity .activityinstance { + display: inline-block; +} + +.section .activity .editing_move { + position: absolute; + left: 0; + top: 0; +} + +.dir-rtl .section .activity .editing_move { + left: auto; + right: 0; +} + +.section .activity .mod-indent { + padding-left: 24px; +} + +.dir-rtl .section .activity .mod-indent { + padding-left: auto; + padding-right: 24px; +} + +.section .activity .actions { + position: absolute; + right: 0; + top: 0; +} + +.dir-rtl .section .activity .actions { + left: 0; + right: auto; +} + .sitetopic .section .activity .activityinstance div, .course-content .section .activity .activityinstance div { display: inline;} .course-content .section .activity .activityinstance form { display: inline;} .sitetopic .section .activity .activityinstance, -.course-content .section .activity .activityinstance { padding-right: 1em; } +.course-content .section .activity .activityinstance { + height: 2em; +} + +.editing .sitetopic .section .activity .activityinstance, +.editing .course-content .section .activity .activityinstance { + padding-right: 200px; + height: 2em; + display: table-cell; +} + +.dir-rtl.editing .sitetopic .section .activity .activityinstance, +.dir-rtl.editing .course-content .section .activity .activityinstance { + padding-left: 200px; + padding-right: auto; +} + .course-content .section .activity .filler { width: 16px; height: 16px; @@ -43,7 +92,10 @@ .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-block; padding: 0 3em 0 0;} +.course-content .section .activity .commands { + white-space: nowrap; + display: inline-block; +} .dir-rtl .sitetopic .section .activity .commands, .dir-rtl .course-content .section .activity .commands { padding: 0 0 0 3em;} @@ -122,9 +174,7 @@ .path-site li.activity > div, .path-course-view li.activity > div {position:relative;} -.path-course-view li.activity span.autocompletion, .path-course-view li.activity form.togglecompletion {position: absolute; top: 0; right: .2em;} -.path-course-view li.activity span.autocompletion img, .path-course-view li.activity form.togglecompletion input {position:absolute; top: .25em; right: 0px;} .path-course-view li.activity form.togglecompletion .ajaxworking {position:absolute; right: 22px; top: 5px; width: 16px; height: 16px; background: url([[pix:i/ajaxloader]]) no-repeat;} .path-course-view li.activity form.togglecompletion div {display:inline;} diff --git a/theme/bootstrapbase/less/moodle/course.less b/theme/bootstrapbase/less/moodle/course.less index 5c3b9672526..30a1311be03 100644 --- a/theme/bootstrapbase/less/moodle/course.less +++ b/theme/bootstrapbase/less/moodle/course.less @@ -49,6 +49,28 @@ left: 0; position: absolute; } + + .editing_move { + /* Move the move icon to the start of the line */ + position: absolute; + left: 0; + top: 0; + } + + .mod-indent { + /** + * Add appropriate padding such that nothing overlaps the + * absolute positioned move icon. + */ + padding-left: 32px; + } + + /* The command block for each activity */ + .actions { + position: absolute; + right: 0; + top: 0; + } } .filler { @@ -76,6 +98,35 @@ } } +.dir-rtl .section { + .activity { + .spinner { + left: 0; + } + + .editing_move { + /* Move the move icon to the start of the line */ + left: auto; + right: 0; + } + + .mod-indent { + /** + * Add appropriate padding such that nothing overlaps the + * absolute positioned move icon. + */ + padding-left: auto; + padding-right: 32px; + } + + /* The command block for each activity */ + .actions { + left: 0; + right: auto; + } + } +} + .activity img.activityicon { margin-right: 6px; vertical-align: text-bottom; @@ -88,9 +139,30 @@ .section .activity .activityinstance div { display: inline-block; } -.editing .section .activity .activityinstance { - min-width: 40%; +.editing { + .section { + .activity { + .activityinstance { + min-width: 40%; + display: table-cell; + padding-right: 200px; + min-height: 2em; + } + } + } } + +.dir-rtl.editing { + .section { + .activity { + .activityinstance { + padding-left: 200px; + padding-right: 0; + } + } + } +} + .editing_show + .editing_assign, .editing_hide + .editing_assign { // if roles icon missing, add space diff --git a/theme/bootstrapbase/less/moodle/responsive.less b/theme/bootstrapbase/less/moodle/responsive.less index 60bb5bdb534..c6ef21da51e 100644 --- a/theme/bootstrapbase/less/moodle/responsive.less +++ b/theme/bootstrapbase/less/moodle/responsive.less @@ -230,7 +230,6 @@ border-bottom: thin solid #eee; } .course-content .section .activity .commands { - display: block; text-align: right; } /** Handles display of the activity chooser on small screens **/