YouTube magic that brings views, likes and suibscribers
Get Free YouTube Subscribers, Views and Likes

Vertical space? Moodle in 2D?! On/Off the grid? Following the rabbit hole of .activity-grid.

Follow
WiseCat

In this response to a viewer question, I go down a rabbit hole looking at the CSS for activity items. Since the last time I saw that code, it appears Moodle has started to use CSS Grid in its layouts (just me who didn't notice this?). This has me a bit excited to see what future UX improvements will come given that grid is a rather handy tool for complex 2D layouts.

Checkout Kevin Powell's channel if you want more of that CSS Grid magic. He has a whole playlist of videos on grid:    • CSS Grid videos  

As for the solution to the original question, here is the CSS I made (not really ready for production) in this video.

/* Change the layout for the activity item grid */
.activityitem .activitygrid {
gridtemplatecolumns: mincontent mincontent 1fr mincontent mincontent mincontent;
gridtemplateareas:
"icon name afterlink groupmode completion actions"
"icon altcontent altcontent altcontent altcontent altcontent"
"icon availability availability availability availability availability";
}

/* Prevent the activity name from wrapping (likely to break some stuff) */
.activityitem .activitynamearea {
whitespace: nowrap;
}

/* Remove spacing and border from above the file metadata and set this to to nowrap */
.activityitem .activityafterlink {
gridarea: afterlink;
margintop: unset;
paddingtop: unset;
bordertop: unset;
whitespace: nowrap;
}

posted by Leonidensl