diff --git a/blocks/calendar_month/tests/behat/block_calendar_month_dashboard.feature b/blocks/calendar_month/tests/behat/block_calendar_month_dashboard.feature index 39f9cda4ae6..92e76a04cbf 100644 --- 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" diff --git a/calendar/templates/calendar_month.mustache b/calendar/templates/calendar_month.mustache index 97c694e5daa..da4800f081a 100644 --- a/calendar/templates/calendar_month.mustache +++ b/calendar/templates/calendar_month.mustache @@ -36,7 +36,7 @@ {{> core_calendar/month_detailed}} {{#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}} diff --git a/calendar/templates/month_detailed.mustache b/calendar/templates/month_detailed.mustache index 5bc9073303a..4671f521f08 100644 --- 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" diff --git a/calendar/tests/behat/behat_calendar.php b/calendar/tests/behat/behat_calendar.php index 71c3cc63c17..040b80a21c2 100644 --- 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\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. * diff --git a/calendar/tests/behat/calendar.feature b/calendar/tests/behat/calendar.feature index 557bb7c29c5..ebfd64d7b58 100644 --- 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" diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss index 2f174e03c3e..84bfb8e3697 100644 --- 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 + } } } } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 884421797fd..53f97b95ce2 100644 --- 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; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 4d466593dd4..0c1fea70601 100644 --- 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; }