diff --git a/public/course/templates/local/activitychooser/tabcontent.mustache b/public/course/templates/local/activitychooser/tabcontent.mustache
index 8bfa91440d0..035c3258ea7 100644
--- a/public/course/templates/local/activitychooser/tabcontent.mustache
+++ b/public/course/templates/local/activitychooser/tabcontent.mustache
@@ -48,13 +48,13 @@
class="categorycontent"
data-region="category-content"
>
-
diff --git a/public/course/tests/behat/activity_chooser.feature b/public/course/tests/behat/activity_chooser.feature
index 820774ce29d..eeee315ab7a 100644
--- a/public/course/tests/behat/activity_chooser.feature
+++ b/public/course/tests/behat/activity_chooser.feature
@@ -47,7 +47,6 @@ Feature: Display and choose from the available activities in course
When I click on "Information about the Assignment activity" "button" in the "Add an activity or resource" "dialogue"
Then I should see "Assignment" in the "help" "core_course > Activity chooser screen"
And I should see "The assignment activity module enables a teacher to communicate tasks, collect work and provide grades and feedback."
- And I should see "Activity details" in the "help" "core_course > Activity chooser screen"
And I should see "Assessment" in the "help" "core_course > Activity chooser screen"
# Confirm show summary also works for weekly format course
And I am on "C2" course homepage with editing mode on
@@ -56,7 +55,6 @@ Feature: Display and choose from the available activities in course
And I click on "Information about the Assignment activity" "button" in the "Add an activity or resource" "dialogue"
And I should see "Assignment" in the "help" "core_course > Activity chooser screen"
And I should see "The assignment activity module enables a teacher to communicate tasks, collect work and provide grades and feedback."
- And I should see "Activity details" in the "help" "core_course > Activity chooser screen"
And I should see "Assessment" in the "help" "core_course > Activity chooser screen"
Scenario: The teacher can hide the activity summary in the activity chooser
@@ -68,7 +66,6 @@ Feature: Display and choose from the available activities in course
And "help" "core_course > Activity chooser screen" should not be visible
And "Back" "button" in the "Add an activity or resource" "dialogue" should not be visible
And I should not see "The assignment activity module enables a teacher to communicate tasks, collect work and provide grades and feedback." in the "Add an activity or resource" "dialogue"
- And I should not see "Activity details" in the "help" "core_course > Activity chooser screen"
# Confirm hide summary also works for weekly format course
And I am on "C2" course homepage with editing mode on
And I click on "Add content" "button" in the "13 January - 19 January" "section"
@@ -79,7 +76,6 @@ Feature: Display and choose from the available activities in course
And "help" "core_course > Activity chooser screen" should not be visible
And "Back" "button" should not exist in the "modules" "core_course > Activity chooser screen"
And I should not see "The assignment activity module enables a teacher to communicate tasks, collect work and provide grades and feedback." in the "Add an activity or resource" "dialogue"
- And I should not see "Activity details" in the "Add an activity or resource" "dialogue"
Scenario: View recommended activities
When I log out
diff --git a/public/course/tests/behat/behat_course.php b/public/course/tests/behat/behat_course.php
index 3c5ec0ecb30..144c97edff4 100644
--- a/public/course/tests/behat/behat_course.php
+++ b/public/course/tests/behat/behat_course.php
@@ -326,7 +326,7 @@ class behat_course extends behat_base {
// Clicks the selected activity if it exists.
$activityliteral = behat_context_helper::escape(ucfirst($activityname));
$activityxpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' modchooser ')]" .
- "/descendant::div[contains(concat(' ', normalize-space(@class), ' '), ' optioninfo ')]" .
+ "/descendant::*[contains(concat(' ', normalize-space(@class), ' '), ' optioninfo ')]" .
"/descendant::div[contains(concat(' ', normalize-space(@class), ' '), ' optionname ')]" .
"[normalize-space(.)=$activityliteral]" .
"/parent::a";
diff --git a/public/lang/en/course.php b/public/lang/en/course.php
index f36f2456d2e..9fbe8487037 100644
--- a/public/lang/en/course.php
+++ b/public/lang/en/course.php
@@ -32,7 +32,6 @@ $string['activitydate:closed'] = 'Closed:';
$string['activitydate:closes'] = 'Closes:';
$string['activitydate:opened'] = 'Opened:';
$string['activitydate:opens'] = 'Opens:';
-$string['activitydetails'] = 'Activity details';
$string['addselectedactivity'] = 'Add selected activity';
$string['aria:coursecategory'] = 'Course category';
$string['aria:courseshortname'] = 'Course short name';
@@ -152,6 +151,7 @@ $string['searchresults'] = 'Search results: {$a}';
$string['sectionlink'] = 'Permalink';
$string['showstartedcoursestask'] = 'Show courses on start date';
$string['submitsearch'] = 'Submit search';
+$string['supports'] = 'Supports';
$string['studentsatriskincourse'] = 'Students at risk in {$a} course';
$string['studentsatriskinfomessage'] = 'Hi {$a->userfirstname},
Students in the {$a->coursename} course have been identified as being at risk.
';
diff --git a/public/theme/boost/scss/moodle/core.scss b/public/theme/boost/scss/moodle/core.scss
index 0f3bfb07dd4..8126dfbdfbd 100644
--- a/public/theme/boost/scss/moodle/core.scss
+++ b/public/theme/boost/scss/moodle/core.scss
@@ -1415,96 +1415,81 @@ audio.mediaplugin_html5audio {
}
/**
- * Module chooser dialogue (moodle-core-chooserdialogue)
- *
- * This CSS belong to the chooser dialogue which should work both with, and
- * without javascript enabled
+ * Module chooser dialogue (activity chooser)
*/
-.modchooser .modal-body {
- padding: 0;
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- .searchresultitemscontainer-wrapper {
- min-height: 495px;
+/* Main modal dialogue style customization. */
+
+.modchooser.modal-dialog {
+ --#{$prefix}modal-width: #{$modal-xl};
+ --#{$prefix}modal-header-border-width: 0;
+
+ .modal-header {
+ .modal-title {
+ flex-grow: 1;
+ text-align: center;
+ font-weight: $font-weight-bold;
+ font-size: $h5-font-size;
+ @include media-breakpoint-up(sm) {
+ font-size: $h4-font-size;
+ }
+ }
}
- .carousel-item {
- height: 640px;
- }
-
- .carousel-item.active {
- display: flex;
- }
- .chooser-container {
+ .modal-body {
display: flex;
flex-direction: column;
- flex: 1 1 auto;
- }
+ overflow-y: auto;
+ padding: 0;
- .loading-icon {
- opacity: 1;
- .icon {
- display: block;
- font-size: 3em;
- max-height: 3em;
- max-width: 3em;
- }
- }
- .carousel-item .loading-icon .icon {
- margin: 1em auto;
- }
- .searchbar {
- width: 100%;
- }
-}
+ .carousel-item {
+ background-color: $modal-content-bg;
+ // Remove the default transition on carousel items.
+ transition: none !important; /* stylelint-disable-line declaration-no-important */
-.modchooser .modal-footer {
- height: 70px;
- background: $modal-content-bg;
- .moodlenet-logo {
- .icon {
- height: 2.5rem;
- width: 6rem;
- max-height: 2.5rem;
- max-width: 6rem;
- margin-bottom: .6rem;
- }
- }
-}
+ &.active {
+ display: flex;
+ }
-.modchoosercontainer .optionscontainer,
-.modchoosercontainer .searchresultitemscontainer {
- overflow-x: hidden;
- .option {
- // 2 items per line.
- flex-basis: calc(50% - 0.5rem);
-
- &:hover {
- border: 1px solid $secondary-border-subtle-dark;
- }
-
- .optionactions {
- .optionaction {
- cursor: pointer;
- color: $gray-600;
- i {
- margin: 0;
- }
+ @include media-breakpoint-up(sm) {
+ height: 640px;
}
}
- .optioninfo {
- a {
- color: $gray-700;
- &:hover {
- text-decoration: none;
+
+ .loading-icon {
+ opacity: 1;
+
+ .icon {
+ display: block;
+ max-height: 3rem;
+ max-width: 3rem;
+ font-size: 3rem;
+
+ .carousel-item & {
+ margin: 1rem auto;
}
}
}
}
+
+ .modal-footer {
+ height: 70px;
+ background: $modal-content-bg;
+
+ .moodlenet-logo {
+ .icon {
+ height: 2.5rem;
+ width: 6rem;
+ max-height: 2.5rem;
+ max-width: 6rem;
+ margin-bottom: .6rem;
+ }
+ }
+ }
}
+/* Main container layout styles. */
+
.modchoosercontainer {
.modchooserfilters {
grid-area: filters;
@@ -1542,71 +1527,166 @@ audio.mediaplugin_html5audio {
"content";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
+ }
+}
- .modchoosernav {
- overflow-x: auto;
- height: 3rem;
+/* Main container Filters styles. */
+
+.modchooserfilters {
+ @include media-breakpoint-up(lg) {
+ // To center the search form in the filters area we need to adjust the left postion by deducting
+ // the calculated of the left navigation and its spacing.
+ .simplesearchform {
+ justify-content: center;
+ position: relative;
+ left: calc(-1*calc(75px + 2.5rem));
+ }
+
+ .searchbar {
+ max-width: 25rem !important; /* stylelint-disable-line declaration-no-important */
+ }
+ }
+}
+
+/* Main container Navigation styles. */
+
+.modchoosernav {
+ --#{$prefix}nav-pills-border-radius: #{$border-radius-pill};
+ --#{$prefix}nav-pills-link-active-bg: #{$body-color};
+ --#{$prefix}nav-link-font-size: #{$font-size-base};
+
+ .nav-link {
+ --#{$prefix}nav-link-color: #{$body-color};
+ --#{$prefix}nav-link-hover-color: #{$body-color};
+ --#{$prefix}nav-link-font-weight: #{$font-weight-medium};
+ --#{$prefix}nav-link-padding-y: .3rem;
+
+ width: fit-content;
+ border: $border-width $border-style transparent;
+
+ @include media-breakpoint-up(md) {
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
white-space: nowrap;
}
- }
-}
-.modchooser .modal-body .optionsummary {
- background-color: $white;
- overflow-x: hidden;
- overflow-y: auto;
-
- .activitychooser-option-details {
- min-width: 10rem;
+ &:not(.active) {
+ &:hover {
+ border: $border-width $border-style $border-color;
+ background-color: $gray-100;
+ }
+ }
}
- // Force the detail icons to be displaced to the left while keeping the name aligned.
- .modchooser-detail-name {
- margin-inline-start: map-get($spacers, 3) * -1;
+ @include media-breakpoint-down(md) {
+ overflow-x: auto;
+ white-space: nowrap;
+ background-color: $body-bg !important; /* stylelint-disable-line declaration-no-important */
- .modchooser-detail-icon {
- width: map-get($spacers, 3);
+ .nav-link {
+ border: $border-width $border-style $border-color !important; /* stylelint-disable-line declaration-no-important */
}
}
}
+
+/* Main container Content styles. */
+
+.modchoosercontent .optionscontainer {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: map-get($spacers, 2);
+
+ @include media-breakpoint-down(lg) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ @include media-breakpoint-down(sm) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .option {
+ --#{$prefix}btn-border-radius: #{$border-radius-lg};
+
+ height: fit-content;
+ border: 2px solid transparent;
+
+ &.selected {
+ border: 2px solid $primary;
+ background-color: $primary-light-background;
+ }
+
+ &:not(.selected):hover {
+ background-color: $gray-100;
+ }
+
+ .optioninfo {
+ display: block;
+ text-align: initial;
+ }
+
+ .optionactions {
+ position: relative;
+ z-index: 10;
+ }
+ }
+}
+
+
+/* Option summary styles. */
+
+.modchooser .optionsummary {
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100%;
+ background-color: $white;
+
+ .activitychooser-option-details {
+ min-width: 15rem;
+
+ .modchooser-detail:not(:last-child) {
+ margin-bottom: map-get($spacers, 4);
+ padding-bottom: map-get($spacers, 4);
+ border-bottom: $border-width $border-style $border-color;
+ }
+ }
+}
+
+/* Make modchooser modal full height and scrollable on small screens. */
+
@include media-breakpoint-down(sm) {
- .path-course-view .modal-dialog.modal-lg,
- .path-course-view .modal-content,
- .modchooser .modal-body,
- .modchooser .modal-body .carousel,
- .modchooser .modal-body .carousel-inner,
- .modchooser .modal-body .carousel-item,
- .modchooser .modal-body .optionsummary,
+
+ // Course view modal dialogs
+ .path-course-view {
+ .modal-dialog.modal-lg,
+ .modal-content {
+ height: 100%;
+ overflow-y: auto;
+ margin: 0;
+ }
+ }
+
+ // Modchooser modal body and nested carousel/summary elements
+ .modchooser {
+ .modal-body,
+ .modal-body .carousel,
+ .modal-body .carousel-inner,
+ .modal-body .carousel-item,
+ .modal-body .optionsummary,
+ .modal-body .searchresultitemscontainer-wrapper {
+ height: 100%;
+ overflow-y: auto;
+ }
+ }
+
+ // Containers needing full height and scroll
.modchoosercontainer,
.optionscontainer,
.searchresultitemscontainer {
- min-height: auto;
height: 100%;
overflow-y: auto;
}
- .path-course-view .modal-dialog.modal-lg {
- margin: 0;
- }
- .modchooser .modal-body .searchresultitemscontainer-wrapper {
- min-height: auto;
- }
-}
-
-@include media-breakpoint-up(sm) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- // Three items per line.
- flex-basis: calc(33.33% - 0.5rem);
- }
-}
-
-@include media-breakpoint-up(lg) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- // Six items per line.
- flex-basis: calc(25% - 0.5rem);
- }
}
/* Form element: listing */
@@ -2463,6 +2543,7 @@ input[disabled] {
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
+ line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
}
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index eb201ae578f..2626bac7e88 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -27032,52 +27032,59 @@ audio.mediaplugin_html5audio {
}
}
/**
- * Module chooser dialogue (moodle-core-chooserdialogue)
- *
- * This CSS belong to the chooser dialogue which should work both with, and
- * without javascript enabled
+ * Module chooser dialogue (activity chooser)
*/
-.modchooser .modal-body {
- padding: 0;
+/* Main modal dialogue style customization. */
+.modchooser.modal-dialog {
+ --bs-modal-width: 1140px;
+ --bs-modal-header-border-width: 0;
+}
+.modchooser.modal-dialog .modal-header .modal-title {
+ flex-grow: 1;
+ text-align: center;
+ font-weight: 700;
+ font-size: 1.171875rem;
+}
+@media (min-width: 576px) {
+ .modchooser.modal-dialog .modal-header .modal-title {
+ font-size: 1.40625rem;
+ }
+}
+.modchooser.modal-dialog .modal-body {
+ display: flex;
+ flex-direction: column;
overflow-y: auto;
- display: flex;
- flex-direction: column;
+ padding: 0;
}
-.modchooser .modal-body .searchresultitemscontainer-wrapper {
- min-height: 495px;
+.modchooser.modal-dialog .modal-body .carousel-item {
+ background-color: var(--bs-body-bg);
+ transition: none !important; /* stylelint-disable-line declaration-no-important */
}
-.modchooser .modal-body .carousel-item {
- height: 640px;
-}
-.modchooser .modal-body .carousel-item.active {
+.modchooser.modal-dialog .modal-body .carousel-item.active {
display: flex;
}
-.modchooser .modal-body .chooser-container {
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
+@media (min-width: 576px) {
+ .modchooser.modal-dialog .modal-body .carousel-item {
+ height: 640px;
+ }
}
-.modchooser .modal-body .loading-icon {
+.modchooser.modal-dialog .modal-body .loading-icon {
opacity: 1;
}
-.modchooser .modal-body .loading-icon .icon {
+.modchooser.modal-dialog .modal-body .loading-icon .icon {
display: block;
- font-size: 3em;
- max-height: 3em;
- max-width: 3em;
+ max-height: 3rem;
+ max-width: 3rem;
+ font-size: 3rem;
}
-.modchooser .modal-body .carousel-item .loading-icon .icon {
- margin: 1em auto;
+.carousel-item .modchooser.modal-dialog .modal-body .loading-icon .icon {
+ margin: 1rem auto;
}
-.modchooser .modal-body .searchbar {
- width: 100%;
-}
-
-.modchooser .modal-footer {
+.modchooser.modal-dialog .modal-footer {
height: 70px;
background: var(--bs-body-bg);
}
-.modchooser .modal-footer .moodlenet-logo .icon {
+.modchooser.modal-dialog .modal-footer .moodlenet-logo .icon {
height: 2.5rem;
width: 6rem;
max-height: 2.5rem;
@@ -27085,36 +27092,7 @@ audio.mediaplugin_html5audio {
margin-bottom: 0.6rem;
}
-.modchoosercontainer .optionscontainer,
-.modchoosercontainer .searchresultitemscontainer {
- overflow-x: hidden;
-}
-.modchoosercontainer .optionscontainer .option,
-.modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(50% - 0.5rem);
-}
-.modchoosercontainer .optionscontainer .option:hover,
-.modchoosercontainer .searchresultitemscontainer .option:hover {
- border: 1px solid #7c7f83;
-}
-.modchoosercontainer .optionscontainer .option .optionactions .optionaction,
-.modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
- cursor: pointer;
- color: #6a737b;
-}
-.modchoosercontainer .optionscontainer .option .optionactions .optionaction i,
-.modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction i {
- margin: 0;
-}
-.modchoosercontainer .optionscontainer .option .optioninfo a,
-.modchoosercontainer .searchresultitemscontainer .option .optioninfo a {
- color: #495057;
-}
-.modchoosercontainer .optionscontainer .option .optioninfo a:hover,
-.modchoosercontainer .searchresultitemscontainer .option .optioninfo a:hover {
- text-decoration: none;
-}
-
+/* Main container layout styles. */
.modchoosercontainer {
display: grid;
width: 100%;
@@ -27143,60 +27121,132 @@ audio.mediaplugin_html5audio {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}
- .modchoosercontainer .modchoosernav {
- overflow-x: auto;
- height: 3rem;
- white-space: nowrap;
+}
+
+/* Main container Filters styles. */
+@media (min-width: 992px) {
+ .modchooserfilters .simplesearchform {
+ justify-content: center;
+ position: relative;
+ left: calc(-1 * (75px + 2.5rem));
+ }
+ .modchooserfilters .searchbar {
+ max-width: 25rem !important; /* stylelint-disable-line declaration-no-important */
}
}
-.modchooser .modal-body .optionsummary {
- background-color: #fff;
- overflow-x: hidden;
- overflow-y: auto;
+/* Main container Navigation styles. */
+.modchoosernav {
+ --bs-nav-pills-border-radius: 50rem;
+ --bs-nav-pills-link-active-bg: #1d2125;
+ --bs-nav-link-font-size: 0.9375rem;
}
-.modchooser .modal-body .optionsummary .activitychooser-option-details {
- min-width: 10rem;
+.modchoosernav .nav-link {
+ --bs-nav-link-color: #1d2125;
+ --bs-nav-link-hover-color: #1d2125;
+ --bs-nav-link-font-weight: 500;
+ --bs-nav-link-padding-y: .3rem;
+ width: fit-content;
+ border: 1px solid transparent;
}
-.modchooser .modal-body .optionsummary .modchooser-detail-name {
- margin-inline-start: -1rem;
+@media (min-width: 768px) {
+ .modchoosernav .nav-link {
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
-.modchooser .modal-body .optionsummary .modchooser-detail-name .modchooser-detail-icon {
- width: 1rem;
+.modchoosernav .nav-link:not(.active):hover {
+ border: 1px solid #dee2e6;
+ background-color: #f8f9fa;
+}
+@media (max-width: 767.98px) {
+ .modchoosernav {
+ overflow-x: auto;
+ white-space: nowrap;
+ background-color: #fff !important; /* stylelint-disable-line declaration-no-important */
+ }
+ .modchoosernav .nav-link {
+ border: 1px solid #dee2e6 !important; /* stylelint-disable-line declaration-no-important */
+ }
}
+/* Main container Content styles. */
+.modchoosercontent .optionscontainer {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0.5rem;
+}
+@media (max-width: 991.98px) {
+ .modchoosercontent .optionscontainer {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+@media (max-width: 575.98px) {
+ .modchoosercontent .optionscontainer {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+.modchoosercontent .optionscontainer .option {
+ --bs-btn-border-radius: 0.6rem;
+ height: fit-content;
+ border: 2px solid transparent;
+}
+.modchoosercontent .optionscontainer .option.selected {
+ border: 2px solid #0f6cbf;
+ background-color: #e7f0f9;
+}
+.modchoosercontent .optionscontainer .option:not(.selected):hover {
+ background-color: #f8f9fa;
+}
+.modchoosercontent .optionscontainer .option .optioninfo {
+ display: block;
+ text-align: initial;
+}
+.modchoosercontent .optionscontainer .option .optionactions {
+ position: relative;
+ z-index: 10;
+}
+
+/* Option summary styles. */
+.modchooser .optionsummary {
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100%;
+ background-color: #fff;
+}
+.modchooser .optionsummary .activitychooser-option-details {
+ min-width: 15rem;
+}
+.modchooser .optionsummary .activitychooser-option-details .modchooser-detail:not(:last-child) {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid #dee2e6;
+}
+
+/* Make modchooser modal full height and scrollable on small screens. */
@media (max-width: 575.98px) {
.path-course-view .modal-dialog.modal-lg,
- .path-course-view .modal-content,
+ .path-course-view .modal-content {
+ height: 100%;
+ overflow-y: auto;
+ margin: 0;
+ }
.modchooser .modal-body,
.modchooser .modal-body .carousel,
.modchooser .modal-body .carousel-inner,
.modchooser .modal-body .carousel-item,
.modchooser .modal-body .optionsummary,
- .modchoosercontainer,
- .optionscontainer,
- .searchresultitemscontainer {
- min-height: auto;
+ .modchooser .modal-body .searchresultitemscontainer-wrapper {
height: 100%;
overflow-y: auto;
}
- .path-course-view .modal-dialog.modal-lg {
- margin: 0;
- }
- .modchooser .modal-body .searchresultitemscontainer-wrapper {
- min-height: auto;
- }
-}
-@media (min-width: 576px) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(33.33% - 0.5rem);
- }
-}
-@media (min-width: 992px) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(25% - 0.5rem);
+ .modchoosercontainer,
+ .optionscontainer,
+ .searchresultitemscontainer {
+ height: 100%;
+ overflow-y: auto;
}
}
/* Form element: listing */
@@ -27994,6 +28044,7 @@ input[disabled] {
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
+ line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
}
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index 053521b4356..0e1cb29dfff 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -27032,52 +27032,59 @@ audio.mediaplugin_html5audio {
}
}
/**
- * Module chooser dialogue (moodle-core-chooserdialogue)
- *
- * This CSS belong to the chooser dialogue which should work both with, and
- * without javascript enabled
+ * Module chooser dialogue (activity chooser)
*/
-.modchooser .modal-body {
- padding: 0;
+/* Main modal dialogue style customization. */
+.modchooser.modal-dialog {
+ --bs-modal-width: 1140px;
+ --bs-modal-header-border-width: 0;
+}
+.modchooser.modal-dialog .modal-header .modal-title {
+ flex-grow: 1;
+ text-align: center;
+ font-weight: 700;
+ font-size: 1.171875rem;
+}
+@media (min-width: 576px) {
+ .modchooser.modal-dialog .modal-header .modal-title {
+ font-size: 1.40625rem;
+ }
+}
+.modchooser.modal-dialog .modal-body {
+ display: flex;
+ flex-direction: column;
overflow-y: auto;
- display: flex;
- flex-direction: column;
+ padding: 0;
}
-.modchooser .modal-body .searchresultitemscontainer-wrapper {
- min-height: 495px;
+.modchooser.modal-dialog .modal-body .carousel-item {
+ background-color: var(--bs-body-bg);
+ transition: none !important; /* stylelint-disable-line declaration-no-important */
}
-.modchooser .modal-body .carousel-item {
- height: 640px;
-}
-.modchooser .modal-body .carousel-item.active {
+.modchooser.modal-dialog .modal-body .carousel-item.active {
display: flex;
}
-.modchooser .modal-body .chooser-container {
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
+@media (min-width: 576px) {
+ .modchooser.modal-dialog .modal-body .carousel-item {
+ height: 640px;
+ }
}
-.modchooser .modal-body .loading-icon {
+.modchooser.modal-dialog .modal-body .loading-icon {
opacity: 1;
}
-.modchooser .modal-body .loading-icon .icon {
+.modchooser.modal-dialog .modal-body .loading-icon .icon {
display: block;
- font-size: 3em;
- max-height: 3em;
- max-width: 3em;
+ max-height: 3rem;
+ max-width: 3rem;
+ font-size: 3rem;
}
-.modchooser .modal-body .carousel-item .loading-icon .icon {
- margin: 1em auto;
+.carousel-item .modchooser.modal-dialog .modal-body .loading-icon .icon {
+ margin: 1rem auto;
}
-.modchooser .modal-body .searchbar {
- width: 100%;
-}
-
-.modchooser .modal-footer {
+.modchooser.modal-dialog .modal-footer {
height: 70px;
background: var(--bs-body-bg);
}
-.modchooser .modal-footer .moodlenet-logo .icon {
+.modchooser.modal-dialog .modal-footer .moodlenet-logo .icon {
height: 2.5rem;
width: 6rem;
max-height: 2.5rem;
@@ -27085,36 +27092,7 @@ audio.mediaplugin_html5audio {
margin-bottom: 0.6rem;
}
-.modchoosercontainer .optionscontainer,
-.modchoosercontainer .searchresultitemscontainer {
- overflow-x: hidden;
-}
-.modchoosercontainer .optionscontainer .option,
-.modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(50% - 0.5rem);
-}
-.modchoosercontainer .optionscontainer .option:hover,
-.modchoosercontainer .searchresultitemscontainer .option:hover {
- border: 1px solid #7c7f83;
-}
-.modchoosercontainer .optionscontainer .option .optionactions .optionaction,
-.modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
- cursor: pointer;
- color: #6a737b;
-}
-.modchoosercontainer .optionscontainer .option .optionactions .optionaction i,
-.modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction i {
- margin: 0;
-}
-.modchoosercontainer .optionscontainer .option .optioninfo a,
-.modchoosercontainer .searchresultitemscontainer .option .optioninfo a {
- color: #495057;
-}
-.modchoosercontainer .optionscontainer .option .optioninfo a:hover,
-.modchoosercontainer .searchresultitemscontainer .option .optioninfo a:hover {
- text-decoration: none;
-}
-
+/* Main container layout styles. */
.modchoosercontainer {
display: grid;
width: 100%;
@@ -27143,60 +27121,132 @@ audio.mediaplugin_html5audio {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
}
- .modchoosercontainer .modchoosernav {
- overflow-x: auto;
- height: 3rem;
- white-space: nowrap;
+}
+
+/* Main container Filters styles. */
+@media (min-width: 992px) {
+ .modchooserfilters .simplesearchform {
+ justify-content: center;
+ position: relative;
+ left: calc(-1 * (75px + 2.5rem));
+ }
+ .modchooserfilters .searchbar {
+ max-width: 25rem !important; /* stylelint-disable-line declaration-no-important */
}
}
-.modchooser .modal-body .optionsummary {
- background-color: #fff;
- overflow-x: hidden;
- overflow-y: auto;
+/* Main container Navigation styles. */
+.modchoosernav {
+ --bs-nav-pills-border-radius: 50rem;
+ --bs-nav-pills-link-active-bg: #1d2125;
+ --bs-nav-link-font-size: 0.9375rem;
}
-.modchooser .modal-body .optionsummary .activitychooser-option-details {
- min-width: 10rem;
+.modchoosernav .nav-link {
+ --bs-nav-link-color: #1d2125;
+ --bs-nav-link-hover-color: #1d2125;
+ --bs-nav-link-font-weight: 500;
+ --bs-nav-link-padding-y: .3rem;
+ width: fit-content;
+ border: 1px solid transparent;
}
-.modchooser .modal-body .optionsummary .modchooser-detail-name {
- margin-inline-start: -1rem;
+@media (min-width: 768px) {
+ .modchoosernav .nav-link {
+ max-width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
-.modchooser .modal-body .optionsummary .modchooser-detail-name .modchooser-detail-icon {
- width: 1rem;
+.modchoosernav .nav-link:not(.active):hover {
+ border: 1px solid #dee2e6;
+ background-color: #f8f9fa;
+}
+@media (max-width: 767.98px) {
+ .modchoosernav {
+ overflow-x: auto;
+ white-space: nowrap;
+ background-color: #fff !important; /* stylelint-disable-line declaration-no-important */
+ }
+ .modchoosernav .nav-link {
+ border: 1px solid #dee2e6 !important; /* stylelint-disable-line declaration-no-important */
+ }
}
+/* Main container Content styles. */
+.modchoosercontent .optionscontainer {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0.5rem;
+}
+@media (max-width: 991.98px) {
+ .modchoosercontent .optionscontainer {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+@media (max-width: 575.98px) {
+ .modchoosercontent .optionscontainer {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+.modchoosercontent .optionscontainer .option {
+ --bs-btn-border-radius: 0.5rem;
+ height: fit-content;
+ border: 2px solid transparent;
+}
+.modchoosercontent .optionscontainer .option.selected {
+ border: 2px solid #0f6cbf;
+ background-color: #e7f0f9;
+}
+.modchoosercontent .optionscontainer .option:not(.selected):hover {
+ background-color: #f8f9fa;
+}
+.modchoosercontent .optionscontainer .option .optioninfo {
+ display: block;
+ text-align: initial;
+}
+.modchoosercontent .optionscontainer .option .optionactions {
+ position: relative;
+ z-index: 10;
+}
+
+/* Option summary styles. */
+.modchooser .optionsummary {
+ overflow-x: hidden;
+ overflow-y: auto;
+ width: 100%;
+ background-color: #fff;
+}
+.modchooser .optionsummary .activitychooser-option-details {
+ min-width: 15rem;
+}
+.modchooser .optionsummary .activitychooser-option-details .modchooser-detail:not(:last-child) {
+ margin-bottom: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid #dee2e6;
+}
+
+/* Make modchooser modal full height and scrollable on small screens. */
@media (max-width: 575.98px) {
.path-course-view .modal-dialog.modal-lg,
- .path-course-view .modal-content,
+ .path-course-view .modal-content {
+ height: 100%;
+ overflow-y: auto;
+ margin: 0;
+ }
.modchooser .modal-body,
.modchooser .modal-body .carousel,
.modchooser .modal-body .carousel-inner,
.modchooser .modal-body .carousel-item,
.modchooser .modal-body .optionsummary,
- .modchoosercontainer,
- .optionscontainer,
- .searchresultitemscontainer {
- min-height: auto;
+ .modchooser .modal-body .searchresultitemscontainer-wrapper {
height: 100%;
overflow-y: auto;
}
- .path-course-view .modal-dialog.modal-lg {
- margin: 0;
- }
- .modchooser .modal-body .searchresultitemscontainer-wrapper {
- min-height: auto;
- }
-}
-@media (min-width: 576px) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(33.33% - 0.5rem);
- }
-}
-@media (min-width: 992px) {
- .modchoosercontainer .optionscontainer .option,
- .modchoosercontainer .searchresultitemscontainer .option {
- flex-basis: calc(25% - 0.5rem);
+ .modchoosercontainer,
+ .optionscontainer,
+ .searchresultitemscontainer {
+ height: 100%;
+ overflow-y: auto;
}
}
/* Form element: listing */
@@ -27994,6 +28044,7 @@ input[disabled] {
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
+ line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
}