From c368657153f340752c0a6b5feeea4f762bec083a Mon Sep 17 00:00:00 2001
From: Mathew May <mathewm@hotmail.co.nz>
Date: Tue, 3 Mar 2020 14:13:45 +0800
Subject: [PATCH] MDL-68030 core_course: Properly size elements in the chooser

---
 course/templates/chooser.mustache                | 10 +++++-----
 course/templates/chooser_item.mustache           |  2 +-
 course/templates/chooser_search.mustache         |  2 +-
 course/templates/chooser_search_results.mustache |  4 ++--
 theme/boost/scss/moodle/core.scss                |  7 +++----
 theme/boost/style/moodle.css                     |  7 +++----
 theme/classic/style/moodle.css                   |  7 +++----
 7 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/course/templates/chooser.mustache b/course/templates/chooser.mustache
index 3c00b543e24..6e3c96b671d 100644
--- a/course/templates/chooser.mustache
+++ b/course/templates/chooser.mustache
@@ -35,13 +35,13 @@
 
 <div data-region="carousel" class="carousel slide">
     <div class="carousel-inner" aria-live="polite">
-        <div class="carousel-item p-4 active" data-region="modules">
+        <div class="carousel-item px-4 py-3 active" data-region="modules">
             <div class="modchoosercontainer" aria-label="{{#str}} activitymodules, core {{/str}}">
                 <div class="searchcontainer mb-3">
                     {{>core_course/chooser_search}}
                 </div>
                 <div data-region="chooser-container">
-                    <ul class="nav nav-tabs mb-2" id="activities-{{uniqid}}" role="tablist">
+                    <ul class="nav nav-tabs mb-3" id="activities-{{uniqid}}" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link {{#favouritesFirst}}active{{/favouritesFirst}} {{^favourites}}d-none{{/favourites}}"
                                id="starred-tab-{{uniqid}}"
@@ -89,19 +89,19 @@
                     </ul>
                     <div class="tab-content" 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 mw-100 p-3 position-relative" role="menubar" data-region="chooser-options-container" data-render="favourites-area">
+                            <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/chooser_favourites}}
                             </div>
                         </div>
                         <div class="tab-pane {{#recommendedFirst}}active{{/recommendedFirst}}" id="recommended-{{uniqid}}" data-region="recommended" role="tabpanel" aria-labelledby="recommended-tab-{{uniqid}}">
-                            <div class="optionscontainer d-flex flex-wrap mw-100 p-3 position-relative" role="menubar" data-region="chooser-options-container">
+                            <div class="optionscontainer d-flex flex-wrap p-1 mw-100 position-relative" role="menubar" data-region="chooser-options-container">
                                 {{#recommended}}
                                     {{>core_course/chooser_item}}
                                 {{/recommended}}
                             </div>
                         </div>
                         <div class="tab-pane {{#fallback}}active{{/fallback}}" id="all-{{uniqid}}" data-region="default" role="tabpanel" aria-labelledby="all-tab-{{uniqid}}">
-                            <div class="optionscontainer d-flex flex-wrap mw-100 p-3 position-relative" role="menubar" data-region="chooser-options-container">
+                            <div class="optionscontainer d-flex flex-wrap p-1 mw-100 position-relative" role="menubar" data-region="chooser-options-container">
                                 {{#default}}
                                     {{>core_course/chooser_item}}
                                 {{/default}}
diff --git a/course/templates/chooser_item.mustache b/course/templates/chooser_item.mustache
index 105717ab21c..a05e9655108 100644
--- a/course/templates/chooser_item.mustache
+++ b/course/templates/chooser_item.mustache
@@ -29,7 +29,7 @@
         "icon": "<img class='icon' src='http://urltooptionicon'>"
     }
 }}
-<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option d-block text-center py-3 px-2" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
+<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 class="optioninfo w-100" 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">
             <span class="optionicon d-block">
diff --git a/course/templates/chooser_search.mustache b/course/templates/chooser_search.mustache
index 68be1ea8402..b0e62f6d5c5 100644
--- a/course/templates/chooser_search.mustache
+++ b/course/templates/chooser_search.mustache
@@ -29,7 +29,7 @@
     <input type="text"
            data-action="search"
            id="searchinput"
-           class="form-control form-control-lg searchinput pl-3 pr-0 py-2"
+           class="form-control form-control-lg searchinput px-3 py-2"
            placeholder="{{#str}} search, core {{/str}}"
            name="search"
            autocomplete="off"
diff --git a/course/templates/chooser_search_results.mustache b/course/templates/chooser_search_results.mustache
index 44d9f1b4602..5bc7add34fb 100644
--- a/course/templates/chooser_search_results.mustache
+++ b/course/templates/chooser_search_results.mustache
@@ -32,8 +32,8 @@
         }
     }
 }}
-<p class="mt-4 px-3">{{#str}} resultsfound, core, {{searchresultsnumber}} {{/str}}</p>
-<div class="searchresultitemscontainer d-flex flex-wrap mw-100 position-relative mt-4" role="menubar" data-region="search-result-items-container">
+<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">
     {{#searchresults}}
         {{>core_course/chooser_item}}
     {{/searchresults}}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 4e6fbb68956..0d9e2384935 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1509,7 +1509,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
     padding: 0;
-    height: 590px;
+    height: 640px;
     overflow-y: auto;
 
     .loading-icon {
@@ -1576,7 +1576,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     overflow-x: hidden;
     .option {
         // Six items per line.
-        flex-basis: 16%;
+        flex-basis: 16.66%;
         .optionactions {
             .optionaction {
                 cursor: pointer;
@@ -1614,8 +1614,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     background-color: $white;
     overflow-x: hidden;
     overflow-y: auto;
-    line-height: 2em;
-    height: 590px;
+    height: 640px;
 
     .content {
         overflow-y: auto;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index b097199aac8..48b9ab473a7 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -10652,7 +10652,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
   padding: 0;
-  height: 590px;
+  height: 640px;
   overflow-y: auto; }
   .modchooser .modal-body .loading-icon {
     opacity: 1; }
@@ -10698,7 +10698,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   overflow-x: hidden; }
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 16%; }
+    flex-basis: 16.66%; }
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
@@ -10728,8 +10728,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   background-color: #fff;
   overflow-x: hidden;
   overflow-y: auto;
-  line-height: 2em;
-  height: 590px; }
+  height: 640px; }
   .modchooser .modal-body .optionsummary .content {
     overflow-y: auto; }
     .modchooser .modal-body .optionsummary .content .heading .icon {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 67821109c18..4928b14ed31 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -10859,7 +10859,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
  */
 .modchooser .modal-body {
   padding: 0;
-  height: 590px;
+  height: 640px;
   overflow-y: auto; }
   .modchooser .modal-body .loading-icon {
     opacity: 1; }
@@ -10905,7 +10905,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   overflow-x: hidden; }
   .modchoosercontainer .optionscontainer .option,
   .modchoosercontainer .searchresultitemscontainer .option {
-    flex-basis: 16%; }
+    flex-basis: 16.66%; }
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
@@ -10935,8 +10935,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   background-color: #fff;
   overflow-x: hidden;
   overflow-y: auto;
-  line-height: 2em;
-  height: 590px; }
+  height: 640px; }
   .modchooser .modal-body .optionsummary .content {
     overflow-y: auto; }
     .modchooser .modal-body .optionsummary .content .heading .icon {