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

theme_boost: display logos nicer in Boost

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Blocker Blocker
    • 3.2
    • 3.2
    • Themes
    • MOODLE_32_STABLE
    • MOODLE_32_STABLE
    • MDL-57124-master
    • 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.

      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

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

            damyon Damyon Wiese
            dougiamas Martin Dougiamas
            Frédéric Massart Frédéric Massart
            David Monllaó David Monllaó
            Rajesh Taneja Rajesh Taneja
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.