Shoelace multi-line dynamic footer block.

Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Number of replies: 7
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi all,

I've been experimenting with an idea to make a footer block that works with the Bootstrap responsive columns to display according to the number of blocks.  You may remember from a previous posting that I achieved this in respect of being ok for around six blocks or so.  This is because the available space reduces on the row due to a smaller 'span' class number.  A recent posting about block widths being consistent reminded me of the requirement to have sufficient suitable space.

So, I have adapted the code such that up to four blocks per 'row' are shown.  Any remaining blocks less than the number of blocks per row are adapted to fill the available space given the number of remaining blocks to display.  The number of blocks per row is parameterised and can be changed in the file 'layout/footerblocks.php' being the last parameter:

$OUTPUT->shoelaceblocks('footer', 'row-fluid', 'aside', 2);

If you enter more than '4' then this will be truncated.  If you enter '0' then it will not be treated correctly to use the new code - need to fix that.  Editing works as does drag and drop of a fashion, I can't break it but sometimes it's not pretty until page refresh.  Instead of using drag and drop you can edit a block and say where you want it to be on that page.

You can get the updated code to try on a DEVELOPMENT server from: https://github.com/gjb2048/moodle-theme_shoelace/tree/MOODLE_25_FOOTER_BLOCK

The effect is shown by the attached screen shot.

Thoughts / comments?

Cheers,

Gareth

Attachment mldfb.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: Shoelace multi-line dynamic footer block.

by Stuart Lamour -
Picture of Plugin developers

hi gareth,

have done a similar thing (none moodle) with a rather large colophon grid using http://masonry.desandro.com/.

even if you don't just use it as a plugin, the patterns/algorithms are rather inspiring to look at and borrow from smile

 

Average of ratings: Useful (1)
In reply to Stuart Lamour

Re: Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Stuart smile,

I'd forgotten about that as a long time ago in a Moodle far far away (1.9) I created a course format to use it: https://github.com/gjb2048/moodle-format_topmas but at the time I was still learning JS and was uncertain about YUI so used a jQuery initialisation.  But now I see that jQuery is optional so could be viable to keep Shoelace jQuery clean.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

My current thinking is that the code works well in defining the space the blocks will take up in terms of width.  The issue happens when things change via drag and drop.  I don't know if Masonry hooks into that sort of event or if it only works on window size.  What perhaps needs to happen at the end of a drag and drop event is a recalculation of the 'spanX' classes for each block.  That is where I'm not sure how theme specific the code is and is it embedded to much in core?

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoelace multi-line dynamic footer block.

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gareth

I have just been testing this theme and not sure what is happening. Adding the blocks to the footer using D&D is OK, but afterwards they appear to be hidden. I don't think they are supposed to be hidden are they? I couldn't see any settings.  Have I missed something?

Average of ratings: -
In reply to Mary Evans

Re: Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks for testing Mary.  No settings (apart from standard ones for each block to say where they should go), should just work.  Do they show up on page refresh?  Possibly D&D not completely working and get added to side-pre / side-post instead?

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I've now updated the code as found I was using an 'empy_tag' instead of a 'end_tag' typo.  The editing code has been changed such that all blocks in the footer are now 'span3' to make things easier when draging and droping within the block.  The slight snag comes with D&D from side-pre / side-post as the D&D JS would need to dynamically add a 'span3' if the destination block was 'footer'.  Currently the JS for this I think is outside of Bootstrapbase so I need to hunt it down and somehow change it for Shoelace.  But it is a minor blip as only happens when editing and everything is sorted on a page refresh.

Average of ratings: -
In reply to Gareth J Barnard

Re: Shoelace multi-line dynamic footer block.

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi all,

I think I almost have this working really well now, apart from a slight margin blip when moving blocks around in editing mode.  Ok, for a demonstration, please see:

You can get the code from:

https://github.com/gjb2048/moodle-theme_shoelace/tree/MOODLE_25_FOOTER_BLOCK

As per normal, this is 'Beta' code so NOT for production servers.

I've used some crafty CSS3 selectors to make this happen:

http://www.w3schools.com/cssref/sel_first-of-type.asp

and

http://www.w3schools.com/cssref/sel_nth-of-type.asp

The down (or possibly up) side of this is that they do not work with Internet Explorer 8.  Which I'm willing to live with :D.

If all is well I intend to add theme settings so you can set the number of blocks per row between one and four.

Thoughts, comments, feedback to help me make this a 'Stable' reality smile.

Cheers,

Gareth

Average of ratings: -