MDL-40975 Course: Move all editing icons to the end of the line

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

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;}

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

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 **/