moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-68209 core_course: improve activity chooser styling

Browse source
This commit is contained in:
Bas Brands 2020-05-21 10:58:24 +02:00
parent 68fd8d8bdf
commit 5fe7bcdb30
10 changed files with 200 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

14
course/templates/activitychooser.mustache
View file

@ -33,15 +33,15 @@
}
}}
<div data-region="carousel" class="carousel slide">
<div class="carousel-inner" aria-live="polite">
<div class="carousel-item px-4 py-3 active" data-region="modules">
<div class="modchoosercontainer" aria-label="{{#str}} activitymodules, core {{/str}}">
<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="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 class="nav nav-tabs mb-3" id="activities-{{uniqid}}" role="tablist">
<div data-region="chooser-container" class="chooser-container">
<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}}

2
course/templates/local/activitychooser/help.mustache
View file

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

14
course/templates/local/activitychooser/item.mustache
View file

@ -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 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">
<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 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 icon-size-5 icon-no-margin">
{{{icon}}}
</span>
<p class="optionname d-block mt-2 mb-0"> {{#shortentext}}20, {{title}}{{/shortentext}}</p>
</div>
<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"

4
course/templates/local/activitychooser/search_results.mustache
View file

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

2
course/tests/behat/behat_course.php
View file

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