Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-57124

theme_boost: display logos nicer in Boost

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Blocker
    • Resolution: Fixed
    • Affects Version/s: 3.2
    • Fix Version/s: 3.2
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide

      In Boost

      • Add a "logo" and "compact" logo.
      • Log out.
      • View login page.
      • Verify the logo is centered and scaled to 100px high.
      • Inspect the DOM and verify the actual logo image served is 200px high.
      • Hover the logo with the mouse and verify the title is the site name. Inspect the DOM and verify the alt text is also the site name.
      • Verify there is a line separating the logo image and the rest of the login form.
      • Verify there is some padding between the logo image and the box it sits in.

      Login. Go to site home.
      Verify the logo in the page context header is the site logo. Verify it is 75px high, but the source image is 150px high.

      Go to another page. Verify the compact logo is in the fixed header. Verify it is 35px high but the source image is 70px high.

      Change themes to clean. Verify on normal pages the compact logo fits in the header and it looks the same before / after patch (no retina - that's only done in boost).

      Verify on the home page the site logo is shown in the context header and it looks the same before / after patch.

      Verify on the login page the site logo is shown in the context header and it looks the same before / after patch (terrible).

      Remove the logo setting and switch back to boost.

      Verify on the login page you see the site name above the login form with padding.

      Verify on the site home page you see the site name in the context header.

      Show
      In Boost Add a "logo" and "compact" logo. Log out. View login page. Verify the logo is centered and scaled to 100px high. Inspect the DOM and verify the actual logo image served is 200px high. Hover the logo with the mouse and verify the title is the site name. Inspect the DOM and verify the alt text is also the site name. Verify there is a line separating the logo image and the rest of the login form. Verify there is some padding between the logo image and the box it sits in. Login. Go to site home. Verify the logo in the page context header is the site logo. Verify it is 75px high, but the source image is 150px high. Go to another page. Verify the compact logo is in the fixed header. Verify it is 35px high but the source image is 70px high. Change themes to clean. Verify on normal pages the compact logo fits in the header and it looks the same before / after patch (no retina - that's only done in boost). Verify on the home page the site logo is shown in the context header and it looks the same before / after patch. Verify on the login page the site logo is shown in the context header and it looks the same before / after patch (terrible). Remove the logo setting and switch back to boost. Verify on the login page you see the site name above the login form with padding. Verify on the site home page you see the site name in the context header.
    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_32_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-57124-master

      Description

      Boost uses the new standard logo and compact logo settings

      The way they are currently used is not optimal.

      Login page:

      Currently: The large logo is reduced to 100px and shown 100px high at the very top-left corner of the login window.

      Problems: This is not retina, and not balanced. A quick search of the web will show logos are 95% of the time centered.

      Solution: Reduce logo to 300px high, show using CSS at 100px high, and center over the login box.

      Front page:


      Currently: The large logo is shown in the top replacing the title of the site.

      Problems: Huge amount of white space generated on an important page. Also not retina.

      Solution: Show the logo with the sitename next to it. Or don't show it at all and just show the top bar logo.

      Top bar:

      Currently: Either show the compact logo or the title if that's not there.

      This is probably OK.

      See the last comment for the agreed on changes (repeated here):
      1 Center the logo on the login page
      2 Fix the scaling for retina
      3 Move the logo inside the card-block so it gets the default padding
      4 Remove the site name from the login page if there is a logo

        Attachments

        1. 720311243_17378574351179729695.jpg
          720311243_17378574351179729695.jpg
          130 kB
        2. desktop small image with border.png
          desktop small image with border.png
          408 kB
        3. desktop small image with border 2.png
          desktop small image with border 2.png
          411 kB
        4. desktop small image without border.png
          desktop small image without border.png
          399 kB
        5. desktop small image without border 2.png
          desktop small image without border 2.png
          400 kB
        6. desktop wide image with border.png
          desktop wide image with border.png
          520 kB
        7. desktop wide image with border 2.png
          desktop wide image with border 2.png
          508 kB
        8. desktop wide image without border.png
          desktop wide image without border.png
          556 kB
        9. desktop wide image without border 2.png
          desktop wide image without border 2.png
          524 kB
        10. header with home link.png
          header with home link.png
          257 kB
        11. header with home link 2.png
          header with home link 2.png
          303 kB
        12. header with home link with edit icon.png
          header with home link with edit icon.png
          309 kB
        13. header with margin on class logo.png
          header with margin on class logo.png
          246 kB
        14. header with margin on class logo 2.png
          header with margin on class logo 2.png
          290 kB
        15. header with margin on class logo with edit icon.png
          header with margin on class logo with edit icon.png
          290 kB
        16. header without margin on class logo.png
          header without margin on class logo.png
          243 kB
        17. header without margin on class logo 2.png
          header without margin on class logo 2.png
          287 kB
        18. header without margin on class logo with edit icon.png
          header without margin on class logo with edit icon.png
          287 kB
        19. logo and name centered on narrow screen.png
          logo and name centered on narrow screen.png
          457 kB
        20. logo and name centered on wide screen.png
          logo and name centered on wide screen.png
          786 kB
        21. mobile small image with border.png
          mobile small image with border.png
          362 kB
        22. mobile small image without border.png
          mobile small image without border.png
          381 kB
        23. mobile wide image with border.png
          mobile wide image with border.png
          481 kB
        24. mobile wide image without border.png
          mobile wide image without border.png
          462 kB
        25. screenshot-1.png
          screenshot-1.png
          96 kB
        26. screenshot-1-strawman.png
          screenshot-1-strawman.png
          116 kB
        27. screenshot-2.png
          screenshot-2.png
          155 kB
        28. screenshot-2-strawman.png
          screenshot-2-strawman.png
          226 kB
        29. screenshot-2-strawman2.png
          screenshot-2-strawman2.png
          190 kB
        30. screenshot-3.png
          screenshot-3.png
          84 kB
        31. screenshot-4.png
          screenshot-4.png
          96 kB
        32. strawman.png
          strawman.png
          24 kB
        33. typical school logo.png
          typical school logo.png
          1.04 MB

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  5/Dec/16