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

Navigation improvements to be made in mobile view

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72250-master-3
    • 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

      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

            basbrands Bas Brands
            abgreeve Adrian Greeve
            Mathew May Mathew May
            Shamim Rezaie Shamim Rezaie
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                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

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