Merge branch 'MDL-78199-master' of https://github.com/roland04/moodle
This commit is contained in:
Ilya Tregubov
@@ -174,6 +174,17 @@ class behat_completion extends behat_base {
|
||||
$conditionslistlabel = get_string('completionrequirements', 'core_course', $activityname);
|
||||
$selector = "div[aria-label='$conditionslistlabel']";
|
||||
|
||||
try {
|
||||
// If there is a dropdown, open it.
|
||||
$dropdownnode = $this->find('css', $selector . ' .dropdown-menu');
|
||||
if (!$dropdownnode->hasClass('show')) {
|
||||
$params = [get_string('completionmenuitem', 'completion'), "button", $selector, "css_element"];
|
||||
$this->execute("behat_general::i_click_on_in_the", $params);
|
||||
}
|
||||
} catch (ElementNotFoundException $e) {
|
||||
// If the dropdown does not exist, we are in the activity page, all good.
|
||||
}
|
||||
|
||||
$this->execute("behat_general::assert_element_contains_text", [$text, $selector, "css_element"]);
|
||||
}
|
||||
|
||||
@@ -290,7 +301,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_be_disabled(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region='activity-information'][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute("behat_general::the_element_should_be_disabled", $params);
|
||||
@@ -303,7 +314,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_not_exist(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute('behat_general::should_not_exist', $params);
|
||||
@@ -316,7 +327,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_exist(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute('behat_general::should_exist', $params);
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
<?php
|
||||
// This file is part of Moodle - http://moodle.org/
|
||||
//
|
||||
// Moodle is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// Moodle is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
/**
|
||||
* Contains the default activity icon.
|
||||
*
|
||||
* @package core_courseformat
|
||||
* @copyright 2023 Mikel Martin <[email protected]>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
|
||||
namespace core_courseformat\output\local\content\cm;
|
||||
|
||||
use cm_info;
|
||||
use core\output\named_templatable;
|
||||
use core_courseformat\base as course_format;
|
||||
use core_courseformat\output\local\courseformat_named_templatable;
|
||||
use renderable;
|
||||
use stdClass;
|
||||
|
||||
/**
|
||||
* Base class to render a course module icon.
|
||||
*
|
||||
* @package core_courseformat
|
||||
* @copyright 2023 Mikel Martin <[email protected]>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
class cmicon implements named_templatable, renderable {
|
||||
|
||||
use courseformat_named_templatable;
|
||||
|
||||
/** @var course_format the course format */
|
||||
protected $format;
|
||||
|
||||
/** @var cm_info the course module instance */
|
||||
protected $mod;
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @param course_format $format the course format
|
||||
* @param cm_info $mod the course module ionfo
|
||||
*/
|
||||
public function __construct(
|
||||
course_format $format,
|
||||
cm_info $mod,
|
||||
) {
|
||||
$this->format = $format;
|
||||
$this->mod = $mod;
|
||||
}
|
||||
|
||||
/**
|
||||
* Export this data so it can be used as the context for a mustache template.
|
||||
*
|
||||
* @param \renderer_base $output typically, the renderer that's calling this function
|
||||
* @return stdClass data context for a mustache template
|
||||
*/
|
||||
public function export_for_template(\renderer_base $output): array {
|
||||
$mod = $this->mod;
|
||||
|
||||
if (!$this->is_icon_visible()) {
|
||||
// Nothing to be displayed to the user.
|
||||
return [];
|
||||
}
|
||||
|
||||
$iconurl = $mod->get_icon_url();
|
||||
$iconclass = $iconurl->get_param('filtericon') ? '' : 'nofilter';
|
||||
$data = [
|
||||
'url' => $mod->url,
|
||||
'icon' => $iconurl,
|
||||
'iconclass' => $iconclass,
|
||||
'modname' => $mod->modname,
|
||||
'purpose' => plugin_supports('mod', $mod->modname, FEATURE_MOD_PURPOSE, MOD_PURPOSE_OTHER),
|
||||
];
|
||||
|
||||
if ($this->format->show_editor()) {
|
||||
$data['pluginname'] = get_string('pluginname', 'mod_' . $mod->modname);
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return if the activity has a visible icon.
|
||||
*
|
||||
* @return bool if the icon should be shown.
|
||||
*/
|
||||
public function is_icon_visible(): bool {
|
||||
return $this->mod->is_visible_on_course_page() && $this->mod->url;
|
||||
}
|
||||
}
|
||||
@@ -58,6 +58,9 @@ class cmname implements named_templatable, renderable {
|
||||
/** @var string the activity title output class name */
|
||||
protected $titleclass;
|
||||
|
||||
/** @var string the activity icon output class name */
|
||||
protected $iconclass;
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
@@ -85,6 +88,7 @@ class cmname implements named_templatable, renderable {
|
||||
|
||||
// Get the necessary classes.
|
||||
$this->titleclass = $format->get_output_classname('content\\cm\\title');
|
||||
$this->iconclass = $format->get_output_classname('content\\cm\\cmicon');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -102,22 +106,14 @@ class cmname implements named_templatable, renderable {
|
||||
return [];
|
||||
}
|
||||
|
||||
$iconurl = $mod->get_icon_url();
|
||||
$iconclass = $iconurl->get_param('filtericon') ? '' : 'nofilter';
|
||||
$data = [
|
||||
'url' => $mod->url,
|
||||
'icon' => $iconurl,
|
||||
'iconclass' => $iconclass,
|
||||
'modname' => $mod->modname,
|
||||
'textclasses' => $displayoptions['textclasses'] ?? '',
|
||||
'purpose' => plugin_supports('mod', $mod->modname, FEATURE_MOD_PURPOSE, MOD_PURPOSE_OTHER),
|
||||
'activityicon' => $this->get_icon_data($output),
|
||||
'activityname' => $this->get_title_data($output),
|
||||
];
|
||||
|
||||
if ($this->format->show_editor()) {
|
||||
$data['pluginname'] = get_string('pluginname', 'mod_' . $mod->modname);
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
@@ -137,6 +133,20 @@ class cmname implements named_templatable, renderable {
|
||||
return (array) $title->export_for_template($output);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the icon data.
|
||||
*
|
||||
* @param \renderer_base $output typically, the renderer that's calling this function
|
||||
* @return array data context for a mustache template
|
||||
*/
|
||||
protected function get_icon_data(\renderer_base $output): array {
|
||||
$icon = new $this->iconclass(
|
||||
$this->format,
|
||||
$this->mod,
|
||||
);
|
||||
return (array) $icon->export_for_template($output);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return if the activity has a visible name.
|
||||
*
|
||||
|
||||
@@ -73,34 +73,47 @@
|
||||
}
|
||||
}}
|
||||
{{#moveicon}} {{{moveicon}}} {{/moveicon}}
|
||||
<div class="activity-basis d-flex align-items-center">
|
||||
<div class="d-flex flex-column flex-md-row w-100 align-self-start">
|
||||
{{^hasname}}
|
||||
{{$ core_courseformat/local/content/cm/badges }}
|
||||
{{> core_courseformat/local/content/cm/badges }}
|
||||
{{/ core_courseformat/local/content/cm/badges }}
|
||||
{{/hasname}}
|
||||
<div class="activity-grid {{^hasname}}noname-grid{{/hasname}}">
|
||||
|
||||
{{! Icon, Name & Badge }}
|
||||
{{#hasname}}
|
||||
{{#cmname}}
|
||||
{{$ core_courseformat/local/content/cm/cmname }}
|
||||
{{> core_courseformat/local/content/cm/cmname }}
|
||||
{{/ core_courseformat/local/content/cm/cmname }}
|
||||
{{/cmname}}
|
||||
{{/hasname}}
|
||||
|
||||
{{#activitybadge}}
|
||||
{{$ core_courseformat/local/content/cm/activitybadge }}
|
||||
{{> core_courseformat/local/content/cm/activitybadge }}
|
||||
{{/ core_courseformat/local/content/cm/activitybadge }}
|
||||
{{/activitybadge}}
|
||||
{{! Dates }}
|
||||
{{#activityinfo}}
|
||||
{{#hasdates}}
|
||||
<div data-region="activity-dates" class="activity-dates mr-sm-2">
|
||||
{{#activitydates}}
|
||||
{{$core_course/activity_date}}
|
||||
{{>core_course/activity_date}}
|
||||
{{/core_course/activity_date}}
|
||||
{{/activitydates}}
|
||||
</div>
|
||||
{{/hasdates}}
|
||||
{{/activityinfo}}
|
||||
|
||||
{{#activityinfo}}
|
||||
<div class="activity-info mt-1 mt-md-0">
|
||||
{{! Visibility }}
|
||||
{{$ core_courseformat/local/content/cm/badges }}
|
||||
{{> core_courseformat/local/content/cm/badges }}
|
||||
{{/ core_courseformat/local/content/cm/badges }}
|
||||
|
||||
{{! Completion }}
|
||||
{{#activityinfo}}
|
||||
{{#hascompletion}}
|
||||
<div class="activity-info align-self-start mr-sm-2">
|
||||
{{$ core_courseformat/local/content/cm/activity_info}}
|
||||
{{> core_courseformat/local/content/cm/activity_info}}
|
||||
{{/ core_courseformat/local/content/cm/activity_info}}
|
||||
</div>
|
||||
{{/activityinfo}}
|
||||
</div>
|
||||
{{/hascompletion}}
|
||||
{{/activityinfo}}
|
||||
|
||||
{{! Action menu }}
|
||||
{{#controlmenu}}
|
||||
<div class="activity-actions bulk-hidden align-self-start">
|
||||
{{$ core_courseformat/local/content/cm/controlmenu }}
|
||||
@@ -108,43 +121,25 @@
|
||||
{{/ core_courseformat/local/content/cm/controlmenu }}
|
||||
</div>
|
||||
{{/controlmenu}}
|
||||
</div>
|
||||
{{#hasname}}
|
||||
{{$ core_courseformat/local/content/cm/badges }}
|
||||
{{> core_courseformat/local/content/cm/badges }}
|
||||
{{/ core_courseformat/local/content/cm/badges }}
|
||||
{{/hasname}}
|
||||
|
||||
<div class="description">
|
||||
{{#activityinfo}}
|
||||
{{#hasdates}}
|
||||
<div data-region="activity-dates" class="activity-dates small course-description-item">
|
||||
<div class="description-inner">
|
||||
{{#activitydates}}
|
||||
{{$core_course/activity_date}}
|
||||
{{>core_course/activity_date}}
|
||||
{{/core_course/activity_date}}
|
||||
{{/activitydates}}
|
||||
</div>
|
||||
</div>
|
||||
{{/hasdates}}
|
||||
{{/activityinfo}}
|
||||
{{! Description }}
|
||||
{{#altcontent}}
|
||||
<div class="activity-altcontent {{#hasname}}course-description-item small{{/hasname}}{{^hasname}}contentwithoutlink{{/hasname}} d-flex">
|
||||
<div class="flex-fill description-inner text-break">
|
||||
{{{altcontent}}}
|
||||
</div>
|
||||
<div class="activity-altcontent d-flex text-break {{#hasname}}activity-description{{/hasname}}">
|
||||
{{{altcontent}}}
|
||||
</div>
|
||||
{{/altcontent}}
|
||||
|
||||
{{! Availability }}
|
||||
{{#modavailability}}
|
||||
{{$ core_courseformat/local/content/cm/availability }}
|
||||
{{> core_courseformat/local/content/cm/availability }}
|
||||
{{/ core_courseformat/local/content/cm/availability }}
|
||||
{{/modavailability}}
|
||||
</div>
|
||||
|
||||
{{#afterlink}}
|
||||
<div class="afterlink d-flex align-items-center mt-3">
|
||||
{{{afterlink}}}
|
||||
</div>
|
||||
{{/afterlink}}
|
||||
{{! Afterlink }}
|
||||
{{#afterlink}}
|
||||
<div class="activity-afterlink afterlink d-flex align-items-center">
|
||||
{{{afterlink}}}
|
||||
</div>
|
||||
{{/afterlink}}
|
||||
</div>
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"cmid": 123,
|
||||
"activityname": "Course announcements",
|
||||
"hascompletion": true,
|
||||
"uservisible": true,
|
||||
@@ -41,26 +42,44 @@
|
||||
}
|
||||
}}
|
||||
<div data-region="activity-information" data-activityname="{{activityname}}" class="activity-information">
|
||||
{{#hascompletion}}
|
||||
{{#uservisible}}
|
||||
<div data-region="completion-info">
|
||||
{{#isautomatic}}
|
||||
<div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
|
||||
{{#completiondetails}}
|
||||
{{$ core_course/completion_automatic }}
|
||||
{{> core_course/completion_automatic }}
|
||||
{{/ core_course/completion_automatic }}
|
||||
{{/completiondetails}}
|
||||
{{#uservisible}}
|
||||
<div data-region="completion-info">
|
||||
{{#isautomatic}}
|
||||
<div class="automatic-completion-conditions"
|
||||
data-region ="completionrequirements"
|
||||
aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}"
|
||||
>
|
||||
<div class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
||||
role="button"
|
||||
id="completion-dropdown-button-{{cmid}}"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{{#str}}completionmenuitem, completion{{/str}}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="completion-dropdown-button-{{cmid}}">
|
||||
<div class="p-2" role="list">
|
||||
{{#completiondetails}}
|
||||
{{$ core_course/completion_automatic }}
|
||||
{{> core_course/completion_automatic }}
|
||||
{{/ core_course/completion_automatic }}
|
||||
{{/completiondetails}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/isautomatic}}
|
||||
{{^isautomatic}}
|
||||
{{#showmanualcompletion}}
|
||||
{{$ core_course/completion_manual }}
|
||||
{{> core_course/completion_manual }}
|
||||
{{/ core_course/completion_manual }}
|
||||
{{/showmanualcompletion}}
|
||||
{{/isautomatic}}
|
||||
</div>
|
||||
{{/uservisible}}
|
||||
{{/hascompletion}}
|
||||
</div>
|
||||
{{/isautomatic}}
|
||||
{{^isautomatic}}
|
||||
{{#showmanualcompletion}}
|
||||
{{$ core_course/completion_manual }}
|
||||
{{> core_course/completion_manual }}
|
||||
{{/ core_course/completion_manual }}
|
||||
{{/showmanualcompletion}}
|
||||
{{/isautomatic}}
|
||||
</div>
|
||||
{{/uservisible}}
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
}}
|
||||
<div
|
||||
{{#badgeelementid}}id="{{.}}"{{/badgeelementid}}
|
||||
class="m-2 d-flex align-items-center"
|
||||
class="mx-2 d-flex align-items-center"
|
||||
{{#badgeextraattributes}} {{name}}="{{value}}" {{/badgeextraattributes}}
|
||||
>
|
||||
<div class="activitybadge badge badge-pill {{badgestyle}}">
|
||||
|
||||
@@ -36,14 +36,12 @@
|
||||
}}
|
||||
{{#hasmodavailability}}
|
||||
{{#info}}
|
||||
<div class="availabilityinfo small course-description-item {{classes}}">
|
||||
<div class="activity-availability availabilityinfo small {{classes}}">
|
||||
{{^isrestricted}}
|
||||
<span class="badge badge-pill badge-warning">{{{text}}}</span>
|
||||
{{/isrestricted}}
|
||||
{{#isrestricted}}
|
||||
<div class="description-inner">
|
||||
{{#pix}}t/unlock, core{{/pix}} {{{text}}}
|
||||
</div>
|
||||
<div> {{#pix}}t/unlock, core{{/pix}} {{{text}}} </div>
|
||||
{{/isrestricted}}
|
||||
</div>
|
||||
{{/info}}
|
||||
|
||||
@@ -28,12 +28,12 @@
|
||||
}
|
||||
}}
|
||||
{{#modhiddenfromstudents}}
|
||||
<div class="my-1 d-flex align-items-center">
|
||||
<span class="badge badge-pill badge-warning">{{#str}}hiddenfromstudents{{/str}}</span>
|
||||
<div class="activity-badges my-1 d-flex align-self-start align-items-center">
|
||||
<span class="badge badge-pill badge-secondary">{{#pix}}i/show, core{{/pix}}{{#str}}hiddenfromstudents{{/str}}</span>
|
||||
</div>
|
||||
{{/modhiddenfromstudents}}
|
||||
{{#modstealth}}
|
||||
<div class="my-1 d-flex align-items-center">
|
||||
<span class="badge badge-pill badge-warning">{{#str}}hiddenoncoursepage{{/str}}</span>
|
||||
<div class="activity-badges my-1 d-flex align-self-start align-items-center">
|
||||
<span class="badge badge-pill badge-secondary">{{#pix}}t/stealth, core{{/pix}}{{#str}}hiddenoncoursepage{{/str}}</span>
|
||||
</div>
|
||||
{{/modstealth}}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
{{!
|
||||
This file is part of Moodle - http://moodle.org/
|
||||
|
||||
Moodle is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Moodle is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
{{!
|
||||
@template core_courseformat/local/content/cm/cmicon
|
||||
|
||||
Displays a course module icon.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"url": "#",
|
||||
"icon": "../../../pix/help.svg",
|
||||
"iconclass": "",
|
||||
"purpose": "content",
|
||||
"modname": "resource",
|
||||
"pluginname": "File"
|
||||
}
|
||||
}}
|
||||
{{#url}}
|
||||
<a href="{{url}}"
|
||||
class="activity-icon activityiconcontainer smaller {{purpose}} btn btn-link courseicon align-self-start mr-2"
|
||||
{{#pluginname}}data-toggle="tooltip" title="{{{pluginname}}}" data-placement="top"{{/pluginname}}
|
||||
>
|
||||
<img src="{{{icon}}}" class="activityicon {{iconclass}}" alt="{{{modname}}} icon">
|
||||
</a>
|
||||
{{/url}}
|
||||
@@ -17,19 +17,21 @@
|
||||
{{!
|
||||
@template core_courseformat/local/content/cm/cmname
|
||||
|
||||
Convenience mustache to displays a course module inplcae editable from the format renderer.
|
||||
Convenience mustache to displays a course module inplace editable from the format renderer.
|
||||
|
||||
Format plugins are free to implement an alternative inplace editable for activities.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"url": "#",
|
||||
"icon": "../../../pix/help.svg",
|
||||
"iconclass": "",
|
||||
"pluginname": "File",
|
||||
"textclasses": "",
|
||||
"purpose": "content",
|
||||
"modname": "resource",
|
||||
"activityicon": {
|
||||
"icon": "../../../pix/help.svg",
|
||||
"iconclass": "",
|
||||
"purpose": "content"
|
||||
},
|
||||
"activityname": {
|
||||
"displayvalue" : "<a href=\"#\">Moodle</a>",
|
||||
"value" : "Moodle",
|
||||
@@ -45,25 +47,31 @@
|
||||
}
|
||||
}}
|
||||
{{#url}}
|
||||
<div class="activity-instance d-flex flex-column">
|
||||
{{! Icon }}
|
||||
{{#activityicon}}
|
||||
{{$ core_courseformat/local/content/cm/cmicon }}
|
||||
{{> core_courseformat/local/content/cm/cmicon }}
|
||||
{{/ core_courseformat/local/content/cm/cmicon }}
|
||||
{{/activityicon}}
|
||||
|
||||
{{! Name & Badge}}
|
||||
<div class="activity-name-area activity-instance d-flex flex-column mr-2 ">
|
||||
<div class="activitytitle media {{textclasses}} modtype_{{modname}} position-relative align-self-start">
|
||||
<div class="activityiconcontainer {{purpose}} courseicon align-self-start mr-3">
|
||||
<img src="{{{icon}}}" class="activityicon {{iconclass}}" alt="{{{modname}}} icon">
|
||||
</div>
|
||||
<div class="media-body align-self-center">
|
||||
{{#pluginname}}
|
||||
<div class="text-uppercase small">
|
||||
{{{pluginname}}}
|
||||
</div>
|
||||
{{/pluginname}}
|
||||
<div class="activityname">
|
||||
<div class="activityname d-flex">
|
||||
{{#activityname}}
|
||||
{{$ core/inplace_editable }}
|
||||
{{> core/inplace_editable }}
|
||||
{{/ core/inplace_editable }}
|
||||
{{/activityname}}
|
||||
{{#activitybadge}}
|
||||
{{$ core_courseformat/local/content/cm/activitybadge }}
|
||||
{{> core_courseformat/local/content/cm/activitybadge }}
|
||||
{{/ core_courseformat/local/content/cm/activitybadge }}
|
||||
{{/activitybadge}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/url}}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
"hasavailability": true
|
||||
}
|
||||
}}
|
||||
<div class="section_availability course-description-item">
|
||||
<div class="section_availability">
|
||||
{{#hasavailability}}
|
||||
{{#info}}
|
||||
<div class="availabilityinfo {{classes}}">
|
||||
@@ -41,9 +41,7 @@
|
||||
<span class="badge badge-pill badge-warning">{{{text}}}</span>
|
||||
{{/isrestricted}}
|
||||
{{#isrestricted}}
|
||||
<div class="description-inner">
|
||||
{{#pix}}t/unlock, core{{/pix}} {{{text}}}
|
||||
</div>
|
||||
<div> {{#pix}}t/unlock, core{{/pix}} {{{text}}} </div>
|
||||
{{/isrestricted}}
|
||||
</div>
|
||||
{{/info}}
|
||||
|
||||
@@ -25,9 +25,7 @@
|
||||
}
|
||||
}}
|
||||
{{#summarytext}}
|
||||
<div class="course-description-item summarytext">
|
||||
<div class="description-inner">
|
||||
{{{summarytext}}}
|
||||
</div>
|
||||
<div class="summarytext">
|
||||
{{{summarytext}}}
|
||||
</div>
|
||||
{{/summarytext}}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
@core @core_courseformat @javascript
|
||||
Feature: Activity type tooltip.
|
||||
In order to see the activity type
|
||||
As a Teacher
|
||||
I need to be able to see a tooltip with the plugin name in editing mode.
|
||||
|
||||
Background:
|
||||
Given the following "course" exists:
|
||||
| fullname | Course 1 |
|
||||
| shortname | C1 |
|
||||
| category | 0 |
|
||||
| numsections | 1 |
|
||||
And the following "activities" exist:
|
||||
| activity | name | intro | course | idnumber | section |
|
||||
| assign | Activity sample 1 | Test assignment description | C1 | sample1 | 1 |
|
||||
| page | Activity sample 2 | Test page description | C1 | sample2 | 1 |
|
||||
And the following "users" exist:
|
||||
| username | firstname | lastname | email |
|
||||
| teacher1 | Teacher | 1 | teacher1@example.com |
|
||||
| student1 | Student | 1 | student1@example.com |
|
||||
And the following "course enrolments" exist:
|
||||
| user | course | role |
|
||||
| teacher1 | C1 | editingteacher |
|
||||
| student1 | C1 | student |
|
||||
|
||||
Scenario: Teacher can see the activity type tooltip only while editing.
|
||||
Given I am on the "C1" "Course" page logged in as "teacher1"
|
||||
And I hover over the "assign icon" "link" in the "Activity sample 1" "activity"
|
||||
And "body>.tooltip" "css_element" should not exist
|
||||
And I hover over the "page icon" "link" in the "Activity sample 2" "activity"
|
||||
And "body>.tooltip" "css_element" should not exist
|
||||
And I turn editing mode on
|
||||
When I hover over the "assign icon" "link" in the "Activity sample 1" "activity"
|
||||
Then I should see "Assignment" in the "body>.tooltip" "css_element"
|
||||
And I hover over the "page icon" "link" in the "Activity sample 2" "activity"
|
||||
And I should see "Page" in the "body>.tooltip" "css_element"
|
||||
|
||||
Scenario: Student cannot see the activity type tooltip.
|
||||
Given I am on the "C1" "Course" page logged in as "student1"
|
||||
When I hover over the "assign icon" "link" in the "Activity sample 1" "activity"
|
||||
Then "body>.tooltip" "css_element" should not exist
|
||||
@@ -72,11 +72,9 @@
|
||||
|
||||
{{#hasdates}}
|
||||
<div data-region="activity-dates" class="activity-dates">
|
||||
<div class="description-inner">
|
||||
{{#activitydates}}
|
||||
{{>core_course/activity_date}}
|
||||
{{/activitydates}}
|
||||
</div>
|
||||
{{#activitydates}}
|
||||
{{>core_course/activity_date}}
|
||||
{{/activitydates}}
|
||||
</div>
|
||||
{{/hasdates}}
|
||||
</div>
|
||||
|
||||
@@ -26,14 +26,14 @@
|
||||
"urls": {
|
||||
"addoption": "http://addoptionurl.com"
|
||||
},
|
||||
"icon": "<img class='icon' src='http://urltooptionicon'>",
|
||||
"icon": "<img class='icon' src='http://urltooptionicon' alt='icon'>",
|
||||
"purpose": "content"
|
||||
}
|
||||
}}
|
||||
<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 mx-auto icon-no-margin modicon_{{name}} activityiconcontainer {{purpose}}">
|
||||
<div class="optionicon mt-2 mb-1 mx-auto icon-no-margin modicon_{{name}} activityiconcontainer smaller {{purpose}}">
|
||||
{{{icon}}}
|
||||
</div>
|
||||
<div class="optionname clamp-2">{{title}}</div>
|
||||
|
||||
@@ -372,7 +372,7 @@ class behat_general extends behat_base {
|
||||
/**
|
||||
* Generic mouse over action. Mouse over a element of the specified type.
|
||||
*
|
||||
* @When /^I hover over the "(?P<element_string>(?:[^"]|\\")*)" "(?P<selector_string>[^"]*) in the "(?P<container_element_string>(?:[^"]|\\")*)" "(?P<container_selector_string>[^"]*)"$/
|
||||
* @When I hover over the :element :selectortype in the :containerelement :containerselectortype
|
||||
* @param string $element Element we look for
|
||||
* @param string $selectortype The type of what we look for
|
||||
* @param string $containerelement Element we look for
|
||||
@@ -380,7 +380,7 @@ class behat_general extends behat_base {
|
||||
*/
|
||||
public function i_hover_in_the(string $element, $selectortype, string $containerelement, $containerselectortype): void {
|
||||
// Gets the node based on the requested selector type and locator.
|
||||
$node = $this->get_node_in_container($selectortype, $element, $containerselectortype, $containerselectortype);
|
||||
$node = $this->get_node_in_container($selectortype, $element, $containerselectortype, $containerelement);
|
||||
$this->execute_js_on_node($node, '{{ELEMENT}}.scrollIntoView();');
|
||||
$node->mouseOver();
|
||||
}
|
||||
|
||||
+195
-100
@@ -1252,15 +1252,24 @@ span.editinstructions {
|
||||
}
|
||||
}
|
||||
|
||||
// These are the new styles for the renewed course UI in isssue MDL-71691
|
||||
// once the old course renderers are removed in MDL-72656, all css related
|
||||
// to activities and sections above this commend needs to be reviewed an
|
||||
// possibly removed.
|
||||
|
||||
/* Variables definition*/
|
||||
|
||||
$activity-item-background: theme-color-level('primary', -12) !default;
|
||||
$activity-item-border: theme-color-level('primary', -2) !default;
|
||||
$activity-item-color: $body-color;
|
||||
$activity-item-color: $body-color !default;
|
||||
$activity-item-hover: theme-color-level('primary', -12) !default;
|
||||
$activity-item-border-radius: 1rem !default;
|
||||
$activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
/* Activity & Block 'add' buttons */
|
||||
|
||||
.activity-add,
|
||||
.block-add {
|
||||
@include border-radius();
|
||||
@include alert-variant($primary-light-background, $primary-light-border, $primary);
|
||||
border-width: $border-width;
|
||||
.pluscontainer {
|
||||
@@ -1276,10 +1285,20 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
}
|
||||
|
||||
.changenumsections {
|
||||
border-top: $border-width solid $primary-light-border;
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
|
||||
.section-collapsemenu {
|
||||
.collapseall {
|
||||
display: block;
|
||||
@@ -1300,10 +1319,8 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
// These are the new styles for the renewed course UI in isssue MDL-71691
|
||||
// once the old course renderers are removed in MDL-72656, all css related
|
||||
// to activities and sections above this commend needs to be reviewed an
|
||||
// possibly removed.
|
||||
/* Course section */
|
||||
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@@ -1332,6 +1349,21 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summarytext {
|
||||
// Add rounded borders to images.
|
||||
img {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Availability styles for both section and activities.
|
||||
.availabilityinfo {
|
||||
margin-top: map-get($spacers, 2);
|
||||
padding: map-get($spacers, 1) map-get($spacers, 3);
|
||||
background-color: $gray-200;
|
||||
@include border-radius($activity-item-border-radius);
|
||||
}
|
||||
|
||||
&.section-summary {
|
||||
padding-left: map-get($spacers, 3);
|
||||
padding-right: map-get($spacers, 3);
|
||||
@@ -1376,48 +1408,9 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
.description .course-description-item {
|
||||
@include font-size($small-font-size);
|
||||
/* Re-style ordered list in course content */
|
||||
|
||||
background-color: $gray-100;
|
||||
padding-left: map-get($spacers, 3);
|
||||
padding-right: map-get($spacers, 3);
|
||||
|
||||
.description-inner {
|
||||
padding-bottom: map-get($spacers, 2);
|
||||
padding-top: map-get($spacers, 2);
|
||||
border-bottom: $border-width solid $border-color;
|
||||
|
||||
p:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: map-get($spacers, 3);
|
||||
padding-top: map-get($spacers, 3);
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
.description-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: map-get($spacers, 3);
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
.description-inner {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-content .description-inner {
|
||||
.course-content .activity-altcontent {
|
||||
ul {
|
||||
list-style: disc;
|
||||
ul {
|
||||
@@ -1429,12 +1422,11 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
|
||||
.activity-item {
|
||||
position: relative;
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-radius();
|
||||
}
|
||||
@include border-radius($activity-item-border-radius);
|
||||
|
||||
&:not(.activityinline) {
|
||||
border: $border-width solid $border-color;
|
||||
@@ -1446,21 +1438,163 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
&.hiddenactivity {
|
||||
background-color: $gray-100;
|
||||
|
||||
.description .course-description-item,
|
||||
.activityiconcontainer,
|
||||
.badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
// Activity card grid layout.
|
||||
.activity-grid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: min-content 1fr min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas:
|
||||
"icon name completion actions"
|
||||
"icon visibility completion actions"
|
||||
"icon dates completion actions"
|
||||
"altcontent altcontent altcontent altcontent"
|
||||
"afterlink afterlink afterlink afterlink"
|
||||
"availability availability availability availability";
|
||||
@include media-breakpoint-down(xs) {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"icon name actions"
|
||||
"icon visibility actions"
|
||||
"dates dates dates"
|
||||
"completion completion completion"
|
||||
"altcontent altcontent altcontent"
|
||||
"afterlink afterlink afterlink"
|
||||
"availability availability availability";
|
||||
}
|
||||
}
|
||||
// Activity card specific grid layout for activities without name.
|
||||
.activity-grid.noname-grid {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas:
|
||||
"visibility completion actions"
|
||||
"altcontent altcontent altcontent"
|
||||
"afterlink afterlink afterlink"
|
||||
"availability availability availability";
|
||||
@include media-breakpoint-down(xs) {
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-template-areas:
|
||||
"visibility actions"
|
||||
"altcontent altcontent"
|
||||
"afterlink afterlink"
|
||||
"completion completion"
|
||||
"availability availability";
|
||||
}
|
||||
}
|
||||
|
||||
.activity-actions {
|
||||
grid-area: actions;
|
||||
.actions {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
// Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
|
||||
.action-menu .btn.btn-icon {
|
||||
height: ($icon-width + 15px);
|
||||
width: ($icon-width + 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
.activity-dates {
|
||||
grid-area: dates;
|
||||
@include font-size($small-font-size);
|
||||
color: $gray-700;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 0.75rem;
|
||||
@include media-breakpoint-down(xs) {
|
||||
margin-top: map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-name-area {
|
||||
grid-area: name;
|
||||
// Prevent bootstrap strech-link from covering the inplace editable button using z-index.
|
||||
.activityname {
|
||||
.afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.activitybadge {
|
||||
&.badge-none {
|
||||
font-weight: normal;
|
||||
@include font-size($small-font-size);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
// Re-style completion buttons (mark as done & dropdown).
|
||||
button,
|
||||
a[role="button"] {
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius();
|
||||
font-weight: bold;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
margin-top: map-get($spacers, 2);
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-badges {
|
||||
grid-area: visibility;
|
||||
.badge {
|
||||
font-weight: normal;
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-altcontent {
|
||||
grid-area: altcontent;
|
||||
margin-top: map-get($spacers, 1);
|
||||
&.activity-description {
|
||||
margin-top: map-get($spacers, 2);
|
||||
padding-top: map-get($spacers, 2);
|
||||
border-top: $border-width solid $border-color;
|
||||
@include font-size($small-font-size);
|
||||
}
|
||||
// Add rounded borders to images.
|
||||
img {
|
||||
@include border-radius($activity-item-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-availability {
|
||||
grid-area: availability;
|
||||
}
|
||||
|
||||
.activity-afterlink {
|
||||
grid-area: afterlink;
|
||||
margin-top: map-get($spacers, 2);
|
||||
padding-top: map-get($spacers, 2);
|
||||
border-top: $border-width solid $border-color;
|
||||
}
|
||||
|
||||
.inplaceeditable {
|
||||
@@ -1469,60 +1603,19 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Prevent bootstrap strech-link from covering the inplace editable button using z-index. */
|
||||
.activityname {
|
||||
.afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-menu-item .filler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&:not(.activityinline) {
|
||||
padding: map-get($spacers, 4);
|
||||
}
|
||||
|
||||
.activity-info,
|
||||
.activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: map-get($spacers, 2);
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
|
||||
@@ -1534,7 +1627,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
&.selected {
|
||||
@include alert-variant($activity-item-hover, $activity-item-border, $activity-item-color);
|
||||
|
||||
.description .course-description-item,
|
||||
.activityiconcontainer,
|
||||
.badge {
|
||||
mix-blend-mode: multiply;
|
||||
@@ -1546,22 +1638,23 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Revisit these styles when MDL-78289 lands. Probably not needed anymore.
|
||||
.automatic-completion-conditions .badge {
|
||||
font-size: 80%;
|
||||
padding: map-get($spacers, 2);
|
||||
margin-top: map-get($spacers, 1);
|
||||
|
||||
.icon {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
@@ -1605,6 +1698,8 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
|
||||
@@ -130,7 +130,8 @@ $iconsizes: map-merge((
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Revisit these styles when MDL-78284 lands with new icons.
|
||||
// Icon container will be removed and icons will be used directly.
|
||||
.activityiconcontainer {
|
||||
width: $activity-iconcontainer-width;
|
||||
height: $activity-iconcontainer-height;
|
||||
@@ -150,6 +151,14 @@ $iconsizes: map-merge((
|
||||
width: $activity-iconcontainer-width - 10px;
|
||||
height: $activity-iconcontainer-height - 10px;
|
||||
}
|
||||
&.smaller {
|
||||
width: $activity-iconcontainer-width - 20px;
|
||||
height: $activity-iconcontainer-width - 20px;
|
||||
.activityicon {
|
||||
width: $icon-width;
|
||||
height: $icon-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $value in $activity-icon-colors {
|
||||
|
||||
+153
-79
@@ -26057,6 +26057,14 @@ blockquote {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.activityiconcontainer.smaller {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.activityiconcontainer.smaller .activityicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6;
|
||||
@@ -28874,9 +28882,10 @@ span.editinstructions .alert-link {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/* Variables definition*/
|
||||
/* Activity & Block 'add' buttons */
|
||||
.activity-add,
|
||||
.block-add {
|
||||
border-radius: 0.5rem;
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
@@ -28905,10 +28914,19 @@ span.editinstructions .alert-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.changenumsections {
|
||||
border-top: 1px solid #3584c9;
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
.section-collapsemenu .collapseall {
|
||||
display: block;
|
||||
}
|
||||
@@ -28922,6 +28940,7 @@ span.editinstructions .alert-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@@ -28943,6 +28962,15 @@ span.editinstructions .alert-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.course-section .summarytext img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section .availabilityinfo {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.25rem 1rem;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@@ -28979,54 +29007,21 @@ span.editinstructions .alert-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description .course-description-item {
|
||||
font-size: 0.875em;
|
||||
background-color: #f8f9fa;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.description .course-description-item .description-inner {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
.description .course-description-item .description-inner p:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.description .course-description-item:first-child {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
.description .course-description-item:first-child .description-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.description .course-description-item:last-child {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
.description .course-description-item:last-child .description-inner {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.course-content .description-inner ul {
|
||||
/* Re-style ordered list in course content */
|
||||
.course-content .activity-altcontent ul {
|
||||
list-style: disc;
|
||||
}
|
||||
.course-content .description-inner ul ul {
|
||||
.course-content .activity-altcontent ul ul {
|
||||
list-style: circle;
|
||||
}
|
||||
.course-content .description-inner ul ul ul {
|
||||
.course-content .activity-altcontent ul ul ul {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
/* Prevent bootstrap strech-link from covering the inplace editable button using z-index. */
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
border: 1px solid #dee2e6;
|
||||
@@ -29038,65 +29033,144 @@ span.editinstructions .alert-link {
|
||||
.activity-item.hiddenactivity {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.activity-item.hiddenactivity .description .course-description-item,
|
||||
.activity-item.hiddenactivity .activityiconcontainer,
|
||||
.activity-item.hiddenactivity .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.activity-item .activity-grid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: min-content 1fr min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas: "icon name completion actions" "icon visibility completion actions" "icon dates completion actions" "altcontent altcontent altcontent altcontent" "afterlink afterlink afterlink afterlink" "availability availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas: "icon name actions" "icon visibility actions" "dates dates dates" "completion completion completion" "altcontent altcontent altcontent" "afterlink afterlink afterlink" "availability availability availability";
|
||||
}
|
||||
}
|
||||
.activity-item .activity-grid.noname-grid {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas: "visibility completion actions" "altcontent altcontent altcontent" "afterlink afterlink afterlink" "availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid.noname-grid {
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-template-areas: "visibility actions" "altcontent altcontent" "afterlink afterlink" "completion completion" "availability availability";
|
||||
}
|
||||
}
|
||||
.activity-item .activity-actions {
|
||||
grid-area: actions;
|
||||
}
|
||||
.activity-item .activity-actions .actions {
|
||||
position: relative;
|
||||
}
|
||||
.activity-item .activity-actions .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
.activity-item .activity-actions .action-menu .btn.btn-icon {
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
.activity-item .activity-icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
.activity-item .activity-dates {
|
||||
grid-area: dates;
|
||||
font-size: 0.875em;
|
||||
color: #495057;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-dates {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-name-area {
|
||||
grid-area: name;
|
||||
}
|
||||
.activity-item .activity-name-area .activityname .afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-name-area .activityname .inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-name-area .activitybadge.badge-none {
|
||||
font-weight: normal;
|
||||
font-size: 0.875em;
|
||||
padding: 0;
|
||||
}
|
||||
.activity-item .activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
}
|
||||
.activity-item .activity-info button,
|
||||
.activity-item .activity-info a[role=button] {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-info {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-info button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-badges {
|
||||
grid-area: visibility;
|
||||
}
|
||||
.activity-item .activity-badges .badge {
|
||||
font-weight: normal;
|
||||
}
|
||||
.activity-item .activity-badges .badge .icon {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.activity-item .activity-altcontent {
|
||||
grid-area: altcontent;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.activity-item .activity-altcontent.activity-description {
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.activity-item .activity-altcontent img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item .activity-availability {
|
||||
grid-area: availability;
|
||||
}
|
||||
.activity-item .activity-afterlink {
|
||||
grid-area: afterlink;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
.activity-item .inplaceeditable {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.activity-item .activityname .afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activityname .inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .action-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.activity-item .action-menu-item .filler {
|
||||
display: none;
|
||||
}
|
||||
.activity-item .no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.activity-item .badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item .automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.activity-item .activity-info,
|
||||
.activity-item .activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5rem;
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
}
|
||||
@@ -29114,10 +29188,8 @@ span.editinstructions .alert-link {
|
||||
.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link {
|
||||
color: #070808;
|
||||
}
|
||||
.editing .activity-item:hover .description .course-description-item,
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .description .course-description-item,
|
||||
.editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
@@ -29140,6 +29212,7 @@ span.editinstructions .alert-link {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
@@ -29177,6 +29250,7 @@ span.editinstructions .alert-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
+153
-79
@@ -26057,6 +26057,14 @@ blockquote {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.activityiconcontainer.smaller {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.activityiconcontainer.smaller .activityicon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.activityiconcontainer.administration {
|
||||
background-color: #5d63f6;
|
||||
@@ -28874,9 +28882,10 @@ span.editinstructions .alert-link {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/* Variables definition*/
|
||||
/* Activity & Block 'add' buttons */
|
||||
.activity-add,
|
||||
.block-add {
|
||||
border-radius: 0.25rem;
|
||||
color: #0f6cbf;
|
||||
background-color: #f5f9fc;
|
||||
border-color: #3584c9;
|
||||
@@ -28905,10 +28914,19 @@ span.editinstructions .alert-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-add {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.activity-add {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.changenumsections {
|
||||
border-top: 1px solid #3584c9;
|
||||
}
|
||||
|
||||
/* Section Expand all/Collapse all */
|
||||
.section-collapsemenu .collapseall {
|
||||
display: block;
|
||||
}
|
||||
@@ -28922,6 +28940,7 @@ span.editinstructions .alert-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Course section */
|
||||
.course-section {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@@ -28943,6 +28962,15 @@ span.editinstructions .alert-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.course-section .summarytext img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section .availabilityinfo {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.25rem 1rem;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.course-section.section-summary {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@@ -28979,54 +29007,21 @@ span.editinstructions .alert-link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description .course-description-item {
|
||||
font-size: 0.875em;
|
||||
background-color: #f8f9fa;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.description .course-description-item .description-inner {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
.description .course-description-item .description-inner p:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.description .course-description-item:first-child {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.description .course-description-item:first-child .description-inner {
|
||||
padding-top: 0;
|
||||
}
|
||||
.description .course-description-item:last-child {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
.description .course-description-item:last-child .description-inner {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.course-content .description-inner ul {
|
||||
/* Re-style ordered list in course content */
|
||||
.course-content .activity-altcontent ul {
|
||||
list-style: disc;
|
||||
}
|
||||
.course-content .description-inner ul ul {
|
||||
.course-content .activity-altcontent ul ul {
|
||||
list-style: circle;
|
||||
}
|
||||
.course-content .description-inner ul ul ul {
|
||||
.course-content .activity-altcontent ul ul ul {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
/* Activity cards */
|
||||
.activity-item {
|
||||
position: relative;
|
||||
border-radius: 0.25rem;
|
||||
/* Prevent bootstrap strech-link from covering the inplace editable button using z-index. */
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
border: 1px solid #dee2e6;
|
||||
@@ -29038,65 +29033,144 @@ span.editinstructions .alert-link {
|
||||
.activity-item.hiddenactivity {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.activity-item.hiddenactivity .description .course-description-item,
|
||||
.activity-item.hiddenactivity .activityiconcontainer,
|
||||
.activity-item.hiddenactivity .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.activity-item .activity-grid {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: min-content 1fr min-content min-content;
|
||||
grid-template-rows: 1fr repeat(5, min-content);
|
||||
grid-template-areas: "icon name completion actions" "icon visibility completion actions" "icon dates completion actions" "altcontent altcontent altcontent altcontent" "afterlink afterlink afterlink afterlink" "availability availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas: "icon name actions" "icon visibility actions" "dates dates dates" "completion completion completion" "altcontent altcontent altcontent" "afterlink afterlink afterlink" "availability availability availability";
|
||||
}
|
||||
}
|
||||
.activity-item .activity-grid.noname-grid {
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-areas: "visibility completion actions" "altcontent altcontent altcontent" "afterlink afterlink afterlink" "availability availability availability";
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-grid.noname-grid {
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-template-areas: "visibility actions" "altcontent altcontent" "afterlink afterlink" "completion completion" "availability availability";
|
||||
}
|
||||
}
|
||||
.activity-item .activity-actions {
|
||||
grid-area: actions;
|
||||
}
|
||||
.activity-item .activity-actions .actions {
|
||||
position: relative;
|
||||
}
|
||||
.activity-item .activity-actions .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
.activity-item .activity-actions .action-menu .btn.btn-icon {
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
.activity-item .activity-icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
.activity-item .activity-dates {
|
||||
grid-area: dates;
|
||||
font-size: 0.875em;
|
||||
color: #495057;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-dates {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-name-area {
|
||||
grid-area: name;
|
||||
}
|
||||
.activity-item .activity-name-area .activityname .afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-name-area .activityname .inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-name-area .activitybadge.badge-none {
|
||||
font-weight: normal;
|
||||
font-size: 0.875em;
|
||||
padding: 0;
|
||||
}
|
||||
.activity-item .activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
}
|
||||
.activity-item .activity-info button,
|
||||
.activity-item .activity-info a[role=button] {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-info {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-info button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-badges {
|
||||
grid-area: visibility;
|
||||
}
|
||||
.activity-item .activity-badges .badge {
|
||||
font-weight: normal;
|
||||
}
|
||||
.activity-item .activity-badges .badge .icon {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.activity-item .activity-altcontent {
|
||||
grid-area: altcontent;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.activity-item .activity-altcontent.activity-description {
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.activity-item .activity-altcontent img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.activity-item .activity-availability {
|
||||
grid-area: availability;
|
||||
}
|
||||
.activity-item .activity-afterlink {
|
||||
grid-area: afterlink;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
}
|
||||
.activity-item .inplaceeditable {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.activity-item .activityname .afterlink {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .activityname .inplaceeditable .quickeditlink {
|
||||
z-index: 2;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.activity-item .action-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.activity-item .action-menu-item .filler {
|
||||
display: none;
|
||||
}
|
||||
.activity-item .no-overflow {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.activity-item .badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item .automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.activity-item .activity-info,
|
||||
.activity-item .activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5rem;
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
.editing .activity-item {
|
||||
cursor: move;
|
||||
}
|
||||
@@ -29114,10 +29188,8 @@ span.editinstructions .alert-link {
|
||||
.editing .activity-item:hover .alert-link, .editing .activity-item.selected .alert-link {
|
||||
color: #070808;
|
||||
}
|
||||
.editing .activity-item:hover .description .course-description-item,
|
||||
.editing .activity-item:hover .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .description .course-description-item,
|
||||
.editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
|
||||
.editing .activity-item.selected .badge {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
@@ -29140,6 +29212,7 @@ span.editinstructions .alert-link {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Activity divider */
|
||||
.activity:focus-within + .activity div.divider button,
|
||||
.course-section-header:focus-within + .content .section .activity:first-child div.divider button,
|
||||
.content .section .activity:focus-within div.divider button {
|
||||
@@ -29177,6 +29250,7 @@ span.editinstructions .alert-link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Bulk editing */
|
||||
.bulkenabled .bulk-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user