Moodle

replace the table layout in theme/standard/layout.php with something better

Details

  • Type: Sub-task Sub-task
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: 2.0
  • Fix Version/s: 2.0
  • Component/s: Themes
  • Labels:
    None
  • Affected Branches:
    MOODLE_20_STABLE
  • Fixed Branches:
    MOODLE_20_STABLE

Activity

Hide
Petr Škoda (skodak) added a comment -
Show
Petr Škoda (skodak) added a comment - you mean something better like http://developer.yahoo.com/yui/examples/grids/index.html ?
Hide
Tim Hunt added a comment -

Possibly, but I am hoping that Patrick Malley or someone else does this.

Show
Tim Hunt added a comment - Possibly, but I am hoping that Patrick Malley or someone else does this.
Hide
Frank Ralf added a comment -

Or perhaps something like the Holy Grail of three-column CSS layout:

http://www.alistapart.com/articles/holygrail
http://www.manisheriar.com/holygrail/index.htm

Show
Frank Ralf added a comment - Or perhaps something like the Holy Grail of three-column CSS layout: http://www.alistapart.com/articles/holygrail http://www.manisheriar.com/holygrail/index.htm
Hide
Mauno Korpelainen added a comment -

I would give this task to Patrick like Tim suggested.

Holygrail fails in cases where pages don't have either left or right blocks because it sets a fixed width for left, right and center column with paddings and if sideblocks are missing we see empty space there.

Yui grids are interesting like http://developer.yahoo.com/yui/grids/builder/ but them may need a similar check of existence of sideblocks like holygrail - or can yui grids collapse automatically or fill the empty space if colums have no content? ... we should just test it.

Show
Mauno Korpelainen added a comment - I would give this task to Patrick like Tim suggested. Holygrail fails in cases where pages don't have either left or right blocks because it sets a fixed width for left, right and center column with paddings and if sideblocks are missing we see empty space there. Yui grids are interesting like http://developer.yahoo.com/yui/grids/builder/ but them may need a similar check of existence of sideblocks like holygrail - or can yui grids collapse automatically or fill the empty space if colums have no content? ... we should just test it.
Hide
Paul ODonnell added a comment -

Addending styles_layouts.css with this:

div#table-layout {
width: 100%;
display:table;
margin-top: .5em;
}
div#table-layout .grid_row {
display:table-cell;
vertical-align:top;
}
#page {
margin: .5em;
}

And this to layouts.php:

<div id="table-layout" class="container">
<?php if ($PAGE->blocks->region_has_content('side-pre', $OUTPUT))

Unknown macro: { ?> <div id="region-side-pre" class="block-region region-side-pre aside grid_row"> <?php echo $OUTPUT->blocks_for_region('side-pre') ?> </div> <?php }
?>
<div id="content" class="block-region content grid_row"> [MAIN CONTENT GOES HERE] </div>
<?php if ($PAGE->blocks->region_has_content('side-post', $OUTPUT))
Unknown macro: { ?> <div id="region-side-post" class="block-region region-side-post aside grid_row"> <?php echo $OUTPUT->blocks_for_region('side-post') ?> </div> <?php }
?>
<div class="clearfix"> </div>
</div>

Might do the trick.

Show
Paul ODonnell added a comment - Addending styles_layouts.css with this:
div#table-layout { width: 100%; display:table; margin-top: .5em; } div#table-layout .grid_row { display:table-cell; vertical-align:top; } #page { margin: .5em; }
And this to layouts.php:
<div id="table-layout" class="container"> <?php if ($PAGE->blocks->region_has_content('side-pre', $OUTPUT))
Unknown macro: { ?> <div id="region-side-pre" class="block-region region-side-pre aside grid_row"> <?php echo $OUTPUT->blocks_for_region('side-pre') ?> </div> <?php }
?> <div id="content" class="block-region content grid_row"> [MAIN CONTENT GOES HERE] </div> <?php if ($PAGE->blocks->region_has_content('side-post', $OUTPUT))
Unknown macro: { ?> <div id="region-side-post" class="block-region region-side-post aside grid_row"> <?php echo $OUTPUT->blocks_for_region('side-post') ?> </div> <?php }
?> <div class="clearfix"> </div> </div>
Might do the trick.
Hide
Paul ODonnell added a comment -

Sorry. That obviously didn't work. See attached.

Show
Paul ODonnell added a comment - Sorry. That obviously didn't work. See attached.
Hide
Tim Hunt added a comment -

The layout.php code can find out which block regions are empty if it needs to before any HTML is output.

Show
Tim Hunt added a comment - The layout.php code can find out which block regions are empty if it needs to before any HTML is output.
Hide
Mauno Korpelainen added a comment -

Yes, I know we can use such code in layout.php but yui grids don't obviously do it automatically. It would be possible to use holygrail as well if we used for example different code and different classes according to situations where we have all columns, left colum is missing, right column is missing or both left and right column are missing. It is possible but most likely not reasonable.

The problem with yui grid presets is that widths of those preset columns don't fit very well to current column widths of standard theme - and again all things can be changed but if we want to use same kind of layout as current standard theme yui grids may not be the right tool.

As far as I can see your solution makes any kind of layouts possible Tim and a big Thank You for that... Was your original idea to find some different solution (layout) or only to replace table layout with div layout? What did you mean by "something better" meaning is there something else wrong in current layout.php than tables?

Show
Mauno Korpelainen added a comment - Yes, I know we can use such code in layout.php but yui grids don't obviously do it automatically. It would be possible to use holygrail as well if we used for example different code and different classes according to situations where we have all columns, left colum is missing, right column is missing or both left and right column are missing. It is possible but most likely not reasonable. The problem with yui grid presets is that widths of those preset columns don't fit very well to current column widths of standard theme - and again all things can be changed but if we want to use same kind of layout as current standard theme yui grids may not be the right tool. As far as I can see your solution makes any kind of layouts possible Tim and a big Thank You for that... Was your original idea to find some different solution (layout) or only to replace table layout with div layout? What did you mean by "something better" meaning is there something else wrong in current layout.php than tables?
Hide
Petr Škoda (skodak) added a comment -

"The problem with yui grid presets is that widths of those preset columns don't fit very well to current column widths of standard theme" - I do not understand this, we can simply override the CSS for existing div.yui-tX or add new classes like div.yui-t10, div.yui-t11..., right?

Show
Petr Škoda (skodak) added a comment - "The problem with yui grid presets is that widths of those preset columns don't fit very well to current column widths of standard theme" - I do not understand this, we can simply override the CSS for existing div.yui-tX or add new classes like div.yui-t10, div.yui-t11..., right?
Hide
Mauno Korpelainen added a comment -

True - it is possible to override css and add new classes ... we are just not using grid PRESETS then anymore ... we need to create and test how those new classes work and forget old css of standard theme which many old themes have used in config.php...

I suppose it is ok to use yui grids like any other solution that people just want to use.

Show
Mauno Korpelainen added a comment - True - it is possible to override css and add new classes ... we are just not using grid PRESETS then anymore ... we need to create and test how those new classes work and forget old css of standard theme which many old themes have used in config.php... I suppose it is ok to use yui grids like any other solution that people just want to use.
Hide
Mauno Korpelainen added a comment -

Ah - I saw for the first time http://docs.moodle.org/en/Development:Theme_changes_proposal from other post and comment Tim wrote...

Petr,

that plan sounds quite reasonable, well planned and we'll see how things roll on - it was just a major surprise that a couple days ago I was testing the system that Tim created and now we suddenly have a new theme proposal with lots of big changes.

Can you post some info about final proposal to theme forum when you have implemented the changed proposal so that all theme designers who are eager to try all kinds of cool things will know how to go on with moodle 2.0 themes...

Show
Mauno Korpelainen added a comment - Ah - I saw for the first time http://docs.moodle.org/en/Development:Theme_changes_proposal from other post and comment Tim wrote... Petr, that plan sounds quite reasonable, well planned and we'll see how things roll on - it was just a major surprise that a couple days ago I was testing the system that Tim created and now we suddenly have a new theme proposal with lots of big changes. Can you post some info about final proposal to theme forum when you have implemented the changed proposal so that all theme designers who are eager to try all kinds of cool things will know how to go on with moodle 2.0 themes...
Hide
Tim Hunt added a comment -

That proposal is still being developed. When it is clearer (which is probably quite soon) Petr is planning to post about it in the themes forum. It is not a different proposal from my recent changes, it is more of the same to clean things up and simplify them even further.

Show
Tim Hunt added a comment - That proposal is still being developed. When it is clearer (which is probably quite soon) Petr is planning to post about it in the themes forum. It is not a different proposal from my recent changes, it is more of the same to clean things up and simplify them even further.
Hide
Tim Hunt added a comment -

Petr dealt with this in his theme changes.

Show
Tim Hunt added a comment - Petr dealt with this in his theme changes.

People

Vote (1)
Watch (4)

Dates

  • Created:
    Updated:
    Resolved: