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

Navigation improvements to be made in mobile view

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-72250-master-3
    • Testing Instructions:
      Hide
      1. Login as admin
      2. Navigate to Site Administration > Appearance > Theme settings
      3. In field custom menu items add some custom items. For exampe:
        (ensure there is a menu item with some sub items)

      Courses
      -All courses|/course/
      -Course search|/course/search.php
      -###
      -FAQ|https://someurl.xyz/faq
      -Preguntas más frecuentes|https://someurl.xyz/pmf||es
      Mobile app|https://someurl.xyz/app|Download our app

      1. Verify you see the custom menu items appear in the top navigation
      2. Resize the browser to anything below 768 px wide
      3. Verify the 'edit mode' text no longer shows next the edit switch in the top right
      4. Verify you see a toggle button in in the navbar that toggles the primary navigation
      5. Click the second toggle button
      6. Verify this opens the mobile primary menu
      7. Click the custom menu dropdown (course)
      8. Verify you see the subitems appearing
      9. Resize the browser
      10. Verify the drawer closes

      Test for accessibility

      1. Use the tab key to navigate around the mobile menu
      2. Verify you can access all the items in the menu
      Show
      Login as admin Navigate to Site Administration > Appearance > Theme settings In field custom menu items add some custom items. For exampe: (ensure there is a menu item with some sub items) Courses -All courses|/course/ -Course search|/course/search.php -### -FAQ|https://someurl.xyz/faq -Preguntas más frecuentes|https://someurl.xyz/pmf||es Mobile app|https://someurl.xyz/app|Download our app Verify you see the custom menu items appear in the top navigation Resize the browser to anything below 768 px wide Verify the 'edit mode' text no longer shows next the edit switch in the top right Verify you see a toggle button in in the navbar that toggles the primary navigation Click the second toggle button Verify this opens the mobile primary menu Click the custom menu dropdown (course) Verify you see the subitems appearing Resize the browser Verify the drawer closes Test for accessibility Use the tab key to navigate around the mobile menu Verify you can access all the items in the menu

      Description

      Changes need to be made to how the navigation is formatted when in a mobile view.

      1. The primary navigation is to be moved into a drawer on the side (left).

      Please expand this list if other requirements are discovered.

      Design in: https://www.figma.com/proto/pbcNv3Mjoi59oG3u7DXGYm/4.0-UX-Demo-V2-(Shared-with-the-community)?page-id=1445%3A9334&node-id=2376%3A14777&viewport=358%2C309%2C0.05356335639953613&scaling=scale-down&starting-point-node-id=2392%3A11210&hide-ui=1

        Attachments

          Activity

            People

            Assignee:
            basbrands Bas Brands
            Reporter:
            abgreeve Adrian Greeve
            Peer reviewer:
            Mathew May Mathew May
            Integrator:
            Shamim Rezaie Shamim Rezaie
            Tester:
            Gladys Basiana Gladys Basiana
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 7 hours, 20 minutes
                2d 7h 20m