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

Update the top navbar html / css

    XMLWordPrintable

    Details

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

      Set the navbar to have some content

      1. login as admin
      2. Navigate to Site Administration > Appearance > Logos
      3. Upload the attached logo potatoes.jpg logo
      4. Navigate to Site Administration > Appearance > Theme settings
      5. Add some custom menu items. For example:

        BBC News|https://www.bbc.com/news
         Fosdem|https://fosdem.org/2021
         Wikipedia|https://www.wikipedia.org/
         Yazz Funk|http://www.20jazzfunkgreats.co.uk/wordpress/||nl
         Tech sites
         -Electronic Frontier Foundation|https://www.eff.org
         -Omatsuni|https://omatsuri.app
         -###
         -Smashing Magazine|https://www.smashingmagazine.com
         -Hacker noon|https://hackernoon.com
         Games
         -2048|https://cyberzhg.github.io/2048/
         -Where’s the pixel|http://wheresthepixel.com/
         Superfun|https://www.kakhiel.nl/tag/engels
         Moodle Github|https://github.com/moodle/moodle
        

      6. Navigate to Site Administration > Advance features
      7. Enable global search

      Test function of navbar elements

      1. Click on the Side panel button, verify the side panel opens
      2. Navigate to the site home, verify the logo in the navbar is not visible (the logo is visible in the page header)
      3. Navigate to any other page, verify the logo is visible in the navbar
      4. Click on the dropdown menu items in the custom menu, verify it show the dropdowns and make sure the alignment is ok.
      5. Click the search, notifications and messages, verify they all still work
      6. Click the user menu dropdown, verify it shows the dropdown and and make sure the alignment is ok.

      Test the navbar accessibility

      1. Use the tab key to navigate through the navbar items. Verify each items shows the full blue outline
      Show
      Set the navbar to have some content login as admin Navigate to Site Administration > Appearance > Logos Upload the attached logo potatoes.jpg logo Navigate to Site Administration > Appearance > Theme settings Add some custom menu items. For example: BBC News|https://www.bbc.com/news Fosdem|https://fosdem.org/2021 Wikipedia|https://www.wikipedia.org/ Yazz Funk|http://www.20jazzfunkgreats.co.uk/wordpress/||nl Tech sites -Electronic Frontier Foundation|https://www.eff.org -Omatsuni|https://omatsuri.app -### -Smashing Magazine|https://www.smashingmagazine.com -Hacker noon|https://hackernoon.com Games -2048|https://cyberzhg.github.io/2048/ -Where’s the pixel|http://wheresthepixel.com/ Superfun|https://www.kakhiel.nl/tag/engels Moodle Github|https://github.com/moodle/moodle Navigate to Site Administration > Advance features Enable global search Test function of navbar elements Click on the Side panel button, verify the side panel opens Navigate to the site home, verify the logo in the navbar is not visible (the logo is visible in the page header) Navigate to any other page, verify the logo is visible in the navbar Click on the dropdown menu items in the custom menu, verify it show the dropdowns and make sure the alignment is ok. Click the search, notifications and messages, verify they all still work Click the user menu dropdown, verify it shows the dropdown and and make sure the alignment is ok. Test the navbar accessibility Use the tab key to navigate through the navbar items. Verify each items shows the full blue outline
    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-71293-master

      Description

      Moodle's top navbar breaks on mobile designs when custommenuitems are configured

      The Boost top navbar cannot be styled through theme settings, the theme classic option for a dark navbar is broken.

      Update the navbar items to use the same css classes and create a single navbar.scss sheet with customisable scss variables for styling

      Document the new navbar in the Moodle UI component library

      Design specs:

      Navbar - left side

      Behaviour

      If the user is not logged in:

      • From LG breakpoint upward (greater than 900px)
        • If 'logocompact' is empty:
          • Site 'shortname' is displayed on the left side of the navbar
          • The site 'shortname' will wrap using ellipsis '...' after 20 characters
        • If 'logocompact' is not empty
          • The image uploaded to 'logocompact' is displayed on the left side of the navbar
          • The site 'shortname' is NOT displayed anywhere in the navbar
      • From MD breakpoint downward (less than 900px)
        • Neither 'logocompact' nor 'shortname' is displayed on the navbar

      If the user is logged in:

      • From LG breakpoint upward (greater than 900px)
        • If 'logocompact' is empty:
          • Site 'shortname' is displayed on the left side of the navbar
          • The site 'shortname' will wrap using ellipsis '...' after 20 characters
        • If 'logocompact' is not empty
          • The image uploaded to 'logocompact' is displayed on the left side of the navbar
          • The site 'shortname' is NOT displayed anywhere in the navbar
        • The menu items are displayed streamlined, next to the site 'shortname' or 'logocompact'
          • Home (if enabled) → disabled by default
          • Dashboard → where the user automatically lands when logging in
          • My courses
          • Site administration
          • Custom menus
        • The menu items that do not fit in the available space are displayed in the dropdown under "More"
      • From MD breakpoint downward (less than 900px)
        • No 'shortname' or 'logocompact' is displayed in the navbar
        • The hamburger menu is displayed
          • When clicking the hamburger menu, the following menu items are shown listed inside a drawer that overlaps the page content:
            • Home (if enabled) → disabled by default
            • Dashboard → where the user automatically lands when logging in
            • My courses
            • Site administration
            • Custom menus
          • If 'logocompact' is empty:
            • The site 'shortname' is displayed at the top of the drawer, in the same row as the "X" button that closes it
          • If 'logocompact' is not empty
            • The image uploaded to 'logocompact' is displayed at the top of the drawer, in the same row as the "X" button that closes it
            • The site 'shortname' is NOT displayed anywhere in the menu or the navbar

      Navbar - right side

      Behaviour

      If the user is not logged in:

      • From LG breakpoint upward (greater than 900px)
        • Items displayed:
          • Language selector
            • Aligned to the right, next to the "Log in" link
            • When clicked, it loads the language list options in a floating container
          • —— Vertical divider ——
          • 'Log in' link
            • Aligned to the right (top right corner)
            • Note: if possible, let's drop the sentence "You are not logged in." and keep only the actual "Log in" link
      • From SM breakpoint downward (less than 768px)
        • Items displayed:
          • Language selector
            • Aligned to the left (top left corner)
            • When clicked, it loads the language list options in a floating container
          • 'Log in' link
            • Aligned to the right (top right corner)
      • From 480px downward
        • Language selector
          • When clicked, it loads the language list options in a full-width container
            • The title of the loaded list is "Language selector"
              • This title should wrap using ellipsis '...' if too big
            • "X" icon closes it

      If the user is logged in:

      • From LG breakpoint upward (greater than 900px)
        • Items displayed:
          • Search (if enabled)
          • MoodleCloud usage indicators (MoodleCloud only) → need to double-check with MC team
          • Moodle Workplace launcher (Workplace only)
          • Notifications (no changes)
          • Messages (no changes)
          • User menu
            • User picture
              • Display user initials if no user picture is uploaded
            • By clicking in the user picture, a floating container with the following items is shown:
              • Profile
              • Grades
              • Calendar
              • Private files
              • —— Horizontal divider ——
              • Preferences
              • Language
                • When clicked, it loads the language list options in the same floating container
                  • The title of the loaded list is "Language selector"
                    • This title should wrap using ellipsis '...' if too big
                  • Left-arrow icon to go back to the previous items list
              • Switch role to... (if available)
              • —— Horizontal divider ——
              • Log out
          • —— Vertical divider ——
          • Edit mode toggle
            • Text and toggle icon
            • The whole area should be clickable
      • From SM breakpoint downward (less than 768px)
        • Edit mode toggle
          • Only icon
      • From 480px downward
        • Search (if enabled)
        • MoodleCloud usage indicators (MoodleCloud only) → need to double-check with MC team
        • Moodle Workplace launcher (Workplace only)
        • Notifications (no changes)
        • Messages (no changes)
        • User menu
          • User picture
            • By clicking in the user picture, a 100% width container is shown:
              • Profile
              • Grades
              • Calendar
              • Private files
              • —— Empty gap ——
              • Preferences
              • Language
                • When clicked, it loads the language list options in the same floating container
                  • The title of the loaded list is "Language selector"
                    • This title should wrap using ellipsis '...' if too big
                  • Left-arrow icon to go back to the previous items list
              • Switch role to... (if available)
              • —— Empty gap ——
              • Log out

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Mathew May Mathew May
              Integrator:
              Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
              Tester:
              Gladys Basiana Gladys Basiana
              Participants:
              Component watchers:
              Bas Brands
              Votes:
              1 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                8/Nov/21

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 4 hours, 35 minutes
                  1d 4h 35m