MDL-85593 theme_boost: Update modchooser styles
Update activity chooser UI: - Update related templates - Update related styles in core.scss - Fix related JS modules affected by the changes - Clean and improve existing styles
This commit is contained in:
Mikel Martín
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -6,6 +6,6 @@ define("core_course/local/activitychooser/exporter",["exports","core/str"],(func
|
||||
* @copyright 2025 Ferran Recio <ferran@moodle.com>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
const activityCategories=["administration","assessment","collaboration","communication","content","interactivecontent"];let allStrings=null;loadNecessaryStrings();async function loadNecessaryStrings(){if(null!==allStrings)return allStrings;allStrings={};const stringToLoad=[{key:"all",component:"core"},{key:"favourites",component:"core"},{key:"recommended",component:"core"},{key:"recommended_help",component:"core_course"},{key:"mod_purposes",component:"core_course"},...activityCategories.map((key=>({key:"mod_purpose_"+key,component:"core_course"}))),...activityCategories.map((key=>({key:"mod_purpose_"+key+"_help",component:"core_course"})))],loadedStrings=await(0,_str.getStrings)(stringToLoad);return stringToLoad.forEach(((_ref,index)=>{let{key:key}=_ref;allStrings[key]=loadedStrings[index]})),allStrings}return _exports.default=class{getTabData(tabId,filteredModules,tabLabel){let tabHelp=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;const result={tabId:tabId,active:arguments.length>4&&void 0!==arguments[4]&&arguments[4],items:filteredModules,displayed:filteredModules.length>0,tabLabel:tabLabel};return tabHelp&&(result.tabHelp=tabHelp),result}normaliseModulesData(modulesData){if(modulesData instanceof Map)modulesData=Array.from(modulesData.values());else if(!Array.isArray(modulesData))throw new Error("Invalid modules data format. Expected an array or a Map.");return modulesData}async getModChooserTemplateData(modulesData){modulesData=this.normaliseModulesData(modulesData);const allStrings=await loadNecessaryStrings(),favouriteTab=await this.getFavouriteTabData(modulesData),tabs=[{...this.getTabData("all",modulesData,allStrings.all,null,!favouriteTab.displayed),hasSearchResults:!0},favouriteTab,{...this.getTabData("recommended",modulesData.filter((mod=>!0===mod.recommended)),allStrings.recommended,allStrings.recommended_help),separator:!0}];return activityCategories.forEach((category=>{const categoryModules=modulesData.filter((mod=>mod.purpose==category));0!==categoryModules.length&&tabs.push(this.getTabData(category,categoryModules,allStrings["mod_purpose_"+category],allStrings["mod_purpose_"+category+"_help"]))})),{modules:modulesData,tabs:tabs}}async getModuleHelpTemplateData(moduleData){const purposeKey="mod_purpose_".concat(moduleData.purpose),allStrings=await loadNecessaryStrings(),data={...moduleData};return data.details=[{icon:"i/categoryevent",label:allStrings.mod_purposes,value:allStrings[purposeKey]||""}],data}async getFavouriteTabData(modulesData){modulesData=this.normaliseModulesData(modulesData);const allStrings=await loadNecessaryStrings(),favouriteModules=modulesData.filter((mod=>!0===mod.favourite));return this.getTabData("favourites",favouriteModules,allStrings.favourites,null,favouriteModules.length>0)}getSearchResultData(resultsModulesData){return{searchresultsnumber:(resultsModulesData=this.normaliseModulesData(resultsModulesData)).length,searchresults:resultsModulesData}}countTabItems(tabData){var _tabData$items$length,_tabData$items;return null!==(_tabData$items$length=null===(_tabData$items=tabData.items)||void 0===_tabData$items?void 0:_tabData$items.length)&&void 0!==_tabData$items$length?_tabData$items$length:0}getFooterData(footerData){return{activeFooter:footerData.customfootertemplate}}},_exports.default}));
|
||||
const activityCategories=["administration","assessment","collaboration","communication","content","interactivecontent"];let allStrings=null;loadNecessaryStrings();async function loadNecessaryStrings(){if(null!==allStrings)return allStrings;allStrings={};const stringToLoad=[{key:"all",component:"core"},{key:"favourites",component:"core"},{key:"recommended",component:"core"},{key:"recommended_help",component:"core_course"},{key:"supports",component:"core_course"},...activityCategories.map((key=>({key:"mod_purpose_"+key,component:"core_course"}))),...activityCategories.map((key=>({key:"mod_purpose_"+key+"_help",component:"core_course"})))],loadedStrings=await(0,_str.getStrings)(stringToLoad);return stringToLoad.forEach(((_ref,index)=>{let{key:key}=_ref;allStrings[key]=loadedStrings[index]})),allStrings}return _exports.default=class{getTabData(tabId,filteredModules,tabLabel){let tabHelp=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;const result={tabId:tabId,active:arguments.length>4&&void 0!==arguments[4]&&arguments[4],items:filteredModules,displayed:filteredModules.length>0,tabLabel:tabLabel};return tabHelp&&(result.tabHelp=tabHelp),result}normaliseModulesData(modulesData){if(modulesData instanceof Map)modulesData=Array.from(modulesData.values());else if(!Array.isArray(modulesData))throw new Error("Invalid modules data format. Expected an array or a Map.");return modulesData}async getModChooserTemplateData(modulesData){modulesData=this.normaliseModulesData(modulesData);const allStrings=await loadNecessaryStrings(),favouriteTab=await this.getFavouriteTabData(modulesData),tabs=[{...this.getTabData("all",modulesData,allStrings.all,null,!favouriteTab.displayed),hasSearchResults:!0},favouriteTab,{...this.getTabData("recommended",modulesData.filter((mod=>!0===mod.recommended)),allStrings.recommended,allStrings.recommended_help),separator:!0}];return activityCategories.forEach((category=>{const categoryModules=modulesData.filter((mod=>mod.purpose==category));0!==categoryModules.length&&tabs.push(this.getTabData(category,categoryModules,allStrings["mod_purpose_"+category],allStrings["mod_purpose_"+category+"_help"]))})),{modules:modulesData,tabs:tabs}}async getModuleHelpTemplateData(moduleData){const purposeKey="mod_purpose_".concat(moduleData.purpose),allStrings=await loadNecessaryStrings(),data={...moduleData};return data.details=[{label:allStrings.supports,value:allStrings[purposeKey]||""}],data}async getFavouriteTabData(modulesData){modulesData=this.normaliseModulesData(modulesData);const allStrings=await loadNecessaryStrings(),favouriteModules=modulesData.filter((mod=>!0===mod.favourite));return this.getTabData("favourites",favouriteModules,allStrings.favourites,null,favouriteModules.length>0)}getSearchResultData(resultsModulesData){return{searchresultsnumber:(resultsModulesData=this.normaliseModulesData(resultsModulesData)).length,searchresults:resultsModulesData}}countTabItems(tabData){var _tabData$items$length,_tabData$items;return null!==(_tabData$items$length=null===(_tabData$items=tabData.items)||void 0===_tabData$items?void 0:_tabData$items.length)&&void 0!==_tabData$items$length?_tabData$items$length:0}getFooterData(footerData){return{activeFooter:footerData.customfootertemplate}}},_exports.default}));
|
||||
|
||||
//# sourceMappingURL=exporter.min.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -285,6 +285,7 @@ class ActivityChooserDialogue {
|
||||
* @return {Promise} A promise that resolves when the event is handled
|
||||
*/
|
||||
async handleModalClick(event) {
|
||||
event.preventDefault();
|
||||
const target = event.target;
|
||||
|
||||
if (target.closest(selectors.actions.optionActions.showSummary)) {
|
||||
@@ -309,7 +310,7 @@ class ActivityChooserDialogue {
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.closest(selectors.regions.chooserOption.container)) {
|
||||
if (target.closest(selectors.regions.chooserOption.info)) {
|
||||
event.preventDefault();
|
||||
this.handleOptionSelection(target);
|
||||
return;
|
||||
|
||||
@@ -180,8 +180,6 @@ export default class ChooserDialogueDOM {
|
||||
`${selectors.elements.moduleItem(internal)} ${selectors.actions.optionActions.manageFavourite}`
|
||||
);
|
||||
Array.from(favouriteButtons).forEach((element) => {
|
||||
element.classList.toggle('text-muted', !favourite);
|
||||
element.classList.toggle('text-primary', favourite);
|
||||
element.dataset.favourited = favourite;
|
||||
element.setAttribute('aria-pressed', favourite);
|
||||
element.querySelector(selectors.elements.favouriteIconActive)?.classList.toggle('d-none', !favourite);
|
||||
@@ -190,6 +188,7 @@ export default class ChooserDialogueDOM {
|
||||
const iconSelectsor = favourite ? selectors.elements.favouriteIconActive : selectors.elements.favouriteIconInactive;
|
||||
const favouriteIcon = element.querySelector(iconSelectsor);
|
||||
element.setAttribute('aria-label', favouriteIcon?.getAttribute('data-action-label') || '');
|
||||
element.setAttribute('title', favouriteIcon?.getAttribute('data-action-label') || '');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -543,7 +542,6 @@ export default class ChooserDialogueDOM {
|
||||
markChooserOptionAsSelected(chooserOption) {
|
||||
this.unmarkAllChooserOptionAsSelected();
|
||||
chooserOption.classList.add('selected');
|
||||
chooserOption.classList.add('border-primary');
|
||||
chooserOption.setAttribute('aria-selected', 'true');
|
||||
|
||||
const footer = getFirst(this.modal.getFooter());
|
||||
@@ -560,7 +558,6 @@ export default class ChooserDialogueDOM {
|
||||
const selectedOptions = this.modalBody.querySelectorAll(`${selectors.regions.chooserOption.container}.selected`);
|
||||
selectedOptions.forEach((option) => {
|
||||
option.classList.remove('selected');
|
||||
option.classList.remove('border-primary');
|
||||
option.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
|
||||
@@ -161,8 +161,7 @@ export default class {
|
||||
};
|
||||
data.details = [
|
||||
{
|
||||
icon: 'i/categoryevent',
|
||||
label: allStrings['mod_purposes'],
|
||||
label: allStrings['supports'],
|
||||
value: allStrings[purposeKey] || '',
|
||||
},
|
||||
];
|
||||
@@ -247,7 +246,7 @@ async function loadNecessaryStrings() {
|
||||
{key: 'favourites', component: 'core'},
|
||||
{key: 'recommended', component: 'core'},
|
||||
{key: 'recommended_help', component: 'core_course'},
|
||||
{key: 'mod_purposes', component: 'core_course'},
|
||||
{key: 'supports', component: 'core_course'},
|
||||
...activityCategories.map(
|
||||
(key) => ({
|
||||
key: 'mod_purpose_' + key,
|
||||
|
||||
@@ -45,11 +45,11 @@
|
||||
|
||||
<div data-region="carousel" class="carousel slide d-flex flex-fill">
|
||||
<div class="carousel-inner d-flex flex-fill" aria-live="polite">
|
||||
<div class="carousel-item p-3 active" data-region="modules">
|
||||
<div class="carousel-item p-3 py-sm-3 px-sm-5 active" data-region="modules">
|
||||
{{>core_course/local/activitychooser/modchoosercontainer}}
|
||||
</div>
|
||||
<div class="carousel-item" data-region="help"></div>
|
||||
<div class="carousel-item p-3 py-sm-3 px-sm-5" data-region="help"></div>
|
||||
<!--The following div is used as a place for additional plugins to have widgets in the chooser.-->
|
||||
<div class="carousel-item" data-region="pluginCarousel"></div>
|
||||
<div class="carousel-item p-3 py-sm-3 px-sm-5" data-region="pluginCarousel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<p class="activitychooser_help">{{tabHelp}}</p>
|
||||
{{/tabHelp}}
|
||||
<div
|
||||
class="optionscontainer d-flex flex-wrap mw-100 position-relative"
|
||||
class="optionscontainer mw-100 position-relative"
|
||||
role="menubar"
|
||||
data-region="chooser-options-container"
|
||||
>
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
aria-describedby="optionsumary_desc-{{uniqid}}"
|
||||
>
|
||||
<div
|
||||
class="p-5"
|
||||
data-region="chooser-option-summary-content-container"
|
||||
>
|
||||
<div
|
||||
@@ -52,12 +51,12 @@
|
||||
tabindex="0"
|
||||
>
|
||||
<h6 class="h3 d-flex align-self-stretch align-items-center mb-4 gap-2">
|
||||
<div
|
||||
<span
|
||||
class="modicon_{{name}} activityiconcontainer smaller {{!
|
||||
}} {{purpose}} {{#branded}}isbranded{{/branded}}"
|
||||
>
|
||||
{{{icon}}}
|
||||
</div>
|
||||
</span>
|
||||
{{title}}
|
||||
</h6>
|
||||
</div>
|
||||
@@ -66,34 +65,28 @@
|
||||
<div
|
||||
class="activitychooser-option-details"
|
||||
>
|
||||
<div class="h5">{{#str}} activitydetails, course {{/str}}</div>
|
||||
{{#details}}
|
||||
<div class="modchooser-detail ps-3 pt-3">
|
||||
<div class="modchooser-detail">
|
||||
{{! Detail name and value. }}
|
||||
<div
|
||||
class="modchooser-detail-name {{!
|
||||
}} d-flex align-items-center text-muted icon-size-2"
|
||||
}} d-flex align-items-center text-muted fw-medium"
|
||||
>
|
||||
<div
|
||||
class="modchooser-detail-icon icon-no-margin d-flex align-items-center"
|
||||
>
|
||||
{{#pix}} {{icon}}, core {{/pix}}
|
||||
</div>
|
||||
<div>
|
||||
<small>{{label}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modchooser-detail-value fw-medium">
|
||||
<div class="modchooser-detail-value mt-2 fw-medium">
|
||||
{{value}}
|
||||
</div>
|
||||
</div>
|
||||
{{/details}}
|
||||
</div>
|
||||
{{! Repsonsive dividers. }}
|
||||
<div class="d-none d-md-block vr mx-2"></div>
|
||||
<hr class="d-block d-md-none my-2" />
|
||||
{{! Repsonsive divider. }}
|
||||
<hr class="d-block d-md-none my-2">
|
||||
{{! General helps text. }}
|
||||
<div
|
||||
class="flex-grow-1"
|
||||
class="flex-grow-1 pe-md-5"
|
||||
id="optionsumary_desc-{{uniqid}}"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
@@ -31,18 +31,34 @@
|
||||
"branded": 0
|
||||
}
|
||||
}}
|
||||
<div role="menuitem" tabindex="-1" aria-label="{{title}}" class="option card m-1 bg-white" data-region="chooser-option-container" data-internal="{{name}}" data-modname="{{componentname}}_{{link}}">
|
||||
<div class="optioninfo card-body d-flex flex-column text-center p-1" data-region="chooser-option-info-container">
|
||||
<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">
|
||||
<div class="optionicon mt-2 mb-1 mx-auto icon-no-margin modicon_{{name}} activityiconcontainer smaller
|
||||
{{purpose}} {{#branded}}isbranded{{/branded}}">
|
||||
{{{icon}}}
|
||||
</div>
|
||||
<div class="optionname clamp-2">{{title}}</div>
|
||||
</a>
|
||||
<div class="optionactions d-flex justify-content-center" role="group" data-region="chooser-option-actions-container">
|
||||
{{^legacyitem}}
|
||||
<button class="btn btn-icon m-0 optionaction {{#favourite}}text-primary{{/favourite}}{{^favourite}}text-muted{{/favourite}}"
|
||||
<div role="menuitem"
|
||||
tabindex="-1"
|
||||
aria-label="{{title}}"
|
||||
class="option btn m-sm-1 position-relative"
|
||||
data-region="chooser-option-container"
|
||||
data-internal="{{name}}"
|
||||
data-modname="{{componentname}}_{{link}}"
|
||||
>
|
||||
<div class="d-flex gap-2 rounded" data-region="chooser-option-info-container">
|
||||
<div class="optionicon icon-no-margin modicon_{{name}} activityiconcontainer smaller
|
||||
{{purpose}} {{#branded}}isbranded{{/branded}}">
|
||||
{{{icon}}}
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{link}}"
|
||||
title="{{#str}} addnew, moodle, {{title}} {{/str}}"
|
||||
tabindex="-1"
|
||||
data-action="add-chooser-option"
|
||||
class="optioninfo text-decoration-none text-body stretched-link"
|
||||
>
|
||||
<div class="optionname clamp-2">{{title}}</div>
|
||||
</a>
|
||||
<div class="optionactions d-flex align-items-start" role="group" data-region="chooser-option-actions-container">
|
||||
<button class="btn btn-icon m-0 optionaction" data-action="show-option-summary" tabindex="-1" title="{{#str}} informationformodule, core_course, {{title}} {{/str}}">
|
||||
<span aria-hidden="true">{{#pix}} docs, core {{/pix}}</span>
|
||||
</button>
|
||||
{{^legacyitem}}
|
||||
<button class="btn btn-icon m-0 optionaction"
|
||||
data-action="manage-module-favourite"
|
||||
data-favourited="{{favourite}}"
|
||||
data-id="{{id}}"
|
||||
@@ -51,10 +67,12 @@
|
||||
{{^favourite}}
|
||||
aria-pressed="false"
|
||||
aria-label="{{#str}} aria:modulefavourite, core_course, {{title}} {{/str}}"
|
||||
title="{{#str}} aria:modulefavourite, core_course, {{title}} {{/str}}"
|
||||
{{/favourite}}
|
||||
{{#favourite}}
|
||||
aria-pressed="true"
|
||||
aria-label="{{#str}} aria:moduleunfavourite, core_course, {{title}} {{/str}}"
|
||||
title="{{#str}} aria:moduleunfavourite, core_course, {{title}} {{/str}}"
|
||||
{{/favourite}}
|
||||
tabindex="-1"
|
||||
>
|
||||
@@ -73,11 +91,8 @@
|
||||
{{#pix}} i/star-o, core {{/pix}}
|
||||
</span>
|
||||
</button>
|
||||
{{/legacyitem}}
|
||||
<button class="btn btn-icon m-0 optionaction" data-action="show-option-summary" tabindex="-1">
|
||||
<span aria-hidden="true">{{#pix}} docs, core {{/pix}}</span>
|
||||
<span class="visually-hidden">{{#str}} informationformodule, core_course, {{title}} {{/str}}</span>
|
||||
</button>
|
||||
{{/legacyitem}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,12 +88,12 @@
|
||||
data-region="chooser-container"
|
||||
>
|
||||
<div class="modchooserfilters">
|
||||
<div class="searchcontainer mb-3 px-1">
|
||||
<div class="searchcontainer mb-4 p-1">
|
||||
{{>core_course/local/activitychooser/search}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="nav nav-pills modchoosernav d-flex flex-row flex-md-column flex-nowrap gap-2"
|
||||
class="nav nav-pills modchoosernav d-flex flex-row flex-md-column flex-nowrap gap-2 me-md-5"
|
||||
id="categories-{{uniqid}}"
|
||||
role="tablist"
|
||||
>
|
||||
@@ -111,7 +111,7 @@
|
||||
>
|
||||
{{tabLabel}}
|
||||
</a>
|
||||
{{#separator}}<hr>{{/separator}}
|
||||
{{#separator}}<hr class="d-none d-md-block ms-3" aria-hidden="true">{{/separator}}
|
||||
{{/tabs}}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<h6>{{#str}} search, core, {{searchresultsnumber}} {{/str}}</h6>
|
||||
<p class="activitychooser_help">{{#str}} resultsfound, core, {{searchresultsnumber}} {{/str}}</p>
|
||||
<div
|
||||
class="optionscontainer d-flex flex-wrap mw-100 position-relative"
|
||||
class="optionscontainer mw-100 position-relative"
|
||||
role="menubar"
|
||||
data-region="chooser-options-container"
|
||||
>
|
||||
|
||||
@@ -48,13 +48,13 @@
|
||||
class="categorycontent"
|
||||
data-region="category-content"
|
||||
>
|
||||
<h6>{{tabLabel}}</h6>
|
||||
<h6 class="h5 mb-3 fw-bold">{{tabLabel}}</h6>
|
||||
{{#tabHelp}}
|
||||
<p class="activitychooser_help">{{tabHelp}}</p>
|
||||
{{/tabHelp}}
|
||||
|
||||
<div
|
||||
class="optionscontainer d-flex flex-wrap mw-100 position-relative"
|
||||
class="optionscontainer mw-100 position-relative"
|
||||
role="menubar"
|
||||
data-region="chooser-options-container"
|
||||
>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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},
|
||||
<p>Students in the {$a->coursename} course have been identified as being at risk.</p>';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user