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

Add a current date indicator and make calendar block responsive when switching between small and large views

    XMLWordPrintable

Details

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-71810-master-3
    • Hide

      Functional testing - Side block

      Add Calendar block to side block.

      Make sure all the functionality still works after this change. You should be able to:

      • Add an event by clicking on the day container (not the number)
      • Switch between months (Previous/Next)
      • Go to Full calendar or Manage subscription.

      UI testing - Side block

      1. Add Calendar block to side block.
      2. Verify that The Course selection and New event button will not be shown.
      3. Verify that the day container will not have the border.
      4. Verify that the events of the day will not be shown in the day container.
      5. Verify that the date which has events will have a dot below the date number.
      6. Verify that the current date will have a circle background in primary colour (Blue by default - Or your customized colour).
      7. Hover the date number which has events, verify that you will see a popover that shows all the events on that day.
      8. Hover to other dates, verify that you will see a circle background in light grey colour.

      UI testing - Large block

      1. Add Calendar block to the main block.
      2. Verify that the current date will have a circle background in primary colour (Blue by default - Or your customized colour).
      3. Verify that there is no grey horizontal between the calendar and the bottom links.
      4. Hover to other dates, verify that you will see the background in light grey colour.
      5. Verify that the days of the week along the top of the calendar should be left-aligned.
      Show
      Functional testing - Side block Add Calendar block to side block. Make sure  all the functionality still works after this change. You should be able to: Add an event by clicking on the day container (not the number) Switch between months (Previous/Next) Go to Full calendar or Manage subscription. UI testing - Side block Add Calendar block to side block. Verify that The Course selection and New event button will not be shown. Verify that the day container will not have the border. Verify that the events of the day will not be shown in the day container. Verify that the date which has events will have a dot below the date number. Verify that the current date will have a circle background in primary colour (Blue by default - Or your customized colour). Hover the date number which has events, verify that you will see a popover that shows all the events on that day. Hover to other dates, verify that you will see a circle background in light grey colour. UI testing - Large block Add Calendar block to the main block. Verify that the current date will have a circle background in primary colour (Blue by default - Or your customized colour). Verify that there is no grey horizontal between the calendar and the bottom links. Hover to other dates, verify that you will see the background in light grey colour. Verify  that the days of the week along the top of the calendar should be left-aligned.
    • 0
    • HQ Team International Sprint 4, HQ Team International Sprint 5, HQ Team International Sprint 6, HQ Team International Sprint 7, HQ Team International Sprint 8, HQ Team International Sprint 9, HQ Team International Sprin 10, HQ Team International CI H2-21

    Description

      Displaying the calendar in full month view in MDL-71817, we need to make sure that when the block is resized to a smaller size, (e.g. on the block region), the calendar shows a simplified view that does not include each individual event.

      The scope of this issue is to also correct some size-specific issues (things that effect large or small version of the calendar). Below are lists of requirements for the smaller (block) and larger (block and/or main calendar) views, explaining the differences that should appear in each:

      Requirements - to be added for both large and small calendar/block

      1. Show a circle over the date of the current day (and include a "today" title for screen reader accessibility). This should appear similar to the one implemented by Apple's calendar app:
      2. The colour of the circle should be:
        1. Background colour: a new variable that is initialised with $primary;
        2. Test color: a new variable that is initialised with $white;

      Requirements - small calendar block

      1. Remove individual event listings and use a dot below the date to indicate there is at least one event on a date - see Apple design above. Days of the week, dates and the dots should all be centre aligned.
      2. Hovering over dates should be reflected using a very light grey version of the circle used for "today". This is similar to the hover effect used by Ubuntu:
      3. Hovering over the dates should also display the list  of individual events in a popover.
      4. We will not implement a background colour on dates with events.
      5. These changes will not be applied to the monthly view calendars shown on the right of the main calendar page. This is considered out of scope, and given 3 months are shown, adding extra height for event "dots" may extend the height of those too much on the page.

      Requirements - large calendar (block and/or calendar page as appropriate)

      1. Days of the week along the top of the calendar should be left aligned, so they are aligned with the dates in the same column.
      2. Remove grey horizontal divider between the bottom of the calendar and export/manage links. If possible, still retain this on the small calendar (but if not feasible, just remove for both).
      3. There appears to be some padding to the side of the calendar in this view (eg all of the content along the left is indented from the block title), this should be updated to be flush (align).
      4. On the calendar page, a similar issue should be fixed so the export calendar link aligns with the left edge of the calendar.
      5. Reduce the box shadow when hovering over the date cells, by using a lighter grey so the effect is less heavy.
      6. There appears to have been a bug introduced, where hovering over one event in a day will show the hover effect (link underline) on all events within that date. Hovering on an event should be corrected so it only have this effect on the relevant individual event.

      Below are a couple of older prototype screenshots for reference. Note they are from before all of the above were decided, but do show a similar "today" date indicator to the one listed above:

      Link to prototype

      Attachments

        Issue Links

          Activity

            People

              huongn@moodle.com Huong Nguyen
              lameze Simey Lameze
              Dongsheng Cai Dongsheng Cai
              Andrew Lyons Andrew Lyons
              Angelia Dela Cruz Angelia Dela Cruz
              Votes:
              0 Vote for this issue
              Watchers:
              8 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, 3 days, 47 minutes
                  1w 3d 47m