Moodle
  1. Moodle
  2. MDL-39835

Theme sky_high: odd footer at higher screen resolutions

    Details

    • Testing Instructions:
      Hide
      1. Select Sky High theme.
      2. Go to the security overview report
      3. Using a wide screen resolution 1800+ TEST that the footer does not present as in the attached image. The MAX width of the page is set at 1600px, so the page should display centrally, with wide gutters either-side, depending on the width of your screen. You can also achieve this by Zooming out using your browser Zoom function. Ctrl + -
      4. Go to a course page and TEST as above for report/admin pages.
      Show
      Select Sky High theme. Go to the security overview report Using a wide screen resolution 1800+ TEST that the footer does not present as in the attached image. The MAX width of the page is set at 1600px, so the page should display centrally, with wide gutters either-side, depending on the width of your screen. You can also achieve this by Zooming out using your browser Zoom function. Ctrl + - Go to a course page and TEST as above for report/admin pages.
    • Affected Branches:
      MOODLE_24_STABLE, MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE, MOODLE_24_STABLE, MOODLE_25_STABLE
    • Pull from Repository:
      git@github.com:lazydaisy/moodle.git
    • Pull 2.4 Branch:
      MDL-39835_M24
    • Pull 2.5 Branch:
      MDL-39835_M25
    • Pull Master Branch:
      MDL-39835_M26
    • Rank:
      50581

      Description

      1. Take a monitor with a screen resolution width of more than 1667px (i.g.1920x1080)

      2. Choose theme sky_high

      3. Footer looks a little bit strange (--> attachment) on all pages (margin 5%), espacially on those with admin-pagelayout or report-pagelayout (margin 2%)

      1. footer.jpg
        174 kB
      2. footer.png
        188 kB

        Issue Links

          Activity

          Hide
          Dietmar Wagner added a comment -

          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.

          Show
          Dietmar Wagner added a comment - 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.
          Hide
          Dietmar Wagner added a comment -

          screenshot

          Show
          Dietmar Wagner added a comment - screenshot
          Hide
          Mary Evans added a comment - - edited

          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.

          Show
          Mary Evans added a comment - - edited 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.
          Hide
          Damyon Wiese added a comment -

          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

          Show
          Damyon Wiese added a comment - 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
          Hide
          Dietmar Wagner added a comment -

          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..

          Show
          Dietmar Wagner added a comment - 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..
          Hide
          Mary Evans added a comment -

          @Dietmar, I forgot to add...

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

          fixing bugs and playing catchup with iMoot NOT recommended!

          Show
          Mary Evans added a comment - @Dietmar, I forgot to add... .pagelayout-admin #page, .pagelayout-report #page { max-width: 1600px; } fixing bugs and playing catchup with iMoot NOT recommended!
          Hide
          Mary Evans added a comment -

          @Damyon,

          Sorry for oversight. All fixed now.

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

          Cheers
          Mary

          Show
          Mary Evans added a comment - @Damyon, Sorry for oversight. All fixed now. Added new commit then merged/squashed master branch and cherry-picked to new stable branches. Cheers Mary
          Hide
          Eloy Lafuente (stronk7) added a comment -

          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

          Show
          Eloy Lafuente (stronk7) added a comment - 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
          Hide
          Mary Evans added a comment - - edited

          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?

          Show
          Mary Evans added a comment - - edited 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?
          Hide
          CiBoT added a comment -

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

          Show
          CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          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

          Show
          Eloy Lafuente (stronk7) added a comment - 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
          Hide
          Dietmar Wagner added a comment -

          @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.

          Show
          Dietmar Wagner added a comment - @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.
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Dietmar Wagner added a comment -

          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.

          Show
          Dietmar Wagner added a comment - 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.
          Hide
          Mary Evans added a comment -

          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?

          Show
          Mary Evans added a comment - 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?
          Hide
          Dietmar Wagner added a comment -

          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?

          Show
          Dietmar Wagner added a comment - 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?
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Dietmar Wagner added a comment -

          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?

          Show
          Dietmar Wagner added a comment - 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?
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Mary Evans added a comment -

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

          Show
          Mary Evans added a comment - Badges? I don't think so, but I was thinking of making some badges for other achievements. Like Lazy Dev!
          Hide
          Mary Evans added a comment -

          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.

          Show
          Mary Evans added a comment - 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.
          Hide
          Nadav Kavalerchik added a comment -

          Thanks. got it

          Show
          Nadav Kavalerchik added a comment - Thanks. got it
          Hide
          Dietmar Wagner added a comment -

          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?

          Show
          Dietmar Wagner added a comment - 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?
          Hide
          Mary Evans added a comment -

          ooops!!!

          Show
          Mary Evans added a comment - ooops!!!
          Hide
          Mary Evans added a comment -

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

          Show
          Mary Evans added a comment - I think that's fixed it now. Thanks for spotting that Dietmar.
          Hide
          Dietmar Wagner added a comment -

          You are welcome, Mary!
          Sorry for causing inconvenience.

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

          Show
          Dietmar Wagner added a comment - You are welcome, Mary! Sorry for causing inconvenience. And yes, I too think it's fixed now!
          Hide
          Dan Poltawski added a comment -

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

          Show
          Dan Poltawski added a comment - Integrated to master, 25, 24 and 23 - thanks Mary!
          Hide
          Petr Škoda added a comment -

          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

          Show
          Petr Škoda added a comment - 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
          Hide
          Petr Škoda added a comment -

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

          Show
          Petr Škoda added a comment - I suppose the settings footer is a different issue because it does it in all widths.
          Hide
          Mary Evans added a comment - - edited

          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

          Show
          Mary Evans added a comment - - edited 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
          Hide
          Petr Škoda added a comment -

          done, see MDL-40018

          Show
          Petr Škoda added a comment - done, see MDL-40018
          Hide
          Dan Poltawski added a comment -
          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

          Show
          Dan Poltawski added a comment - 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

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: