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

New design for timeline block needs some fixes for Classic and mobile

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_400_STABLE
    • Fixed Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-72790-master-3
    • Testing Instructions:
      Hide

      Note: instructions are written testing with Firefox (shortcuts/mobile view may be different in other browsers).

      Setup

      1. Restore the attached course into a site.
      2. Access to these courses and reset (**):
        • Go to "Course administration > Reset".
        • Configure the "Course start date" to the current date.
      3. Enrol a student on the course.

      (**) For some reason (due to MDL-66129), the start date and close date are not correct after the restore. We need to make sure the close event is created properly (and it will be achieved by resetting the course or editing the activities manually and saving them, without doing any change).

      Test alignment in Boost

      1. Switch the theme to Boost if it is not already.
      2. Log in as the student and visit the dashboard. Add the timeline block to the main pane if it is not already there.
      3. Set the first dropdown to "All" and sorting dropdown to "Sort by dates".
      4. CONFIRM that all of the following are aligned with each other on the left side of the block:
        • "All" dropdown.
        • Horizontal borders/lines (the grey lines between each event).
        • Date headings.
        • "Show more activities" button.
      5. CONFIRM that all of the following are aligned with each other on the right side of the block:
        • Search bar.
        • Horizontal lines separating events.
        • Action buttons (eg "Add submission").
      6. Press the "Show more activities" button and CONFIRM the content that loads aligns with the previously loaded content, and that it all looks as expected (eg no double horizontal boders/lines).
      7. Collapse left drawer of the dashboard and CONFIRM the content of the block stretches out to occupy the extra space (ie there is only a small amount of padding between the left/right of the block content and the edges of the block.
      8. Switch the sort dropdown to "Sort by courses".
      9. Test steps 4-6 above in the new view and CONFIRM all are correct. On the left alignment, the course name heading should also align with the other content.

      Test alignment in Classic

      1. Switch the site theme to classic.
      2. Perform the same testing as above and CONFIRM all alignments are as expected.
      3. Also CONFIRM that the content area containing the event information has some padding on the left and right, so the headings/buttons etc are not up against the margin (ie they are not up against the edge of where the the white/grey meet).
      4. CONFIRM in "Sort by courses" view, that all events for the course are in a single white area (ie they are not all individual white elements with the grey background between them). Only the grey horizontal lines should separate each event.

      Classic sort by dates example:

      Classic sort by courses example:

      Test mobile/responsive fixes

      The following should be tested in both Boost and Classic, and for both dates and courses sorting:

      1. Press CTRL+SHIFT+M to go into mobile/responsive view. Drag the right side of the window so it takes up most of the width of the browser (at the top it should now be set to "Responsive" instead of a specific device screen size).
      2. Again from the right, slowly drag the window inwards.
      3. CONFIRM that the action buttons on the right of the timeline items all stay in alignment with each other.
      4. CONFIRM when the window reaches "Overdue Safety and equipment are important factors in all skating activities", the activity name starts to truncate (cut off with ...) and CONFIRM that the "Overdue" badge does not disappear (should always be visible).
      5. As you continue to reduce the size, CONFIRM eventually the action buttons move below the text (instead of to the right) and CONFIRM they are left aligned below the event text.
      6. CONFIRM once small enough, the "Inline Skating 101 · Assignment is due" text also truncates (cut off with ...).
      7. At smaller sizes, the above should appear similar to this:
      Show
      Note: instructions are written testing with Firefox (shortcuts/mobile view may be different in other browsers). Setup Restore the attached course into a site. Access to these courses and reset (**): Go to "Course administration > Reset". Configure the "Course start date" to the current date. Enrol a student on the course. (**) For some reason (due to MDL-66129 ), the start date and close date are not correct after the restore. We need to make sure the close event is created properly (and it will be achieved by resetting the course or editing the activities manually and saving them, without doing any change). Test alignment in Boost Switch the theme to Boost if it is not already. Log in as the student and visit the dashboard. Add the timeline block to the main pane if it is not already there. Set the first dropdown to "All" and sorting dropdown to "Sort by dates". CONFIRM that all of the following are aligned with each other on the left side of the block: "All" dropdown. Horizontal borders/lines (the grey lines between each event). Date headings. "Show more activities" button. CONFIRM that all of the following are aligned with each other on the right side of the block: Search bar. Horizontal lines separating events. Action buttons (eg "Add submission"). Press the "Show more activities" button and CONFIRM the content that loads aligns with the previously loaded content, and that it all looks as expected (eg no double horizontal boders/lines). Collapse left drawer of the dashboard and CONFIRM the content of the block stretches out to occupy the extra space (ie there is only a small amount of padding between the left/right of the block content and the edges of the block. Switch the sort dropdown to "Sort by courses". Test steps 4-6 above in the new view and CONFIRM all are correct. On the left alignment, the course name heading should also align with the other content. Test alignment in Classic Switch the site theme to classic. Perform the same testing as above and CONFIRM all alignments are as expected. Also CONFIRM that the content area containing the event information has some padding on the left and right, so the headings/buttons etc are not up against the margin (ie they are not up against the edge of where the the white/grey meet). CONFIRM in "Sort by courses" view, that all events for the course are in a single white area (ie they are not all individual white elements with the grey background between them). Only the grey horizontal lines should separate each event. Classic sort by dates example: Classic sort by courses example: Test mobile/responsive fixes The following should be tested in both Boost and Classic, and for both dates and courses sorting: Press CTRL+SHIFT+M to go into mobile/responsive view. Drag the right side of the window so it takes up most of the width of the browser (at the top it should now be set to "Responsive" instead of a specific device screen size). Again from the right, slowly drag the window inwards. CONFIRM that the action buttons on the right of the timeline items all stay in alignment with each other. CONFIRM when the window reaches "Overdue Safety and equipment are important factors in all skating activities", the activity name starts to truncate (cut off with ...) and CONFIRM that the "Overdue" badge does not disappear (should always be visible). As you continue to reduce the size, CONFIRM eventually the action buttons move below the text (instead of to the right) and CONFIRM they are left aligned below the event text. CONFIRM once small enough, the "Inline Skating 101 · Assignment is due" text also truncates (cut off with ...). At smaller sizes, the above should appear similar to this:
    • Story Points:
      1
    • Sprint:
      HQ Team International CI H2-21, HQ Team International CIH2-212

      Description

      Classic theme

      The new timeline block layout is a big improvement in Boost, but did not have any design specified for Classic, which has resulted in a couple of issues in how the content is laid out, namely:

      1. The row content begins and ends right on the border. Because the rows are white and block background is grey, the text sits against the edge of the colour change, so needs some padding.
      2. Each row is white and horizontally ruled, which looks fine if the whole content area is white, but in Classic this is not the case, so the rows look a bit strange in this layout.

      To address this, we need to:

      1. Add left and right padding to the rows, so the text isn't against the margins.
      2. Pad the dropdowns, coursed view "No activities require action" text and "show more activities" buttons on the left so they align with the padded action item text in the rows.
      3. Similarly pad the search input on the right to align with the action buttons.
      4. Pad the horizontal borders between items on both sides to align with the text/action buttons.
      5. Update the main content area where the rows/pages reside, so they have the same background colour as the rows. This will make the content one continuous colour, separated by the horizontal rules, as is the experience in Boost (but retaining the overall block background colour, so it still fits in with the Classic theme on the dashboard).

      Mobile / smaller screens

      It would also be good if we can fix the alignment of the call to action buttons when on smaller screens so that:

      • There is a small amount of additional top padding.
      • The buttons align with the activity name text when wrapping, so they flow with the content and aren't squashed up (currently they wrap to the far left of the row and are right up against the text).
      • Instead of wrapping elements out of alignment, the text truncates as expected (particularly visible in dates view, where the second line of text can be quite long).
      • All CTA buttons wrap at the same time, so all appear to the right or left and never a mixture of the two due to different activity name lengths etc.
      • Ensure the "overdue" pill on any overdue items always remains visible, and does not truncate when the activity title is long (the title should truncate while leaving the overdue pill intact).

      Block content width/margins

      The block currently has large left and right margins to reduce the max width of the content. This is inconsistent with other blocks, so should be removed. It is also something that will be later controlled by a max width imposed on all blocks in the dashboard, so does not need to be handled within the block content itself.

        Attachments

          Activity

            People

            Assignee:
            michaelh Michael Hawkins
            Reporter:
            michaelh Michael Hawkins
            Peer reviewer:
            Dongsheng Cai Dongsheng Cai
            Integrator:
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Tester:
            Peter Dias Peter Dias
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 1 hour, 10 minutes
                1d 1h 10m