MDL-73297 Calendar: Display improvement in small screen

- Changed the breakpoint for responsiveness from 1200px to 768px
 - Added "dots" to indicate days with events for the large block and main calendar page
 - Added popovers for the main calendar page
 - Added new Behat scenarios to test the responsiveness

blocks/calendar_month/tests/behat/block_calendar_month_dashboard.feature

@@ -4,8 +4,7 @@ Feature: View a site event on the dashboard
   As a student
   I can view the event in the calendar
 
-  @javascript
-  Scenario: View a site event in the calendar block on the dashboard
+  Background:
     Given the following "users" exist:
       | username | firstname | lastname | email | idnumber |
       | student1 | Student | 1 | student1@example.com | S1 |
@@ -14,6 +13,21 @@ Feature: View a site event on the dashboard
       | id_eventtype | Site |
       | id_name | Site Event |
     And I log out
-    When I log in as "student1"
-    And I hover over today in the mini-calendar block
+
+  @javascript
+  Scenario: View a site event in the calendar block on the dashboard
+    Given I log in as "student1"
+    When I hover over today in the mini-calendar block
     Then I should see "Site Event"
+
+  @javascript
+  Scenario: The calendar block on the dashboard should be responsive
+    Given I log in as "student1"
+    When I change viewport size to "1200x1000"
+    Then I should see "Site Event"
+    And I change viewport size to "600x1000"
+    # We need to give the browser a couple seconds to re-render the page after the screen has been resized.
+    And I wait "1" seconds
+    And I should not see "Site Event"
+    And I hover over today in the mini-calendar block
+    And I should see "Site Event"

calendar/templates/calendar_month.mustache

@@ -36,7 +36,7 @@
     {{> core_calendar/month_detailed}}
 </div>
 {{#js}}
-require(['jquery', 'core_calendar/calendar'], function($, Calendar) {
+require(['jquery', 'core_calendar/calendar', 'core_calendar/popover'], function($, Calendar, calendarPopover) {
     Calendar.init($("#calendar-month-{{uniqid}}-{{calendarinstanceid}}"));
 });
 {{/js}}

calendar/templates/month_detailed.mustache

@@ -68,6 +68,7 @@
                             }}{{#defaulteventcontext}} clickable{{/defaulteventcontext}}{{!
                             }}{{#hasevents}} hasevent{{/hasevents}}{{!
                         }}"
+                        data-day="{{mday}}"
                         data-day-timestamp="{{timestamp}}"
                         data-drop-zone="month-view-day"
                         data-region="day"

calendar/tests/behat/behat_calendar.php

@@ -46,6 +46,7 @@ class behat_calendar extends behat_base {
     public static function get_partial_named_selectors(): array {
         return [
             new behat_component_named_selector('mini calendar block', [".//*[@data-block='calendar_month']"]),
+            new behat_component_named_selector('full calendar page', [".//*[@id='page-calendar-view']"]),
             new behat_component_named_selector('calendar day', [".//*[@data-day=%locator%]"]),
         ];
     }
@@ -100,6 +101,17 @@ class behat_calendar extends behat_base {
             [$day, 'core_calendar > calendar day', '', 'core_calendar > mini calendar block']);
     }
 
+    /**
+     * Hover over a specific day in the full calendar page.
+     *
+     * @Given /^I hover over day "(?P<dayofmonth>\d+)" of this month in the full calendar page$/
+     * @param int $day The day of the current month
+     */
+    public function i_hover_over_day_of_this_month_in_full_calendar_page(int $day): void {
+        $this->execute("behat_general::i_hover_in_the",
+            [$day, 'core_calendar > calendar day', '', 'core_calendar > full calendar page']);
+    }
+
     /**
      * Hover over today in the mini-calendar.
      *

calendar/tests/behat/calendar.feature

@@ -249,3 +249,20 @@ Feature: Perform basic calendar functionality
     Then the page should meet accessibility standards
     And the page should meet "wcag131, wcag143, wcag412" accessibility standards
     And the page should meet accessibility standards with "wcag131, wcag143, wcag412" extra tests
+
+  @javascript
+  Scenario: The calendar page should be responsive
+    Given I log in as "admin"
+    And I am viewing site calendar
+    And I create a calendar event:
+      | Type of event  | site      |
+      | Event title    | Event 1:1 |
+      | timestart[day] | 1         |
+    When I change viewport size to "1200x1000"
+    Then I should see "Event 1:1"
+    And I change viewport size to "600x1000"
+    # We need to give the browser a couple seconds to re-render the page after the screen has been resized.
+    And I wait "1" seconds
+    And I should not see "Event 1:1"
+    And I hover over day "1" of this month in the full calendar page
+    And I should see "Event 1:1"

theme/boost/scss/moodle/calendar.scss

@@ -573,6 +573,25 @@ table.calendartable caption {
     caption-side: top;
 }
 
+@mixin day-number-has-event {
+    .day-number {
+        display: inline-block;
+        position: relative;
+
+        &:before {
+            content: '.';
+            display: inline-block;
+            position: absolute;
+            bottom: 0.4em;
+            left: 0;
+            text-align: center;
+            width: 100%;
+            font-size: 3em;
+            color: inherit;
+        }
+    }
+}
+
 @media (min-width: 768px) {
     #page-calender-view {
         .container-fluid {
@@ -581,7 +600,7 @@ table.calendartable caption {
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 768px) {
     section:not(#region-main) {
         .block {
             &.block_calendar_month {
@@ -623,22 +642,7 @@ table.calendartable caption {
                                         display: none;
                                     }
 
-                                    .day-number {
-                                        display: inline-block;
-                                        position: relative;
-
-                                        &:before {
-                                            content: '.';
-                                            display: inline-block;
-                                            position: absolute;
-                                            bottom: 0.4em;
-                                            left: 0;
-                                            text-align: center;
-                                            width: 100%;
-                                            font-size: 3em;
-                                            color: inherit;
-                                        }
-                                    }
+                                    @include day-number-has-event;
                                 }
                                 &:after {
                                     content: '';
@@ -672,7 +676,7 @@ table.calendartable caption {
     }
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
     .maincalendar {
         .calendartable {
             &.calendarmonth {
@@ -691,12 +695,18 @@ table.calendartable caption {
                         [data-region="day-content"] {
                             display: none;
                         }
+
+                        @include day-number-has-event;
                     }
                     &:after {
                         content: '';
                         display: block;
                         margin-top: calc(100% - 26px);
                     }
+
+                    & > div {
+                        height: auto !important; // stylelint-disable-line declaration-no-important
+                    }
                 }
             }
         }

theme/boost/style/moodle.css

@@ -13472,7 +13472,7 @@ table.calendartable caption {
   #page-calender-view .container-fluid, #page-calender-view .container-sm, #page-calender-view .container-md, #page-calender-view .container-lg, #page-calender-view .container-xl {
     min-width: 1024px; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 768px) {
   section:not(#region-main) .block.block_calendar_month .maincalendar div.header {
     visibility: hidden;
     height: 0; }
@@ -13520,7 +13520,7 @@ table.calendartable caption {
     border-top: 1px solid rgba(0, 0, 0, 0.125);
     padding-top: 0.5rem; } }
 
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
   .maincalendar .calendartable.calendarmonth th,
   .maincalendar .calendartable.calendarmonth td {
     border: none;
@@ -13532,10 +13532,25 @@ table.calendartable caption {
     padding: 0; }
     .maincalendar .calendartable.calendarmonth td.hasevent [data-region="day-content"] {
       display: none; }
+    .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
+      display: inline-block;
+      position: relative; }
+      .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
+        content: '.';
+        display: inline-block;
+        position: absolute;
+        bottom: 0.4em;
+        left: 0;
+        text-align: center;
+        width: 100%;
+        font-size: 3em;
+        color: inherit; }
     .maincalendar .calendartable.calendarmonth td:after {
       content: '';
       display: block;
-      margin-top: calc(100% - 26px); } }
+      margin-top: calc(100% - 26px); }
+    .maincalendar .calendartable.calendarmonth td > div {
+      height: auto !important; } }
 
 .calendarwrapper {
   position: relative; }

theme/classic/style/moodle.css

@@ -13472,7 +13472,7 @@ table.calendartable caption {
   #page-calender-view .container-fluid, #page-calender-view .container-sm, #page-calender-view .container-md, #page-calender-view .container-lg, #page-calender-view .container-xl {
     min-width: 1024px; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 768px) {
   section:not(#region-main) .block.block_calendar_month .maincalendar div.header {
     visibility: hidden;
     height: 0; }
@@ -13520,7 +13520,7 @@ table.calendartable caption {
     border-top: 1px solid rgba(0, 0, 0, 0.125);
     padding-top: 0.5rem; } }
 
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
   .maincalendar .calendartable.calendarmonth th,
   .maincalendar .calendartable.calendarmonth td {
     border: none;
@@ -13532,10 +13532,25 @@ table.calendartable caption {
     padding: 0; }
     .maincalendar .calendartable.calendarmonth td.hasevent [data-region="day-content"] {
       display: none; }
+    .maincalendar .calendartable.calendarmonth td.hasevent .day-number {
+      display: inline-block;
+      position: relative; }
+      .maincalendar .calendartable.calendarmonth td.hasevent .day-number:before {
+        content: '.';
+        display: inline-block;
+        position: absolute;
+        bottom: 0.4em;
+        left: 0;
+        text-align: center;
+        width: 100%;
+        font-size: 3em;
+        color: inherit; }
     .maincalendar .calendartable.calendarmonth td:after {
       content: '';
       display: block;
-      margin-top: calc(100% - 26px); } }
+      margin-top: calc(100% - 26px); }
+    .maincalendar .calendartable.calendarmonth td > div {
+      height: auto !important; } }
 
 .calendarwrapper {
   position: relative; }