Theme sky_high: odd footer at higher screen resolutions

Suggestions:

1) background-image is 1500x213, so something like

#page {

• max-width: 1600px;
  + max-width: 1666px; /* margin: 5%; 90% = 1500px */
  }

in pagelayout.css

.pagelayout-admin #page {
+ max-width: 1562px; /* margin 2%; 96% = 1500px */
}

in admin.css

#report-wrapper {
+ max-width:1562px;
}

in report.css

should fix this issue.

2) increase background-image to the left side. Highest resolution is 2560x1440. So 2667x213 should do it for the background-image.

screenshot

Or just add colour to footer? I'll take a look at this.

Thank you Dietmar for reporting this. I am amazed it has not been reported before now, as the developers use very wide screens, so in actual fact should have been seen when testing originally.

The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

TIA and ciao

Hi Mary,
just for clarification:
frontpage.php and general.php are using a div#wrapper with max-width 1600px within div#pag whereas report.php (used for admin pages and reports) has a #report-wrapper without any max-width declaration within div#page - and that's the problem..

@Dietmar, I forgot to add...

.pagelayout-admin #page,
.pagelayout-report #page {
    max-width: 1600px;
}

fixing bugs and playing catchup with iMoot NOT recommended!

@Damyon,

Sorry for oversight. All fixed now.

Added new commit then merged/squashed master branch and cherry-picked to new stable branches.

Cheers
Mary

Lazy devs, lazy devs... any reason for putting the .pagelayout-report selector in admin.css? We have already a report.css and also a pagelayout.css. Any of them seem better than adding that to admin.css.

For your consideration, reopening. Ciao

Hello Eloy, there was method in my madness of adding that to admin.css. It's the last stylesheet to be called also there is a lot of stuff in there related to the report page already. Because, strangely enough, some reports do not use the report layout, they actually use admin layout instead.

I found all this out when Dietmar and I fixed this theme some time ago. So as far as I am concerned this small fix is purely cosmetic and not realy a big deal after all said and done. So can it not stay in that stylesheet?

Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

Aha, so there was some logic about putting it to report after all. Ok, if you consider it's ok, np here, note this was re-opened for your consideration.

Ciao

@Mary: As admin and report pages only have left/right margin 2% (what means 1500px = 96% of max-width) I again suggest 1562px as max-width for those pages.

The issue here is the odd footer, not the width. If you want this theme to stretch to infinity and beyond then that's a different issue.

It seems that we are talking past each other. So please let me try to explain my point of view again for the last time.

The facts: The footer markup is as it is . No probs at default resolutions. At higher resolutions footer is breaking a little bit.

Now: By limiting (!!) the width of admin and report pages we are able to live with this footer.

A combination of max-width 1600px and margin 2% will produce the same odd appearance of footer on higher resolutions.

Max-width 1562px and margin 2% or max-width 1595px and 3% would be reasonable.

That's all. But perhaps I'm working with wrong assumptions.

Hi Dietmar,

In my commit for this bug, as you can see I added 2 new footer images. I understand what you mean, and no I don't think your assumptions are wrong. I am wrong as the overall width for the page it self should be 1600px. So what I need to do is widen #page as this is where the max-width is set.. #page is set to 100% so that #page-wrapper is width: auto and margin: 0 2%; which makes the body of the report page 96% as your calculations show. So for me to make the report/admin pages 1600px wide I need to increase the page width by 64px so the calculation of that works out as...

(0.04 x 1600px) + 1600px = 1664px

similarly for the rest of the site which works out as...

(0.10 x 1600px) + 1600px = 1760px

I need to test this out but I think this will give more space to the pages in general for wider screens. To make them even wider, which in the scheme of things might be a good idea, would be to change the way the footer is styled and add a background colour and have a smaller background image and a separate grey gradient border at the bottom of the footer using an outer and inner wrapper of #page-footer.

I need to test all this, but think it will work, at least my designer head says it WILL work...or I will make it work!
What do you think?

Phew!

That's it, Mary! Two mathematicians should be able to calculate such things.

1+ for your idea for redesigning the footer. It will work too.

Dietmar

How many hours did we spend thinking about sky_high?

LOL...

I think that this problem is a throwback from the changes I made back in whenever. Was it last year or 2011? Seems like a long time ago.

We did spend a heck of a long time on this theme. In and out of integration, testing rewriting, debugging, changing CORE files...what a job! Not to mention the many PDF files I ran off to test the printing. LOL

I'm working on this and should have it ready for weekend.

And yes having a BSc(Hons) Mathematics & Business Information Systems does come in handy now and again.

Oh yes, I remember (sky_high "truncates report when printing" parts 1, 2, ...)!

Thanks for all your hard work here and everywhere else. It is very much appreciated.

By the way: do we have something like the Fields Medal for Moodle theme designers?

Picking up where I left off.

After this has been integrated, I'll create a new issue as an improvement for Moodle 2.6 to add a new setting that, if enabled in the custom settings, would turn Sky High into a 'fluid theme' and therefore able to resize to whatever screen width one uses.

Badges? I don't think so, but I was thinking of making some badges for other achievements. Like Lazy Dev!

Just added Nadav to be aware that, although this affects the general layout in both LTR and RTL, the only change in relation to RTL aspect of this theme are the changes made to the footer image. It was necessary to increase footer image length from 1500px to 1600px and also change file type from footer-rtl.jpg to footer-rtl.png, so no CSS needed.

Thanks. got it

Hi Mary, I had a quick glance at your patches for 2.5. Seems as if MDL-39835 can be closed soon.

One question. Max-width seems to be set to

• 1760px for admin-/report-pages and
• 1664px for all other pages

Shouldn't that be reversed?

May be I'm totally wrong. Could you please have a look at that?

ooops!!!

I think that's fixed it now. Thanks for spotting that Dietmar.

You are welcome, Mary!
Sorry for causing inconvenience.

And yes, I too think it's fixed now!

Integrated to master, 25, 24 and 23 - thanks Mary!

tested at 2560*1600 resolution and by scaling, works fine in all requested places

I have noticed a footer trouble in Safari on all admin pages, see attached image

I suppose the settings footer is a different issue because it does it in all widths.

Is this just in Admin pages? I don't remember seeing that. It might be the CSS cascade. Can you open a new tracker and I'll fix it? And just in Safari? Do you use a MAC?

Thanks

done, see MDL-40018

Feature: Thanks to our superb contributors
  In order to make Moodle better
  As an integrator
  I need to thank all our contributors

  Scenario: Dan thanks you all
    Given I log in as "dan"
    And I see "lots of fixed issues"
    When I follow "Close integrated issues"
    Then I should see "Lots of thanks to all our contributors"

Your changes are upstream