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

Update Course Index to match the UX team figma designs

    XMLWordPrintable

Details

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72456-master
    • Hide

      This is mostly about aesthetics however there are a few things that could be tested:

      Open-close drawer buttons

      1. Access a course in topics format with both blocks and course index drawer closed.
      2. In both buttons do this test:
        1. Put the mouse over the button
          1. Check the button grow a few pixels to the center
          2. Check a tooltip "open XXX drawer" appears (where XXX is course index or blocks).
        2. Click the open button
          1. Check the drawer opens and the close button get the focus
          2. Check the close button has a tooltip "Close drawer"

      Lock icons in the course index

      1. Login as admin/teacher and create an activity with access restrictions
        1. Check the activity has a lock icon in the course index
      2. Log in as a student which does not comply with the conditions of access to the activity
        1. Check the activity has a lock icon in the course index
      3. Log in as a student that does comply with the  conditions of access
        1. Check the activity does not have the icon in the course index

      Page item in the course index

      1. Create a course with one activity
      2. Open the course index
      3. Access the activity
        1. Check the activity in the course index has a darker background color than the rest of the items.

      Scroll in the course index and blocks drawers

      1. Create a course with enough activities and sections to have a scroll in the course index (for example using: mdk run createcourse.sh)
      2. Add as many blocks to the course to guarantee the blocs drawer has a scroll too.
      3. Open both course index and blocks drawers
      4. Scroll down the course index
        1. Check the drawer header now drops a shadow over the course index content
      5. Scroll the course index up to the top
        1. Check the drawer header shadow disappears
      6. Repeat steps 4 and 5 with the blocks drawer
      Show
      This is mostly about aesthetics however there are a few things that could be tested: Open-close drawer buttons Access a course in topics format with both blocks and course index drawer closed. In both buttons do this test: Put the mouse over the button Check the button grow a few pixels to the center Check a tooltip "open XXX drawer" appears (where XXX is course index or blocks). Click the open button Check the drawer opens and the close button get the focus Check the close button has a tooltip "Close drawer" Lock icons in the course index Login as admin/teacher and create an activity with access restrictions Check the activity has a lock icon in the course index Log in as a student which does not comply with the conditions of access to the activity Check the activity has a lock icon in the course index Log in as a student that does comply with the  conditions of access Check the activity does not have the icon in the course index Page item in the course index Create a course with one activity Open the course index Access the activity Check the activity in the course index has a darker background color than the rest of the items. Scroll in the course index and blocks drawers Create a course with enough activities and sections to have a scroll in the course index (for example using: mdk run createcourse.sh) Add as many blocks to the course to guarantee the blocs drawer has a scroll too. Open both course index and blocks drawers Scroll down the course index Check the drawer header now drops a shadow over the course index content Scroll the course index up to the top Check the drawer header shadow disappears Repeat steps 4 and 5 with the blocks drawer
    • Moppies Kanban

    Description

      The visual design of the course index needs to be updated based on the latest figma designs.

      Attachments

        1. scrollbars.png
          scrollbars.png
          993 kB
        2. recording2.webm
          1.67 MB
        3. recording1.webm
          1009 kB
        4. mobile view.png
          mobile view.png
          119 kB
        5. mobile.png
          mobile.png
          747 kB
        6. mdl-72456_scroll.webm
          608 kB
        7. MDL-72456_page item.png
          MDL-72456_page item.png
          83 kB
        8. MDL-72456_lock icon_3.png
          MDL-72456_lock icon_3.png
          83 kB
        9. MDL-72456_lock icon_2.png
          MDL-72456_lock icon_2.png
          88 kB
        10. MDL-72456_lock icon_1.png
          MDL-72456_lock icon_1.png
          95 kB
        11. mdl-72456_drawers.webm
          285 kB
        12. image-2021-10-05-11-18-36-504.png
          image-2021-10-05-11-18-36-504.png
          15 kB
        13. image-2021-10-05-11-17-57-769.png
          image-2021-10-05-11-17-57-769.png
          17 kB
        14. image-2021-10-05-11-17-05-107.png
          image-2021-10-05-11-17-05-107.png
          13 kB
        15. failed quiz.png
          failed quiz.png
          744 kB

        Issue Links

          Activity

            People

              tusefomal Ferran Recio
              basbrands Bas Brands
              Bas Brands Bas Brands
              Ilya Tregubov Ilya Tregubov
              Angelia Dela Cruz Angelia Dela Cruz
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Laurent David, Raquel Ortega, Sara Arjona (@sarjona), Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              12 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 - 1 week, 1 hour, 30 minutes
                  1w 1h 30m