mod_quiz layout and style

mod_quiz layout and style

by Danny Wahl -
Number of replies: 12

I'm working on a theme for 2.0 but I've run into a (actually 3) snag(s) with mod_quiz.

1) #path-mod-quiz-edit has the following classes: .path-admin .side-pre-only, the problem is that it doesn't load any blocks into region-pre, so the whole theme looks 'pushed' the width of region-pre. If I manually change .side-pre-only to .content-only it looks a lot better - but there's no way to make this permanent

2) /mod/quiz/styles.css has a lot (a LOT) of CSS that violates what's said in Moodle Docs - Developement: Themes 2.0

This file should only contain the required CSS rules for the module and should not add anything to the look of the plugin such as colours, font sizes, or margins other than those that are truly required.

I've been able to work around this by adding mod=>quiz to my plugins_exclude_sheets array in my config file, then copying the styles.css to my /styles directory, editing it and adding it to my THEME->sheets array. But that's a lot of work.

3) This is the big one, /mod/quiz/view.php has several references to

echo $OUTPUT->footer();

the problem is that this is somehow breaking my layout file & styles. The basic layout on every page looks like this:

page
  page-header
  page-content
  page-footer
-page
but on the quiz page it looks like this:  

page
  page-header
  page-content
    region-main-box
    page-footer
  -page-content
-page

you can see that page-footer gets nested inside of page-content for some reason.

--------

So here's my question - how do other themes avoid this issue? Is it a bug? Is there another layout that I need to add into my config for quiz?

 

Admin index (How it should look):

 

Quiz Edit: (How it does look)

Average of ratings: Useful (1)
In reply to Danny Wahl

Re: mod_quiz layout and style

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

3. This is the simple one, so I will deal with it separately. Although there are several (actually 3) calls to $OUTPUT->footer(); in view.php, the first two are immedately followed by exit; statements. Therefore, there will only ever be one call to footer on any page, at the end.

I have just validated the output of the view.php page in a variety of situations, and it seems to be valid, and so properly nested. (However, I did find MDL-26590).

Please can you give enough information about how your quiz is set up so that I can reproduce your problem. Thanks.

Average of ratings: -
In reply to Danny Wahl

Re: mod_quiz layout and style

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

2. and to a lesser extent 1. is the serious issue, and I can only agree with you that the CSS for quiz editing is a horrible mess at the moment, and it needs to be cleaned up.

From my point of view (I am the maintainer of the quiz module) near the end of Moodle 2.0 development, there were a lot of changes to how themes worked, other developers changes kept breaking the quiz editing page, and I only had verly limited time in which to fix it (and re-fix it). So I could only do the minimum to keep the page working.

Also, when Sam H was originally dividing up the CSS into base theme and sub-themes, he left a lot of the styles in base. There is a trade-off. To make that page look good, and be usable, you need quite a lot of CSS. Therefore, to ensure the page is OK in all themes, it is easier to leave most of the CSS in base. However, that makes it a total pain for people who do want to re-style that page.

On the other hand, if we really strip down the styles on that page to make it easy to theme, then everyone who wants to make their own theme will have to add a lot of CSS to make this page work, and they may not want to.

So, anyway, I agree that page is a mess. I don't have time to fix the mess myself. You are probably the first person to try to re-style that page, so you are the first person to really encounter the problems. If you can give specific suggestions for how to fix things, then I will try to make time to review the proposed changes, and get them incorporated into Moodle.

Average of ratings: -
In reply to Tim Hunt

Re: mod_quiz layout and style

by Danny Wahl -

Tim, Thanks for the response, As to the actual quiz data I'll tell you what I have, and then I can post files if you want them.

(3) In the theme the layout is essentially the same as the layout in base, i.e. 'general.php' - with regard to the page-content there is a new div I added called "page-content-wrapper" that wraps everything below the header and above the footer.  All this really does is to center and pad page-content, it's not very fancy.

For the quiz all I did was create a course, create a quiz with default options, and then enter the activity as a teacher - there are no questions/question bank yet, so this is a quiz with no resources.

For the CSS (1,2) I will remove the line the removes mod_quiz CSS and I will see if I can patch it to some degree to get it more inline with the design standards, then I can create a ticket in the tracker, and maybe get it pulled into core - I'm talking minimal changes to avoid breaking other themes.

Also I'm working off of git/master

Average of ratings: -
In reply to Danny Wahl

Re: mod_quiz layout and style

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

If the quiz has not questions, and you go in as a teacher, it should just redirect you from view.php to edit.php.

Anyway work you can do to clean up the CSS would be greatly appreciated. Particularly if you can engage with the other theme designers and get some sort of agreement that your changes are a step in the right direction. What all you guys think is more important than what I think.

And, if you can do your changes as a branch in git, that is particuarly easy for me to work with.

Average of ratings: -
In reply to Tim Hunt

Re: mod_quiz layout and style

by Danny Wahl -

Tim, I'm sorry, I had put in the first post that it was #path-mod-quiz-edit where I was experiencing this.  I noticed this when I was about to start to import a quiz bank

Average of ratings: -
In reply to Danny Wahl

Re: mod_quiz layout and style

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

Daniel,

The .side-pre-only issue may be being caused because you have not included the css in pagelayout.css to cover the settings for all situations.

I always include these in my css for the theme as I find it keeps the speed of the theme working constant.

Here is the list from base...

/** Only side pre **/
.side-pre-only #page-content #region-post-box {margin-left:-200px;}
.side-pre-only #page-content #region-main {margin-left:200px;}
.side-pre-only #page-content #region-pre {left:0px;}
.side-pre-only #page-content #region-post {width:0px;}

/** Only side post **/
.side-post-only #page-content #region-main-box {left:0px;}
.side-post-only #page-content #region-post-box {margin-left:-200px;}
.side-post-only #page-content #region-main {margin-left:200px;}
.side-post-only #page-content #region-pre {width:0px;}
.has_dock.side-post-only .page-middle #region-main {margin-left:200px;}

/** No blocks whatsoever **/
.content-only #page-content {min-width:0;}
.content-only #page-content #region-main-box {left:0px;}
.content-only #page-content #region-post-box {margin-left:0px;}
.content-only #page-content #region-main {margin-left:0px;}
.content-only #page-content #region-pre {left:0;width:0px;}
.content-only #page-content #region-post {width:0;}

Also check in config.php for your theme that you do have the correct settings for side pre listed in the options for pagelayout arrays...

For Example:

// The pagelayout used for reports
'report' => array(
'file' => 'report.php',
'regions' => array('side-pre'),
'defaultregion' => 'side-pre',
),

report.php is a new file added quite recently and uses it's own set of css selectors.

Here is the report css...

/** Report layout **/
.pagelayout-report #page {width:auto;position:relative;}
.pagelayout-report #page-header {float:none;}
.pagelayout-report #page-content {float:none;overflow:visible;width:auto;}
.pagelayout-report #report-main-content {float:left;width:100%;}
.pagelayout-report #report-main-content .region-content {margin-left:200px;}
.pagelayout-report #report-main-content .region-content table {background-color:#FFF;}
.pagelayout-report #report-region-wrap {width:0;float:right;position:relative;left:-100%;}
.pagelayout-report #report-region-pre {width:200px;}
.pagelayout-report #page-footer {float:none;}
.pagelayout-report #page-content .region-content {overflow:visible;}

PS: If you want me to check over the pagelayout of your new theme just send me the main layouts php files and corresponding pagelayout css.

HTH

Mary

Average of ratings: -
In reply to Mary Evans

Re: mod_quiz layout and style

by Danny Wahl -

Mary,

I do have report in my layouts array in the config file, and it is set to use report.php - since I don't have a report.php in my theme's layout folder it should pull from the parent theme, i.e. base, as defined in my config.

The main thing is that every other page section: admin, front page, course, etc... that are .side-pre-only look fine.  So either #page-mod-quiz-edit should be .content-only, OR it's not loading .side-pre correctly and the blocks aren't displaying.

Here's a link to my whole theme if you want to grab that and try it out.  It's still pretty rough, but the CSS is fairly organized.

http://crashpad.iywahl.com/isc.zip

Average of ratings: -
In reply to Mary Evans

Re: mod_quiz layout and style

by Danny Wahl -

Sorry to keep posting so much, but I've found the real issue here.  It's another nesting problem.  Here's the normal flow for .side-pre-only:

page-content
  region-main-box
    region-post-box
      region-main
      region-pre
    -region-post-box
  -region-main-box
-page-content

and here's what's happening on #page-mod-quiz-edit

page-content
  region-main-box
    region-post-box
      region-main
        region-content
        region-pre
      -region-main
    -region-post-box
  -region-main-box
-page-content

So just like with the footer the actual HTML is getting nested incorrectly.

 

*edit* Ok, I've gone in with Firebug and manually moved the incorrectly nested divs (footer and region-pre) and as soon as they're pasted into the correct place everything instantly looks perfect, region-pre is in the right place and the footer looks correct.  There is definately a renderer problem, but I don't know if it's just mod-quiz, or if it's the core renderer having a bug that's showing up in mod-quiz.

*final edit*

this is happening in Standard and Base also, not just my theme.

Should I open a ticket about this?

Average of ratings: -
In reply to Danny Wahl

Re: mod_quiz layout and style

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

Daniel,

This is the exact problem I found last year when creating my first Moodle 2.0 theme called Cafelite, I actually pulled it from the themes database because I could not resolve the problem. I recall sending Sam Hemelryk a message asking for some help with this as I was convinced it was a core issue. I never got a reply as he was very busy with Moodle 2 at the time, which is understandable. The only difference with your find and mine is that I found the problem in Lesson, and not Quiz, although the problem obviously stems from some renderer page or other as you mentioned.  I did wonder at the time if it was a missing </div> forcing region-pre to get nested inside the region main. Knowing more now about htmp_writer an empty_tag[div] could probably throw this sort of error and not many people would find it.  I might have got it all wrong, but there is a problem and I am glad I am not the only one to have found this sort of thing happening.

Will be interesting to see how this MDL get's fixed.

By the way your theme works OK on my XP machine, even in Quiz.

Also, I did find that base theme could do with a clearfix adding just before the closing div for page.

Cheers

Mary

Average of ratings: -