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

Create page drawers for the block and course index areas

    XMLWordPrintable

    Details

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

      Please test on theme Boost only

      Setup
      1. Fetch the test commit:

        git fetch git://github.com/ferranrecio/moodle.git MDL-71456-master
        git cherry-pick FETCH_HEAD
        

      2. Purge caches.
      3. Login as admin
      4. Create a new course
      5. Navigate to the course page
      6. Add some extra sections to the course so you can scroll down the page
      7. Add some blocks to the course

      Test in a browser window wider than 1400px

      1. Open the browser dev tools. Make sure that the dev tools window is docked right beside the page.
      2. Drag the border between the page and the dev tools to adjust the page width so that its width becomes greater than 1400px. In Chrome, you'll see the page size in the upper right corner as you drag the border.
      3. Open the left drawer region
      4. Open the right drawer region
      5. Verify both regions can be opened at the same time and that the regions do not overlap the course content
      6. Open the left drawer, then reload the page, verify the left drawer is still open
      7. Close the left drawer, then reload the page, verify the left drawer is still closed
      8. Open the right drawer, then reload the page, verify the right drawer is still open
      9. Close the right drawer, then reload the page, verify the right drawer is still closed

      Test in a browser window with a width between 992px and 1400px

      1. Open the left drawer region, then open the right drawer region, notice that upon opening the right drawer region the left drawer region closes
      2. Try different combinations of opening the left and right drawer
      3. Verify only one drawer can be opened at the same time and that the course content is never overlapped by the drawers
      4. Open the left drawer, then reload the page, verify the left drawer is still open
      5. Close the left drawer, then reload the page, verify the left drawer is still closed
      6. Open the right drawer, then reload the page, verify the right drawer is still open
      7. Close the right drawer, then reload the page, verify the right drawer is still closed

      Test in a browser window with a width between 991px and 768px

      1. Open the left drawer region, then open the right drawer region, notice that upon opening the right drawer region the left drawer region closes
      2. Verify the drawer region overlaps the page content and the page content is darkened and can not be scrolled
      3. Open the left drawer, then reload the page, verify the left drawer is still open
      4. Open the right drawer, then reload the page, verify the right drawer is still open
      5. Close all drawers, then reload the page, verify all drawers are still closed

      Test in a browser window smaller than 768px wide

      1. Verify the drawer toggles are centered on the page at this size
      2. Click the drawer toggle to open the drawers
      3. Open the left drawer, then reload the page, verify the left drawer is still open
      4. Open the right drawer, then reload the page, verify the right drawer is still open
      5. Close all drawers, then reload the page, verify all drawers are still closed

      For this test use any browser width

      1. Use your keyboard to navigate to the drawer toggle buttons
      2. Press the enter key on a toggle button, this should show the drawer content
      3. Verify the focus is now on the drawer close button
      4. Press enter to close the drawer and verify the focus is back on the drawer toggle button
      5. Use the keyboard to navigate through all the top navbar items
      6. Verify that you can keep pressing tab all the way to the course content without losing where the focus is

      Test if the scroll to top button works on the course page

      1. Make sure there are enough sections (10+) on the course page so you are required to scroll down to get to the page footer
      2. Scroll down the page and verify the scroll to top button appears
      3. Click the button
      4. Verify the page scrolls back to the top

      Test user tours on a page with drawers

      1. As admin restore the attached Features Demo.mbz as a new course
      2. Then navigate to Site Administration > Appearance > User tours
      3. Restore the attached tour_export_course_mainpage.json user tour and enable it
      4. Enrol a test user into the restored course
      5. Login as the test user
      6. Verify the user tour correctly highlights elements in the main course region, the navbar and the blockregion

      After test

      1. Make sure to reset your local instance (e.g. through "mdk update" or "git reset --hard origin/master"
      Show
      Please test on theme Boost only Setup Fetch the test commit: git fetch git://github.com/ferranrecio/moodle.git MDL-71456-master git cherry-pick FETCH_HEAD Purge caches. Login as admin Create a new course Navigate to the course page Add some extra sections to the course so you can scroll down the page Add some blocks to the course Test in a browser window wider than 1400px Open the browser dev tools. Make sure that the dev tools window is docked right beside the page. Drag the border between the page and the dev tools to adjust the page width so that its width becomes greater than 1400px. In Chrome, you'll see the page size in the upper right corner as you drag the border. Open the left drawer region Open the right drawer region Verify both regions can be opened at the same time and that the regions do not overlap the course content Open the left drawer, then reload the page, verify the left drawer is still open Close the left drawer, then reload the page, verify the left drawer is still closed Open the right drawer, then reload the page, verify the right drawer is still open Close the right drawer, then reload the page, verify the right drawer is still closed Test in a browser window with a width between 992px and 1400px Open the left drawer region, then open the right drawer region, notice that upon opening the right drawer region the left drawer region closes Try different combinations of opening the left and right drawer Verify only one drawer can be opened at the same time and that the course content is never overlapped by the drawers Open the left drawer, then reload the page, verify the left drawer is still open Close the left drawer, then reload the page, verify the left drawer is still closed Open the right drawer, then reload the page, verify the right drawer is still open Close the right drawer, then reload the page, verify the right drawer is still closed Test in a browser window with a width between 991px and 768px Open the left drawer region, then open the right drawer region, notice that upon opening the right drawer region the left drawer region closes Verify the drawer region overlaps the page content and the page content is darkened and can not be scrolled Open the left drawer, then reload the page, verify the left drawer is still open Open the right drawer, then reload the page, verify the right drawer is still open Close all drawers, then reload the page, verify all drawers are still closed Test in a browser window smaller than 768px wide Verify the drawer toggles are centered on the page at this size Click the drawer toggle to open the drawers Open the left drawer, then reload the page, verify the left drawer is still open Open the right drawer, then reload the page, verify the right drawer is still open Close all drawers, then reload the page, verify all drawers are still closed For this test use any browser width Use your keyboard to navigate to the drawer toggle buttons Press the enter key on a toggle button, this should show the drawer content Verify the focus is now on the drawer close button Press enter to close the drawer and verify the focus is back on the drawer toggle button Use the keyboard to navigate through all the top navbar items Verify that you can keep pressing tab all the way to the course content without losing where the focus is Test if the scroll to top button works on the course page Make sure there are enough sections (10+) on the course page so you are required to scroll down to get to the page footer Scroll down the page and verify the scroll to top button appears Click the button Verify the page scrolls back to the top Test user tours on a page with drawers As admin restore the attached Features Demo.mbz as a new course Then navigate to Site Administration > Appearance > User tours Restore the attached tour_export_course_mainpage.json user tour and enable it Enrol a test user into the restored course Login as the test user Verify the user tour correctly highlights elements in the main course region, the navbar and the blockregion After test Make sure to reset your local instance (e.g. through " mdk update " or " git reset --hard origin/master "
    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-71456-master

      Description

      Remove the current na-drawer and replace it with new drawers for the block region and the course index

        Attachments

        1. Features Demo.mbz
          343 kB
        2. MDL-71456.jpg
          MDL-71456.jpg
          34 kB
        3. MDL-71456 (2).jpg
          MDL-71456 (2).jpg
          37 kB
        4. MDL-71456 (3).jpg
          MDL-71456 (3).jpg
          44 kB
        5. MDL-71456 (4).jpg
          MDL-71456 (4).jpg
          37 kB
        6. MDL-71456 (5).jpg
          MDL-71456 (5).jpg
          34 kB
        7. MDL-71456 (6).jpg
          MDL-71456 (6).jpg
          48 kB
        8. MDL-71456 (7).jpg
          MDL-71456 (7).jpg
          31 kB
        9. Selection_010.png
          Selection_010.png
          9 kB
        10. Selection_021.png
          Selection_021.png
          137 kB
        11. tour_export_course_mainpage.json
          6 kB

          Issue Links

            Activity

              People

              Assignee:
              tusefomal Ferran Recio
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Ilya Tregubov Ilya Tregubov
              Integrator:
              Jun Pataleta Jun Pataleta
              Tester:
              Anna Carissa Sadia Anna Carissa Sadia
              Participants:
              Component watchers:
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              1 Vote for this issue
              Watchers:
              12 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                13/Dec/21

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 3 days, 5 hours, 41 minutes
                  1w 3d 5h 41m