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

Improve the UI/UX of the recently accessed items block design for suitability in the Moodle 4.0 blocks drawer

    XMLWordPrintable

Details

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-73900-onlydrawer
    • Hide

      Please, test both in Classic and Boost. In Classic, test the block on both sides.

      In the context of this block, we refer to activities/resources as items.

      Setup

      1. Login as admin.
      2. Create a course C1.
      3. Create several activities/resources in C1, at least 4. Don't visit the activities.
      4. Navigate to the Dashboard.
      5. Switch editing on.
      6. Open the block drawer.
      7. Add the "Recently accessed items" block to the block drawer.
      8. Switch editing off.

      Test 1 - No items accessed

      1. Confirm you can see the "No recent items" message and icon.
      2. Switch editing on.
      3. Drag the "Recently accessed items" block from the drawer to the page content.
      4. Switch editing off.
      5. Verify the "No recent items" message and icon are correctly displayed.

      Test 2 - Three or fewer items accessed

      1. Go to the C1 course.
      2. Visit 1-3 activities/resources.
      3. Navigate to the Dashboard.
      4. Confirm you can see the item cards aligned horizontally and you can scroll horizontally if needed.
      5. Confirm you can't see the "Show more..." link.
      6. Switch editing on.
      7. Drag the "Recently accessed items" block from the page content to the drawer.
      8. Switch editing off.
      9. Verify the item cards are aligned vertically.

      Test 3 - More than three items accessed

      1. Go to the C1 course.
      2. Visit different activities/resources. In total, between test 2 and test 3 you had to visit more than three activities and resources.
      3. Navigate to the Dashboard.
      4. Confirm you can see the item cards aligned vertically.
      5. Confirm you can see the "Show more..." link beneath them.
      6. Click the "Show more..." link.
      7. Confirm you can see additional item cards.
      8. Switch editing on.
      9. Drag the "Recently accessed items" block from the drawer to the page content.
      10. Switch editing off.
      11. Confirm you can see the item cards aligned horizontally and you can scroll horizontally if needed.
      Show
      Please, test both in Classic and Boost. In Classic, test the block on both sides. In the context of this block, we refer to activities/resources as items. Setup Login as admin. Create a course C1. Create several activities/resources in C1, at least 4. Don't visit the activities. Navigate to the Dashboard. Switch editing on. Open the block drawer. Add the "Recently accessed items" block to the block drawer. Switch editing off. Test 1 - No items accessed Confirm you can see the "No recent items" message and icon. Switch editing on. Drag the "Recently accessed items" block from the drawer to the page content. Switch editing off. Verify the "No recent items" message and icon are correctly displayed. Test 2 - Three or fewer items accessed Go to the C1 course. Visit 1-3 activities/resources. Navigate to the Dashboard. Confirm you can see the item cards aligned horizontally and you can scroll horizontally if needed. Confirm you can't see the "Show more..." link. Switch editing on. Drag the "Recently accessed items" block from the page content to the drawer. Switch editing off. Verify the item cards are aligned vertically. Test 3 - More than three items accessed Go to the C1 course. Visit different activities/resources. In total, between test 2 and test 3 you had to visit more than three activities and resources. Navigate to the Dashboard. Confirm you can see the item cards aligned vertically. Confirm you can see the "Show more..." link beneath them. Click the "Show more..." link. Confirm you can see additional item cards. Switch editing on. Drag the "Recently accessed items" block from the drawer to the page content. Switch editing off. Confirm you can see the item cards aligned horizontally and you can scroll horizontally if needed.

    Description

      When adding the recently accessed items block to the drawer it shows a horizontal scroll. This is not ideal. 

      See options discussed here. (MDL-72092)

      The ideal solution is to stack 3 items vertically and add a show more link to load more.

      We should estimate the work involved in this to determine if this is feasible before starting QA. If not we will stick with the current block layout for 4.0, add it to the blocks drawer as is, and address this issue for 4.1.

       

      Attachments

        1. image-2022-03-14-12-08-19-878.png
          image-2022-03-14-12-08-19-878.png
          12 kB
        2. image-2022-03-14-12-08-19-917.png
          image-2022-03-14-12-08-19-917.png
          15 kB
        3. items too wide in main region.png
          items too wide in main region.png
          1015 kB
        4. longitemname.png
          longitemname.png
          10 kB
        5. recentlyaccessed_with_show_more_items_button.png
          recentlyaccessed_with_show_more_items_button.png
          74 kB
        6. Recently accessed - Show more.png
          Recently accessed - Show more.png
          155 kB
        7. remove margins.png
          remove margins.png
          1.09 MB
        8. SCR-20220329-g07.png
          SCR-20220329-g07.png
          12 kB
        9. Test 1_Screenshot_Boost.png
          Test 1_Screenshot_Boost.png
          51 kB
        10. Test 1_Screenshot_Classic.png
          Test 1_Screenshot_Classic.png
          82 kB
        11. Test 2_Screenshot_Boost.png
          Test 2_Screenshot_Boost.png
          36 kB
        12. Test 2_Screenshot_Classic.png
          Test 2_Screenshot_Classic.png
          101 kB
        13. Test 3_Screenshot_Boost.png
          Test 3_Screenshot_Boost.png
          41 kB
        14. Test 3_Screenshot_Classic.png
          Test 3_Screenshot_Classic.png
          139 kB

        Issue Links

          Activity

            People

              vmdef Victor Déniz Falcón
              sanderbangma Sander Bangma
              Bas Brands Bas Brands
              Jun Pataleta Jun Pataleta
              Gladys Basiana Gladys Basiana
              David Woloszyn, Huong Nguyen, Jake Dallimore, Michael Hawkins, Stevani Andolo
              Votes:
              1 Vote for this issue
              Watchers:
              13 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                19/Apr/22

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 3 days, 3 hours, 56 minutes
                  3d 3h 56m