mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-18 22:08:20 +01:00
Code Issues Projects Releases Wiki Activity

MDL-68030 core_course: Properly size elements in the chooser

Browse Source
This commit is contained in:
Mathew May 2020-03-03 14:13:45 +08:00
parent 9df2f66fb4
commit c368657153
7 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
course/templates/chooser.mustache
View File

@ -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}}

2
course/templates/chooser_item.mustache
View File

@ -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">

2
course/templates/chooser_search.mustache
View File

@ -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"

4
course/templates/chooser_search_results.mustache
View File

@ -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}}

7
theme/boost/scss/moodle/core.scss
View File

@ -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;

7
theme/boost/style/moodle.css
View File

@ -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 {

7
theme/classic/style/moodle.css
View File

@ -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 {