Swapped Student Names & Activity Name Headers on Activity Completion Report 3.9

Swapped Student Names & Activity Name Headers on Activity Completion Report 3.9

by John Provasnik -
Number of replies: 1
Picture of Particularly helpful Moodlers Picture of Testers

I always found it difficult to navigate the Activity Completion report since there are no static headers/column. The addition of the Alphabet filter for student names helps a little to reduce what's on the screen, but horizontal scrolling is still necessary in big courses and I find that awkward (compared to vertical scrolling). 

So I swapped the Student names column with the Activity name Headers on Activity Completion Report 3.9 and it feels more natural when looking for an activity to manually mark complete, so I wanted to share... I use a custom theme but the idea might be the same on others.

/* Activity Completion Report Transpose Headers */
#page-report-progress-index table#completion-progress {display: flex; flex-flow; row;}
#page-report-progress-index thead tr {display: flex; flex-flow: column;}
#page-report-progress-index thead th {border-bottom: 1px solid #dee2e6;}
#page-report-progress-index tbody {display: flex; flex-flow: row;}
#page-report-progress-index tbody tr {display: flex; flex-flow: column;}
#page-report-progress-index tbody td {height: 25px; border-top: 0; border-bottom: 1px solid #dee2e6;}
#page-report-progress-index .completion-header {text-align: left;}
#page-report-progress-index .completion-header a {display: flex; flex-direction: row;}
#page-report-progress-index .completion-header .completion-expected {display: none;}
#page-report-progress-index .rotated-text-container {width: fit-contents;}
#page-report-progress-index .rotated-text:after {margin-top: unset;}
#page-report-progress-index .rotated-text {transform: translate(0,0%) rotate(0deg);}
#page-report-progress-index tbody th {white-space: nowrap;}
#page-report-progress-index #completion-progress th {width: 220px; height: 25px; text-align: center;}
#page-report-progress-index .modicon {padding-top: 5px; margin-left: -36px;}


Attachment headerswap.png
Average of ratings: Useful (4)
In reply to John Provasnik

Re: Swapped Student Names & Activity Name Headers on Activity Completion Report 3.9

by Randy Thornton -
Picture of Documentation writers

John,

This is pure gold! The report should have been like this from the start.

I am however, getting this error in Boost on 3.9:

"SCSS code is not valid, fails with: parse error: failed at `flex-flow; row;} ` (stdin) on line 2, at column 71."

I think it's just a typo with semi-colon for a colon. It parses okay and works great with this instead:

#page-report-progress-index table#completion-progress {display: flex; flex-flow: row;}

This also works in 4.0 Boost as well as 3.9 (see screenshot), although it does clip off the icon at the beginning of each row (former column). That seems to be the only difference between the report in 4.0 and earlier.

To fix the 4.0 clipping, if I set the margin-left to -42, it leaves out the icon on the row altogether:

#page-report-progress-index .modicon {padding-top: 5px; margin-left: -42px;}

or even betterL

#page-report-progress-index .modicon {display: none;}

I'm sure it can be tweaked to include the whole icon, but hiding it works for me.


Very nice !!





Attachment screenshot_12685.jpg
Attachment screenshot_12686.jpg
Average of ratings: Useful (2)