Details
-
Improvement
-
Resolution: Fixed
-
Major
-
4.0
-
MOODLE_400_STABLE
-
MOODLE_400_STABLE
-
MDL-71810-master-3 -
-
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
- 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:
- The colour of the circle should be:
- Background colour: a new variable that is initialised with $primary;
- Test color: a new variable that is initialised with $white;
Requirements - small calendar block
- 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.
- 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:
- Hovering over the dates should also display the list of individual events in a popover.
- We will not implement a background colour on dates with events.
- 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)
- 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.
- 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).
- 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).
- On the calendar page, a similar issue should be fixed so the export calendar link aligns with the left edge of the calendar.
- Reduce the box shadow when hovering over the date cells, by using a lighter grey so the effect is less heavy.
- 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: