Merge branch 'MDL-73297-master' of https://github.com/HuongNV13/moodle

2025-04-13 20:42:22 +02:00 · 2022-01-10 14:42:36 +08:00 · 2022-01-10 14:42:36 +08:00 · d7fdb2e1da
commit d7fdb2e1da
parent b0b9fa7d84 db56452269
8 changed files with 113 additions and 29 deletions
--- a/blocks/calendar_month/tests/behat/block_calendar_month_dashboard.feature
+++ b/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"
--- a/calendar/templates/calendar_month.mustache
+++ b/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}}
--- a/calendar/templates/month_detailed.mustache
+++ b/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"
--- a/calendar/tests/behat/behat_calendar.php
+++ b/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.
     *
--- a/calendar/tests/behat/calendar.feature
+++ b/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"
--- a/theme/boost/scss/moodle/calendar.scss
+++ b/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
+                    }
                }
            }
        }
--- a/theme/boost/style/moodle.css
+++ b/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; }
--- a/theme/classic/style/moodle.css
+++ b/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; }