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

Improve styling of the new user menu

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Minor
    • Resolution: Fixed
    • 2.8
    • 2.8
    • Usability
    • MOODLE_28_STABLE
    • MOODLE_28_STABLE
    • MDL-47576-master
    • Hide

      On Clean:

      1. Before logging in, verify that the "log in" text link is colored and not grey.
      2. Log in as an administrator.
      3. Create a basic custom menu with nested elements - the example one is fine.
      4. Mouseover the user menu dropdown (the part that has the user's name and avatar).
        • Observe that the user's name turns from grey to black, just like the items in the custom menu.
      5. Open the user menu dropdown.
        • Observe that the menu now has a minimum width set.
      6. Open a dropdown from the custom menu and compare it to the user menu dropdown.
        • Observe that the border styles and drop shadows are the same.
      7. Reload the page and pay attention to the position of the caret (the little down-facing arrowhead).
        • Observe that it didn't change position during page load.
      8. Install the Hebrew (he) language pack and enable it.
        • Observe that the RTL styles look just as good as the LTR styles - i.e. caret not weirdly out of place.
      9. Re-select English as your active language.
      10. Create a course with an enrolled user with a really long name, like "Mynameis Alittletoolongformostpeopletoremember"
      11. Select the user from the course participants list and use the Administration block to "log in as" that user.
        • Observe that the user menu dropdown now reflects this (i.e. it says that you are currently viewing as that user). Observe that the message that tells you this is not cut off by the avatars.
      12. Disable Javascript in your browser.
        • Observe that the dropdown has been replaced by a horizontal list of icons, and the dropdown caret is no longer visible.
      13. Enable the inverted navbar.
        • Observe that the styling has been updated appropriately.

      On Base:

      1. Install a bunch of language packs, particularly ones with long names.
        • Observe that the box for the user menu does not extend to the width of the select box for the language menu.
        • Observe that there's a decent amount of margin between the avatar(s) and the user text.
      Show
      On Clean: Before logging in, verify that the "log in" text link is colored and not grey. Log in as an administrator. Create a basic custom menu with nested elements - the example one is fine. Mouseover the user menu dropdown (the part that has the user's name and avatar). Observe that the user's name turns from grey to black, just like the items in the custom menu. Open the user menu dropdown. Observe that the menu now has a minimum width set. Open a dropdown from the custom menu and compare it to the user menu dropdown. Observe that the border styles and drop shadows are the same. Reload the page and pay attention to the position of the caret (the little down-facing arrowhead). Observe that it didn't change position during page load. Install the Hebrew (he) language pack and enable it. Observe that the RTL styles look just as good as the LTR styles - i.e. caret not weirdly out of place. Re-select English as your active language. Create a course with an enrolled user with a really long name, like "Mynameis Alittletoolongformostpeopletoremember" Select the user from the course participants list and use the Administration block to "log in as" that user. Observe that the user menu dropdown now reflects this (i.e. it says that you are currently viewing as that user). Observe that the message that tells you this is not cut off by the avatars. Disable Javascript in your browser. Observe that the dropdown has been replaced by a horizontal list of icons, and the dropdown caret is no longer visible. Enable the inverted navbar. Observe that the styling has been updated appropriately. On Base: Install a bunch of language packs, particularly ones with long names. Observe that the box for the user menu does not extend to the width of the select box for the language menu. Observe that there's a decent amount of margin between the avatar(s) and the user text.

    Description

      Refer to the screenshots for the different issues identified.

      Issues identified and fixed:

      1. Missing visual feedback on hover - inconsistent with custom menu
      2. Margins on fillers create the impression of inconsistent margins
      3. Missing WebKit outline on focus
      4. Need min-width, margin and border/dropshadow style similar to custom menu
      5. Caret margin on RTL not consistent with LTR
      6. Caret position incorrect while page still loading
      7. Login link lost color
      8. Avatars clip over meta text when username logged in as is very long
      9. No visual feedback and bad styling when JS disabled

      Issues deferred / not fixed:

      1. Margin of RTL menu items greater than LTR - fixed in MDL-47340

      Attachments

        Issue Links

          Activity

            People

              jethac Jetha Chan
              fred Frédéric Massart
              Andrew Lyons Andrew Lyons
              Dan Poltawski Dan Poltawski
              Mark Nelson Mark Nelson
              Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May, David Woloszyn, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                10/Nov/14