Moodle 2.6 Clean Theme Resizing from 3 to 2 Columns

Moodle 2.6 Clean Theme Resizing from 3 to 2 Columns

Drew LaChapelle發表於
Number of replies: 4

The responsive Clean Theme in 2.6 shrinks from 3 columns to 1 column when resizing the browser window.  Is there a reason why it does not shrink from 3 columns to 2 columns first and then to one column?  It seems like tablet users would benefit from a 2 column view.  We are thinking about changing the theme to behave this way but wanted to know if there were compelling reasons not to make this change.

評比平均分數: -
In reply to Drew LaChapelle

Re: Moodle 2.6 Clean Theme Resizing from 3 to 2 Columns

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

As Gareth says, its the way Bootstrap was set up and where its @media breakpoints are.

Its one of the reasons I did the buckle theme a while ago to take the bootstrap styling, but use Danny's rebase layouts from Zebra (that Id used in Krystle previously) to create the layouts - full size screens = 3 col, smaller widths = 2col and smallest = 1 col. Its only a base theme, not a full production theme, but gives some idea of what can be done - Ive also got one that uses flexbox for its layouts that should reach beta and be up on github during the Christmas holidays - if only I can get to the stage where Im happy with the fallbacks for the browsers that dont support flexbox 微笑

In reply to Drew LaChapelle

Re: Moodle 2.6 Clean Theme Resizing from 3 to 2 Columns

Mary Evans發表於

Take a look at the Afterburner theme, that uses some responsive @media css which caters for different device types.

In reply to Drew LaChapelle

Re: Moodle 2.6 Clean Theme Resizing from 3 to 2 Columns

David Scotson發表於
I originally prototyped it to do exactly this, but it's trickier than it looks because of interactions between the way Bootstrap does responsive design, and the way Moodle does RTL, accessability, javascript drag'n'drop of blocks (particulary to areas that currently don't have blocks) and probably a few other things.

As a result of that, I'm generally leaning towards solving all those (and a few other) problems at once by enforcing a max of two columns (and furthermore forcing the block column to remain on the same side).

It's possible that changes made to the grid system in Bootstrap 3 make this easier than it was before, but I've not fully investigated that avenue.
評比平均分數:Useful (1)