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

Theme Boost: Nav drawer (mobile size) - always close the nav drawer on item click

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Login as a user with an enrolment in at least one course
      2. Go to the course
      3. Reduce the width of the browser window to a small screen size
      4. Open the nav drawer (if it is not opened yet)
      5. Click on a section item in the nav drawer
      6. See that the nav drawer closes and the content page displays the clicked section on top
      7. Resize the browser window again to a larger screen size > 768 px
      8. Open the nav drawer again
      9. Click on another section item
      10. See that the page scrolls to the anchor and the nav drawer keeps open
      Show
      Login as a user with an enrolment in at least one course Go to the course Reduce the width of the browser window to a small screen size Open the nav drawer (if it is not opened yet) Click on a section item in the nav drawer See that the nav drawer closes and the content page displays the clicked section on top Resize the browser window again to a larger screen size > 768 px Open the nav drawer again Click on another section item See that the page scrolls to the anchor and the nav drawer keeps open
    • Affected Branches:
      MOODLE_35_STABLE
    • Fixed Branches:
      MOODLE_33_STABLE, MOODLE_34_STABLE
    • Pull Master Branch:
      MDL-61411-master

      Description

      Hi,
      we've encountered an issue for Boost's nav drawer on mobile sizes.

      If the user clicks on a navigation items that leads to a page refresh or loading of a new page, the navigation will slide out and be closed.
      If the user is on the course page and he clicks on the menu item of a section, the navigation will keep opened and the page in the background just jumps to the set anchor.

      This is problematic as on small screens it it not always visible what has changed in the background, especially on quite empty courses.
      For example the difference between the result of a click on "Topic 1" and "Topic 4" in a course:

      Furthermore, with introducing the $drawer-with variable, the width of the nav drawer can be individually defined. This could lead to the situation that the nav drawer is full size on small screens (which is expected behavior in my personal opinion for mobile sizes).
      And when the user then clicks on a section item, nothing visual happens for the user, because the navigation won't close and the changes in the background are not visible to him.

      So we think that it would be consistent and better behavior if the nav drawer would always close by a click on any menu item (on small screens).

      Instructions to reproduce

      Perquisites:

      • Moodle instance with a user that is enrolled in at least one course
      • Resize your browser window to a mobile device size (only one content column shown)

      Steps:

      • Login with the user
      • Go to a course
      • Click on the item "Participants"
        See that the navigation is sliding out (and the corresponding page is shown)
      • Go to the course startpage
      • Open the navigation, if not opened
      • Click on a section item, e.g. "Topic 4"
        See that the navigation is not sliding out and that the page changes in the background, dependent on the content this change is not highly noticeable

        Attachments

        1. image1.png
          image1.png
          34 kB
        2. image2.png
          image2.png
          29 kB
        3. image3.png
          image3.png
          57 kB
        4. image4.png
          image4.png
          46 kB
        5. topic_1.png
          topic_1.png
          77 kB
        6. topic_4.png
          topic_4.png
          93 kB

          Issue Links

            Activity

              People

              Assignee:
              kosswa Kathrin Osswald
              Reporter:
              kosswa Kathrin Osswald
              Peer reviewer:
              Luca Bösch
              Integrator:
              Andrew Nicols
              Tester:
              Mihail Geshoski
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Bas Brands
              Votes:
              1 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                17/May/18