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

Update Course Index to match the UX team figma designs

    XMLWordPrintable

    Details

    • Testing Instructions:
      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
    • Affected Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-72456-master
    • Sprint:
      Moppies Kanban

      Description

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

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              tusefomal Ferran Recio
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Bas Brands Bas Brands
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona), Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

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