MDL-68209 core_course: improve activity chooser styling

course/templates/activitychooser.mustache

@@ -33,15 +33,15 @@
     }
 }}
 
-<div data-region="carousel" class="carousel slide">
+<div data-region="carousel" class="carousel slide d-flex flex-fill">
-    <div class="carousel-inner" aria-live="polite">
+    <div class="carousel-inner d-flex flex-fill" aria-live="polite">
-        <div class="carousel-item px-4 py-3 active" data-region="modules">
+        <div class="carousel-item p-3 active" data-region="modules">
-            <div class="modchoosercontainer" aria-label="{{#str}} activitymodules, core {{/str}}">
+            <div class="modchoosercontainer d-flex flex-column flex-fill" aria-label="{{#str}} activitymodules, core {{/str}}">
                 <div class="searchcontainer mb-3">
                     {{>core_course/local/activitychooser/search}}
                 </div>
-                <div data-region="chooser-container">
+                <div data-region="chooser-container" class="chooser-container">
-                    <div class="nav nav-tabs mb-3" id="activities-{{uniqid}}" role="tablist">
+                    <div class="nav nav-tabs z-index-1" id="activities-{{uniqid}}" role="tablist">
                         <a class="nav-item nav-link {{#favouritesFirst}}active{{/favouritesFirst}} {{^favourites}}d-none{{/favourites}}"
                            id="starred-tab-{{uniqid}}"
                            data-toggle="tab"
@@ -108,7 +108,7 @@
                             {{#str}} recommended, core {{/str}}
                         </a>
                     </div>
-                    <div class="tab-content" id="tabbed-activities-{{uniqid}}">
+                    <div class="tab-content flex-fill border-left border-right border-bottom bg-light" id="tabbed-activities-{{uniqid}}">
                         <div class="tab-pane {{#favouritesFirst}}active{{/favouritesFirst}}" id="starred-{{uniqid}}" data-region="favourites" role="tabpanel" aria-labelledby="starred-tab-{{uniqid}}">
                             <div class="optionscontainer d-flex flex-wrap p-1 mw-100 position-relative" role="menubar" data-region="chooser-options-container" data-render="favourites-area">
                                 {{>core_course/local/activitychooser/favourites}}

course/templates/local/activitychooser/help.mustache

@@ -33,7 +33,7 @@
     }
 }}
 <div class="optionsummary" tabindex="-1" data-region="chooser-option-summary-container" aria-labelledby="optionsummary_label" aria-describedby="optionsumary_desc">
-    <div class="content text-left mb-5 px-5 py-4" data-region="chooser-option-summary-content-container">
+    <div class="content text-left mb-5 p-2 px-sm-5 py-sm-4" data-region="chooser-option-summary-content-container">
         <div class="heading mb-4">
             <h5 id="optionsummary_label-{{uniqid}}" data-region="summary-header" tabindex="0">
                 {{{icon}}}

course/templates/local/activitychooser/item.mustache

@@ -29,15 +29,15 @@
         "icon": "<img class='icon' src='http://urltooptionicon'>"
     }
 }}
-<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option d-block text-center py-1 mb-1" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
+<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option border-0 card m-1 bg-white" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
-    <div class="optioninfo w-100" data-region="chooser-option-info-container">
+    <div class="optioninfo card-body d-flex flex-column text-center p-1" data-region="chooser-option-info-container">
-        <a class="d-block" href="{{link}}" title="{{#str}} addnew, moodle, {{title}} {{/str}}" tabindex="-1" data-action="add-chooser-option">
+        <a class="d-flex flex-column justify-content-between flex-fill" href="{{link}}" title="{{#str}} addnew, moodle, {{title}} {{/str}}" tabindex="-1" data-action="add-chooser-option">
-            <span class="optionicon d-block">
+            <div class="optionicon mt-2 mb-1 icon-size-5 icon-no-margin">
                 {{{icon}}}
-            </span>
+            </div>
-            <p class="optionname d-block mt-2 mb-0"> {{#shortentext}}20, {{title}}{{/shortentext}}</p>
+            <div class="optionname clamp-2">{{title}}</div>
         </a>
-        <div class="optionactions btn-group" role="group" data-region="chooser-option-actions-container">
+        <div class="optionactions d-flex justify-content-center" role="group" data-region="chooser-option-actions-container">
             {{^legacyitem}}
                 <button class="btn btn-icon icon-no-margin icon-size-3 m-0 optionaction {{#favourite}}text-primary{{/favourite}}{{^favourite}}text-muted{{/favourite}}"
                         data-action="manage-module-favourite"

course/templates/local/activitychooser/search_results.mustache

@@ -33,8 +33,10 @@
     }
 }}
 <p class="mt-4 px-3 pb-1">{{#str}} resultsfound, core, {{searchresultsnumber}} {{/str}}</p>
-<div class="searchresultitemscontainer d-flex flex-wrap mw-100 position-relative p-1 mt-4" role="menubar" data-region="search-result-items-container">
+<div class="bg-light searchresultitemscontainer-wrapper border">
+<div class="searchresultitemscontainer d-flex flex-wrap mw-100 position-relative p-1" role="menubar" data-region="search-result-items-container">
     {{#searchresults}}
         {{>core_course/local/activitychooser/item}}
     {{/searchresults}}
 </div>
+</div>

course/tests/behat/behat_course.php

@@ -250,7 +250,7 @@ class behat_course extends behat_base {
             // Clicks the selected activity if it exists.
             $activityxpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' modchooser ')]" .
                     "/descendant::div[contains(concat(' ', normalize-space(@class), ' '), ' optioninfo ')]" .
-                    "/descendant::p[contains(concat(' ', normalize-space(@class), ' '), ' optionname ')]" .
+                    "/descendant::div[contains(concat(' ', normalize-space(@class), ' '), ' optionname ')]" .
                     "[normalize-space(.)=$activityliteral]" .
                     "/parent::a";
 

mod/forum/templates/forum_discussion_nested_v2_first_post.mustache

@@ -279,7 +279,7 @@
                 {{#attachments}}
                     {{^isimage}}
                         <div class="mt-3">
-                            <span class="icon-size-5">{{#pix}} {{icon}}, core {{/pix}}</span>
+                            <span class="icon-size-6">{{#pix}} {{icon}}, core {{/pix}}</span>
                             <div class="align-bottom d-inline-block">
                                 <a
                                     href="{{{url}}}"

theme/boost/scss/moodle/core.scss

@@ -1545,8 +1545,23 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
     padding: 0;
-    min-height: 640px;
     overflow-y: auto;
+    min-height: 640px;
+    display: flex;
+    flex-direction: column;
+
+    .searchresultitemscontainer-wrapper {
+        min-height: 495px;
+    }
+
+    .carousel-item.active {
+        display: flex;
+    }
+    .chooser-container {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+    }
 
     .loading-icon {
         opacity: 1;
@@ -1558,7 +1573,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
         }
     }
     .carousel-item .loading-icon .icon {
-        margin: 5em auto;
+        margin: 1em auto;
     }
 }
 
@@ -1583,8 +1598,8 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
 .modchoosercontainer .searchresultitemscontainer {
     overflow-x: hidden;
     .option {
-        // Six items per line.
+        // 2 items per line.
-        flex-basis: 16.66%;
+        flex-basis: calc(50% - 0.5rem);
         .optionactions {
             .optionaction {
                 cursor: pointer;
@@ -1600,15 +1615,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
                 &:hover {
                     text-decoration: none;
                 }
-                .optionicon {
-                    .icon {
-                        margin: 0;
-                        padding: 0;
-                        width: 32px;
-                        height: 32px;
-                        font-size: 32px;
-                    }
-                }
             }
         }
     }
@@ -1638,14 +1644,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     }
 }
 
-@include media-breakpoint-down(lg) {
-    .modchoosercontainer .optionscontainer .option,
-    .modchoosercontainer .searchresultitemscontainer .option {
-        // Five items per line.
-        flex-basis: 20%;
-    }
-}
-
 @include media-breakpoint-down(xs) {
     .path-course-view .modal-dialog.modal-lg,
     .path-course-view .modal-content,
@@ -1657,15 +1655,31 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     .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 {
-        // Four items per line.
+        // Three items per line.
-        flex-basis: 25%;
+        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(16.66% - 0.5rem);
     }
 }
 

theme/boost/scss/moodle/icons.scss

@@ -16,7 +16,9 @@ $iconsizes: map-merge((
   2: ($icon-width * .5),
   3: $icon-width,
   4: ($icon-width * 1.5),
-  5: ($icon-width * 3)
+  5: ($icon-width * 2),
+  6: ($icon-width * 2.5),
+  7: ($icon-width * 3)
 ), $iconsizes);
 // stylelint-enable
 

theme/boost/style/moodle.css

@@ -10894,8 +10894,18 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
   padding: 0;
+  overflow-y: auto;
   min-height: 640px;
-  overflow-y: auto; }
+  display: flex;
+  flex-direction: column; }
+  .modchooser .modal-body .searchresultitemscontainer-wrapper {
+    min-height: 495px; }
+  .modchooser .modal-body .carousel-item.active {
+    display: flex; }
+  .modchooser .modal-body .chooser-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto; }
   .modchooser .modal-body .loading-icon {
     opacity: 1; }
     .modchooser .modal-body .loading-icon .icon {
@@ -10904,7 +10914,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       height: 1em;
       width: 1em; }
   .modchooser .modal-body .carousel-item .loading-icon .icon {
-    margin: 5em auto; }
+    margin: 1em auto; }
 
 .modchoosercontainer.noscroll {
   overflow-y: hidden; }
@@ -10924,7 +10934,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   overflow-x: hidden; }
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 16.66%; }
+    flex-basis: calc(50% - 0.5rem); }
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
@@ -10938,13 +10948,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       .modchoosercontainer .optionscontainer .option .optioninfo a:hover,
       .modchoosercontainer .searchresultitemscontainer .option .optioninfo a:hover {
         text-decoration: none; }
-      .modchoosercontainer .optionscontainer .option .optioninfo a .optionicon .icon,
-      .modchoosercontainer .searchresultitemscontainer .option .optioninfo a .optionicon .icon {
-        margin: 0;
-        padding: 0;
-        width: 32px;
-        height: 32px;
-        font-size: 32px; }
 
 .modchooser .modal-body .optionsummary {
   background-color: #fff;
@@ -10962,11 +10965,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     border-top: 1px solid #dee2e6;
     background: #fff; }
 
-@media (max-width: 1199.98px) {
-  .modchoosercontainer .optionscontainer .option,
-  .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 20%; } }
-
 @media (max-width: 575.98px) {
   .path-course-view .modal-dialog.modal-lg,
   .path-course-view .modal-content,
@@ -10978,12 +10976,23 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   .modchoosercontainer,
   .optionscontainer,
   .searchresultitemscontainer {
-    height: 100%; }
+    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; } }
+
+@media (min-width: 576px) {
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 25%; } }
+    flex-basis: calc(33.33% - 0.5rem); } }
+
+@media (min-width: 992px) {
+  .modchoosercontainer .optionscontainer .option,
+  .modchoosercontainer .searchresultitemscontainer .option {
+    flex-basis: calc(16.66% - 0.5rem); } }
 
 /* Form element: listing */
 .formlistingradio {
@@ -11815,6 +11824,22 @@ body.h5p-embed .h5pmessages {
   /* stylelint-disable-line declaration-no-important */ }
 
 .icon-size-5 .icon {
+  height: 32px !important;
+  /* stylelint-disable-line declaration-no-important */
+  width: 32px !important;
+  /* stylelint-disable-line declaration-no-important */
+  font-size: 32px !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.icon-size-6 .icon {
+  height: 40px !important;
+  /* stylelint-disable-line declaration-no-important */
+  width: 40px !important;
+  /* stylelint-disable-line declaration-no-important */
+  font-size: 40px !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.icon-size-7 .icon {
   height: 48px !important;
   /* stylelint-disable-line declaration-no-important */
   width: 48px !important;
@@ -15112,6 +15137,16 @@ a.ygtvspacer:hover {
       width: 44px !important;
       /* stylelint-disable-line declaration-no-important */ }
     .message-app .btn.btn-link.btn-icon.icon-size-5 {
+      height: 52px !important;
+      /* stylelint-disable-line declaration-no-important */
+      width: 52px !important;
+      /* stylelint-disable-line declaration-no-important */ }
+    .message-app .btn.btn-link.btn-icon.icon-size-6 {
+      height: 60px !important;
+      /* stylelint-disable-line declaration-no-important */
+      width: 60px !important;
+      /* stylelint-disable-line declaration-no-important */ }
+    .message-app .btn.btn-link.btn-icon.icon-size-7 {
       height: 68px !important;
       /* stylelint-disable-line declaration-no-important */
       width: 68px !important;
@@ -17771,6 +17806,24 @@ p.arrow_button {
     line-height: 24px !important;
     /* stylelint-disable-line declaration-no-important */ }
   .btn.btn-icon.icon-size-5 {
+    height: 52px !important;
+    /* stylelint-disable-line declaration-no-important */
+    width: 52px !important;
+    /* stylelint-disable-line declaration-no-important */
+    font-size: 32px !important;
+    /* stylelint-disable-line declaration-no-important */
+    line-height: 32px !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .btn.btn-icon.icon-size-6 {
+    height: 60px !important;
+    /* stylelint-disable-line declaration-no-important */
+    width: 60px !important;
+    /* stylelint-disable-line declaration-no-important */
+    font-size: 40px !important;
+    /* stylelint-disable-line declaration-no-important */
+    line-height: 40px !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .btn.btn-icon.icon-size-7 {
     height: 68px !important;
     /* stylelint-disable-line declaration-no-important */
     width: 68px !important;

theme/classic/style/moodle.css

@@ -11101,8 +11101,18 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
   padding: 0;
+  overflow-y: auto;
   min-height: 640px;
-  overflow-y: auto; }
+  display: flex;
+  flex-direction: column; }
+  .modchooser .modal-body .searchresultitemscontainer-wrapper {
+    min-height: 495px; }
+  .modchooser .modal-body .carousel-item.active {
+    display: flex; }
+  .modchooser .modal-body .chooser-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto; }
   .modchooser .modal-body .loading-icon {
     opacity: 1; }
     .modchooser .modal-body .loading-icon .icon {
@@ -11111,7 +11121,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       height: 1em;
       width: 1em; }
   .modchooser .modal-body .carousel-item .loading-icon .icon {
-    margin: 5em auto; }
+    margin: 1em auto; }
 
 .modchoosercontainer.noscroll {
   overflow-y: hidden; }
@@ -11131,7 +11141,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   overflow-x: hidden; }
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 16.66%; }
+    flex-basis: calc(50% - 0.5rem); }
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
@@ -11145,13 +11155,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
       .modchoosercontainer .optionscontainer .option .optioninfo a:hover,
       .modchoosercontainer .searchresultitemscontainer .option .optioninfo a:hover {
         text-decoration: none; }
-      .modchoosercontainer .optionscontainer .option .optioninfo a .optionicon .icon,
-      .modchoosercontainer .searchresultitemscontainer .option .optioninfo a .optionicon .icon {
-        margin: 0;
-        padding: 0;
-        width: 32px;
-        height: 32px;
-        font-size: 32px; }
 
 .modchooser .modal-body .optionsummary {
   background-color: #fff;
@@ -11169,11 +11172,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     border-top: 1px solid #dee2e6;
     background: #fff; }
 
-@media (max-width: 1199.98px) {
-  .modchoosercontainer .optionscontainer .option,
-  .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 20%; } }
-
 @media (max-width: 575.98px) {
   .path-course-view .modal-dialog.modal-lg,
   .path-course-view .modal-content,
@@ -11185,12 +11183,23 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   .modchoosercontainer,
   .optionscontainer,
   .searchresultitemscontainer {
-    height: 100%; }
+    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; } }
+
+@media (min-width: 576px) {
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 25%; } }
+    flex-basis: calc(33.33% - 0.5rem); } }
+
+@media (min-width: 992px) {
+  .modchoosercontainer .optionscontainer .option,
+  .modchoosercontainer .searchresultitemscontainer .option {
+    flex-basis: calc(16.66% - 0.5rem); } }
 
 /* Form element: listing */
 .formlistingradio {
@@ -12026,6 +12035,22 @@ body.h5p-embed .h5pmessages {
   /* stylelint-disable-line declaration-no-important */ }
 
 .icon-size-5 .icon {
+  height: 32px !important;
+  /* stylelint-disable-line declaration-no-important */
+  width: 32px !important;
+  /* stylelint-disable-line declaration-no-important */
+  font-size: 32px !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.icon-size-6 .icon {
+  height: 40px !important;
+  /* stylelint-disable-line declaration-no-important */
+  width: 40px !important;
+  /* stylelint-disable-line declaration-no-important */
+  font-size: 40px !important;
+  /* stylelint-disable-line declaration-no-important */ }
+
+.icon-size-7 .icon {
   height: 48px !important;
   /* stylelint-disable-line declaration-no-important */
   width: 48px !important;
@@ -15327,6 +15352,16 @@ a.ygtvspacer:hover {
       width: 44px !important;
       /* stylelint-disable-line declaration-no-important */ }
     .message-app .btn.btn-link.btn-icon.icon-size-5 {
+      height: 52px !important;
+      /* stylelint-disable-line declaration-no-important */
+      width: 52px !important;
+      /* stylelint-disable-line declaration-no-important */ }
+    .message-app .btn.btn-link.btn-icon.icon-size-6 {
+      height: 60px !important;
+      /* stylelint-disable-line declaration-no-important */
+      width: 60px !important;
+      /* stylelint-disable-line declaration-no-important */ }
+    .message-app .btn.btn-link.btn-icon.icon-size-7 {
       height: 68px !important;
       /* stylelint-disable-line declaration-no-important */
       width: 68px !important;
@@ -18002,6 +18037,24 @@ p.arrow_button {
     line-height: 24px !important;
     /* stylelint-disable-line declaration-no-important */ }
   .btn.btn-icon.icon-size-5 {
+    height: 52px !important;
+    /* stylelint-disable-line declaration-no-important */
+    width: 52px !important;
+    /* stylelint-disable-line declaration-no-important */
+    font-size: 32px !important;
+    /* stylelint-disable-line declaration-no-important */
+    line-height: 32px !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .btn.btn-icon.icon-size-6 {
+    height: 60px !important;
+    /* stylelint-disable-line declaration-no-important */
+    width: 60px !important;
+    /* stylelint-disable-line declaration-no-important */
+    font-size: 40px !important;
+    /* stylelint-disable-line declaration-no-important */
+    line-height: 40px !important;
+    /* stylelint-disable-line declaration-no-important */ }
+  .btn.btn-icon.icon-size-7 {
     height: 68px !important;
     /* stylelint-disable-line declaration-no-important */
     width: 68px !important;