MDL-57527 reports: remove JS svg rotation

Just use CSS

report/completion/index.php

@@ -156,9 +156,6 @@
 
     echo $OUTPUT->header();
 
-    $PAGE->requires->js('/report/completion/textrotate.js');
-    $PAGE->requires->js_function_call('textrotate_init', null, true);
-
     // Handle groups (if enabled)
     groups_print_course_menu($course, $CFG->wwwroot.'/report/completion/?course='.$course->id);
 }
@@ -417,13 +414,13 @@
             // Get criteria details
             $details = $criterion->get_title_detailed();
             print '<th scope="col" class="colheader criterianame">';
-            print '<span class="completion-criterianame">'.$details.'</span>';
+            print '<div class="rotated-text-container"><span class="rotated-text">'.$details.'</span></div>';
             print '</th>';
         }
 
         // Overall course completion status
         print '<th scope="col" class="colheader criterianame">';
-        print '<span class="completion-criterianame">'.get_string('coursecomplete', 'completion').'</span>';
+        print '<div class="rotated-text-container"><span class="rotated-text">'.get_string('coursecomplete', 'completion').'</span></div>';
         print '</th></tr>';
     }
 

report/completion/styles.css

@@ -7,7 +7,32 @@
     text-align: center;
     list-style: none;
 }
-/*rtl:ignore*/
-#page-report-completion-index #completion-progress th svg {
-    direction: ltr;
+
+#page-report-completion-index .criterianame,
+#page-report-completion-index .criteriaicon,
+#page-report-completion-index .completion-progresscell {
+    text-align: center;
+}
+
+/* Custom CSS for rotated header.. */
+#page-report-completion-index .rotated-text-container {
+    display: inline-block;
+    width: 16px;
+}
+
+/*rtl:begin:ignore*/
+#page-report-completion-index .rotated-text {
+    display: inline-block;
+    white-space: nowrap;
+
+    transform: translate(0, 100%) rotate(-90deg);
+    transform-origin: 0 0;
+    vertical-align: middle;
+}
+
+#page-report-completion-index .rotated-text:after {
+    content: "";
+    float: left;
+    margin-top: 100%;
 }
+/*rtl:end:ignore*/

report/progress/index.php

@@ -154,8 +154,6 @@ function csv_quote($value) {
     $PAGE->set_title($strcompletion);
     $PAGE->set_heading($course->fullname);
     echo $OUTPUT->header();
-    $PAGE->requires->js('/report/progress/textrotate.js');
-    $PAGE->requires->js_function_call('textrotate_init', null, true);
 
     // Handle groups (if enabled)
     groups_print_course_menu($course,$CFG->wwwroot.'/report/progress/?course='.$course->id);
@@ -323,13 +321,14 @@ function csv_quote($value) {
         print $sep.csv_quote($displayname).$sep.csv_quote($datetext);
     } else {
         $shortenedname = shorten_text($displayname);
-        print '<th scope="col" class="'.$datepassedclass.'">'.
+        print '<th scope="col" class="completion-header '.$datepassedclass.'">'.
             '<a href="'.$CFG->wwwroot.'/mod/'.$activity->modname.
             '/view.php?id='.$activity->id.'" title="' . s($displayname) . '">'.
-            '<img src="'.$OUTPUT->pix_url('icon', $activity->modname).'" alt="'.
+            '<div class="rotated-text-container"><span class="rotated-text">'.$shortenedname.'</span></div>'.
+            '<div class="modicon"><img src="'.$OUTPUT->pix_url('icon', $activity->modname).'" alt="'.
             s(get_string('modulename', $activity->modname)).
-                '" /> <span class="completion-activityname">'.
-            $shortenedname.'</span></a>';
+            '" /></div></a>';
+
         if ($activity->completionexpected) {
             print '<div class="completion-expected"><span>'.$datetext.'</span></div>';
         }

report/progress/styles.css

@@ -1,6 +1,6 @@
 #page-report-progress-index #completion-progress th,
 #page-report-progress-index #completion-progress td {
-    padding: 2px 4px;
+    padding: 2px 2px;
     font-weight: normal;
     border-right: 1px solid #eee;
 }
@@ -28,7 +28,35 @@
     display: inline;
     margin-left: 2em;
 }
-/*rtl:ignore*/
-#page-report-progress-index #completion-progress th svg {
-    direction: ltr;
+
+#page-report-progress-index .completion-header,
+#page-report-progress-index .completion-progresscell {
+    text-align: center;
+}
+
+/* Custom CSS for rotated header.. */
+#page-report-progress-index .rotated-text-container {
+    display: inline-block;
+    width: 16px;
+}
+
+/*rtl:begin:ignore*/
+#page-report-progress-index .rotated-text {
+    display: inline-block;
+    white-space: nowrap;
+
+    transform: translate(0, 100%) rotate(-90deg);
+    transform-origin: 0 0;
+    vertical-align: middle;
+}
+
+#page-report-progress-index .rotated-text:after {
+    content: "";
+    float: left;
+    margin-top: 100%;
+}
+
+#page-report-progress-index .modicon {
+    padding-top: 5px;
 }
+/*rtl:end:ignore*/