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);
}
// 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>';
}
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*/
\ No newline at end of file
+++ /dev/null
-var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
-
-function textrotate_make_svg(el)
-{
- var string=el.firstChild.nodeValue;
-
- // Add absolute-positioned string (to measure length)
- var abs=document.createElement('div');
- abs.appendChild(document.createTextNode(string));
- abs.style.position='absolute';
- document.body.appendChild(abs);
- var textWidth=abs.offsetWidth * 1.2,textHeight=abs.offsetHeight;
- document.body.removeChild(abs);
-
- // Create SVG
- var svg=document.createElementNS(SVGNS,'svg');
- svg.setAttribute('version','1.1');
- svg.setAttribute('width',20);
- svg.setAttribute('height',textWidth);
-
- // Add text
- var text=document.createElementNS(SVGNS,'text');
- svg.appendChild(text);
- text.setAttribute('x',textWidth);
- text.setAttribute('y',-textHeight/4);
- text.setAttribute('text-anchor','end');
- text.setAttribute('transform','rotate(90)');
-
- text.appendChild(document.createTextNode(string));
-
- // Is there an icon near the text?
- var icon=el.parentNode.firstChild;
- if(icon.nodeName.toLowerCase()=='img') {
- el.parentNode.removeChild(icon);
- var image=document.createElementNS(SVGNS,'image');
- var iconx=el.offsetHeight/4;
- if(iconx>width-16) iconx=width-16;
- image.setAttribute('x',iconx);
- image.setAttribute('y',textWidth+4);
- image.setAttribute('width',16);
- image.setAttribute('height',16);
- image.setAttributeNS(XLINKNS,'href',icon.src);
- svg.appendChild(image);
- }
-
- // Replace original content with this new SVG
- el.parentNode.insertBefore(svg,el);
- el.parentNode.removeChild(el);
-}
-
-function browser_supports_svg() {
- return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
-}
-
-function textrotate_init() {
- if (!browser_supports_svg()) {
- // Feature detect, else bail.
- return;
- }
-
-YUI().use('yui2-dom', function(Y) {
- var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-criterianame', 'span');
- for(var i=0;i<elements.length;i++)
- {
- var el=elements[i];
- el.parentNode.style.verticalAlign='bottom';
- el.parentNode.style.width='20px';
-
- textrotate_make_svg(el);
- }
-});
-}
$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);
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>';
}
#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;
}
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*/
+++ /dev/null
-var SVGNS='http://www.w3.org/2000/svg',XLINKNS='http://www.w3.org/1999/xlink';
-
-function textrotate_make_svg(el)
-{
- var string=el.firstChild.nodeValue;
-
- // Add absolute-positioned string (to measure length)
- var abs=document.createElement('div');
- abs.appendChild(document.createTextNode(string));
- abs.style.position='absolute';
- document.body.appendChild(abs);
- var textWidth=abs.offsetWidth * 1.2,textHeight=abs.offsetHeight;
- document.body.removeChild(abs);
-
- // Create SVG
- var svg=document.createElementNS(SVGNS,'svg');
- svg.setAttribute('version','1.1');
- var width=(textHeight*9)/8;
- svg.setAttribute('width',width);
- svg.setAttribute('height',textWidth+20);
-
- // Add text
- var text=document.createElementNS(SVGNS,'text');
- svg.appendChild(text);
- text.setAttribute('x',textWidth);
- text.setAttribute('y',-textHeight/4);
- text.setAttribute('text-anchor','end');
- text.setAttribute('transform','rotate(90)');
- text.appendChild(document.createTextNode(string));
-
- // Is there an icon near the text?
- var icon=el.parentNode.firstChild;
- if(icon.nodeName.toLowerCase()=='img') {
- el.parentNode.removeChild(icon);
- var image=document.createElementNS(SVGNS,'image');
- var iconx=el.offsetHeight/4;
- if(iconx>width-16) iconx=width-16;
- image.setAttribute('x',iconx);
- image.setAttribute('y',textWidth+4);
- image.setAttribute('width',16);
- image.setAttribute('height',16);
- image.setAttributeNS(XLINKNS,'href',icon.src);
- svg.appendChild(image);
- }
-
- // Replace original content with this new SVG
- el.parentNode.insertBefore(svg,el);
- el.parentNode.removeChild(el);
-}
-
-function browser_supports_svg() {
- return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
-}
-
-function textrotate_init() {
- if (!browser_supports_svg()) {
- // Feature detect, else bail.
- return;
- }
-
-YUI().use('yui2-dom', function(Y) {
- var elements= Y.YUI2.util.Dom.getElementsByClassName('completion-activityname', 'span');
- for(var i=0;i<elements.length;i++)
- {
- var el=elements[i];
- el.parentNode.parentNode.parentNode.style.verticalAlign='bottom';
- textrotate_make_svg(el);
- }
-
- elements= Y.YUI2.util.Dom.getElementsByClassName('completion-expected', 'div');
- for(var i=0;i<elements.length;i++)
- {
- var el=elements[i];
- el.style.display='inline';
- var parent=el.parentNode;
- parent.removeChild(el);
- parent.insertBefore(el,parent.firstChild);
- textrotate_make_svg(el.firstChild);
- }
-
- elements= Y.YUI2.util.Dom.getElementsByClassName('rotateheaders', 'table');
- for(var i=0;i<elements.length;i++)
- {
- var table=elements[i];
- var headercells = Y.YUI2.util.Dom.getElementsByClassName('header', 'th', table);
- for(var j=0;j<headercells.length;j++)
- {
- var el=headercells[j];
- textrotate_make_svg(el.firstChild);
- }
- }
-});
-}
-
