mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-81766 mod_subsection: Display subsection content in activity card

Browse Source 
- Replace the standard activity card display with the delegated section
  rendering.
- Add and fix related SCSS styles.
This commit is contained in:
Mikel Martín 2024-07-11 13:54:15 +02:00 committed by ferranrecio
parent cc84ae5809
commit 1b8ec78421
6 changed files with 212 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
course/format/templates/local/content/cm/activity.mustache
View File

@ -139,7 +139,7 @@
{{! Description }}
{{#altcontent}}
<div class="activity-altcontent d-flex text-break {{#hasname}}activity-description{{/hasname}}">
<div class="activity-altcontent text-break {{#hasname}}activity-description{{/hasname}}">
{{{altcontent}}}
</div>
{{/altcontent}}

36
mod/subsection/lib.php
View File

@ -207,3 +207,39 @@ function subsection_extend_navigation($subsectionnode, $course, $module, $cm) {
*/
function subsection_extend_settings_navigation($settingsnav, $subsectionnode = null) {
}
/**
* Sets dynamic information about a course module
*
* This function is called from cm_info when displaying the module
* mod_subsection can be displayed inline on course page and therefore have no course link
*
* @param cm_info $cm
*/
function subsection_cm_info_dynamic(cm_info $cm) {
$cm->set_no_view_link();
}
/**
* Sets the special subsection display on course page.
*
* @param cm_info $cm Course-module object
*/
function subsection_cm_info_view(cm_info $cm) {
global $DB, $PAGE;
$cm->set_custom_cmlist_item(true);
$course = $DB->get_record('course', ['id' => $cm->course], '*', MUST_EXIST);
// Get the section info.
$delegatedsection = manager::create_from_coursemodule($cm)->get_delegated_section_info();
// Render the delegated section.
$format = course_get_format($course);
$renderer = $PAGE->get_renderer('format_' . $course->format);
$outputclass = $format->get_output_classname('content\\delegatedsection');
/** @var \core_courseformat\output\local\content\delegatedsection $delegatedsectionoutput */
$delegatedsectionoutput = new $outputclass($format, $delegatedsection);
$cm->set_content($renderer->render($delegatedsectionoutput), true);
}

80
theme/boost/scss/moodle/course.scss
View File

@ -1078,6 +1078,7 @@ span.editinstructions {
/* Variables definition*/
$activity-item-padding: 0.75rem !default;
$activity-border-radius: 1rem !default;
$activity-border-width: 2px !default;
$activity-hover-border-color: $primary !default;
@ -1211,10 +1212,15 @@ $divider-hover-color: $primary !default;
}
// Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
.action-menu .btn.btn-icon {
height: map-get($iconsizes, 5);
width: map-get($iconsizes, 5);
@include border-radius();
.action-menu {
.btn.btn-icon {
height: map-get($iconsizes, 5);
width: map-get($iconsizes, 5);
@include border-radius();
}
&.section-actions .btn.btn-icon {
font-size: $font-size-lg;
}
}
.section-summary-activities {
@ -1292,8 +1298,9 @@ $divider-hover-color: $primary !default;
padding-top: map-get($spacers, 1);
margin-top: map-get($spacers, 1);
border-top: $border-width solid $border-color;
// Custom styles for activity while editing.
.editing & {
// Custom styles for activity while editing and for the first activity card in the section.
.editing &,
.section &:first-child {
// Remove activity top border and spacing, while editing a separator is displayed.
padding-top: 0;
margin-top: 0;
@ -1303,10 +1310,10 @@ $divider-hover-color: $primary !default;
.activity-item {
position: relative;
padding: .75rem;
background-color: $white;
padding: $activity-item-padding;
@include border-radius($activity-border-radius);
&.activityinline {
padding: .75rem 0;
padding: $activity-item-padding 0;
}
&.hiddenactivity {
background-color: $gray-100;
@ -1318,14 +1325,13 @@ $divider-hover-color: $primary !default;
// Custom styles for activity cards while editing.
.editing & {
cursor: move;
border: $activity-border-width solid transparent;
@include border-radius($activity-border-radius);
.a {
cursor: pointer;
}
&:hover,
// Add a border on hover to the activity card (avoiding hover effect in inner activities).
&:hover:not(:has(.activity:hover)),
&.selected {
border: $activity-border-width solid $activity-hover-border-color;
outline: $activity-border-width solid $activity-hover-border-color;
box-shadow: $box-shadow-sm;
.activityiconcontainer,
.badge {
@ -1715,6 +1721,7 @@ $divider-hover-color: $primary !default;
}
/* Styles for the Move activity and Move section modals */
.move-activity-tree {
.collapse-list-item {
@include border-radius();
@ -1754,3 +1761,50 @@ $divider-hover-color: $primary !default;
font-weight: bold;
}
}
/* Subsection specific styles */
.activity.subsection {
border-top: none;
> .activity-item {
border: $border-width solid $border-color;
padding: 0;
.activity-altcontent {
margin-top: 0;
}
}
.section {
margin-top: 0;
.section-item {
border: none;
padding: $activity-item-padding;
}
.icons-collapse-expand:has(+ h4) {
height: map-get($iconsizes, 4);
width: map-get($iconsizes, 4);
font-size: $font-size-sm;
}
h4 {
font-size: $h5-font-size;
}
.section-actions .btn.btn-icon {
font-size: inherit;
}
}
+ .activity {
border-top: none;
}
// Allow v-parent-focus only for closest acvitity (avoiding subsection).
.focus-control:not(:has(.focus-control)) {
&:focus-within .v-parent-focus,
&:hover .v-parent-focus {
opacity: 1 !important; // stylelint-disable-line declaration-no-important
visibility: visible !important; // stylelint-disable-line declaration-no-important
}
}
.focus-control:focus-within .focus-control .v-parent-focus,
.focus-control:hover .focus-control .v-parent-focus {
opacity: 0;
visibility: hidden;
}
}

4
theme/boost/scss/moodle/undo.scss
View File

@ -11,7 +11,6 @@ li.activity.label,
.file-picker td.label {
background: inherit;
color: inherit;
border: inherit;
text-shadow: none;
white-space: normal;
display: block;
@ -21,6 +20,7 @@ li.activity.label,
}
.file-picker td.label {
border: inherit;
display: table-cell;
text-align: right;
padding: 8px;
@ -55,7 +55,7 @@ li.activity.label,
* it to white?
*/
li.section.hidden,
.section.hidden,
.block.hidden,
.block.invisible {
visibility: visible;

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

@ -29068,6 +29068,9 @@ span.editinstructions .alert-link {
width: 32px;
border-radius: 0.5rem;
}
.course-section .action-menu.section-actions .btn.btn-icon {
font-size: 1.171875rem;
}
.course-section .section-summary-activities .icon {
width: inherit;
color: #0f6cbf;
@ -29126,7 +29129,7 @@ span.editinstructions .alert-link {
margin-top: 0.25rem;
border-top: 1px solid #dee2e6;
}
.editing .activity {
.editing .activity, .section .activity:first-child {
padding-top: 0;
margin-top: 0;
border-top: none;
@ -29135,7 +29138,7 @@ span.editinstructions .alert-link {
.activity-item {
position: relative;
padding: 0.75rem;
background-color: #fff;
border-radius: 1rem;
}
.activity-item.activityinline {
padding: 0.75rem 0;
@ -29149,18 +29152,16 @@ span.editinstructions .alert-link {
}
.editing .activity-item {
cursor: move;
border: 2px solid transparent;
border-radius: 1rem;
}
.editing .activity-item .a {
cursor: pointer;
}
.editing .activity-item:hover, .editing .activity-item.selected {
border: 2px solid #0f6cbf;
.editing .activity-item:hover:not(:has(.activity:hover)), .editing .activity-item.selected {
outline: 2px solid #0f6cbf;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.editing .activity-item:hover .activityiconcontainer,
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
.editing .activity-item:hover:not(:has(.activity:hover)) .activityiconcontainer,
.editing .activity-item:hover:not(:has(.activity:hover)) .badge, .editing .activity-item.selected .activityiconcontainer,
.editing .activity-item.selected .badge {
mix-blend-mode: multiply;
}
@ -29919,6 +29920,48 @@ span.editinstructions .alert-link {
font-weight: bold;
}
/* Subsection specific styles */
.activity.subsection {
border-top: none;
}
.activity.subsection > .activity-item {
border: 1px solid #dee2e6;
padding: 0;
}
.activity.subsection > .activity-item .activity-altcontent {
margin-top: 0;
}
.activity.subsection .section {
margin-top: 0;
}
.activity.subsection .section .section-item {
border: none;
padding: 0.75rem;
}
.activity.subsection .section .icons-collapse-expand:has(+ h4) {
height: 24px;
width: 24px;
font-size: 0.8203125rem;
}
.activity.subsection .section h4 {
font-size: 1.171875rem;
}
.activity.subsection .section .section-actions .btn.btn-icon {
font-size: inherit;
}
.activity.subsection + .activity {
border-top: none;
}
.activity.subsection .focus-control:not(:has(.focus-control)):focus-within .v-parent-focus, .activity.subsection .focus-control:not(:has(.focus-control)):hover .v-parent-focus {
opacity: 1 !important;
visibility: visible !important;
}
.activity.subsection .focus-control:focus-within .focus-control .v-parent-focus,
.activity.subsection .focus-control:hover .focus-control .v-parent-focus {
opacity: 0;
visibility: hidden;
}
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
:target,
:focus {
@ -36119,7 +36162,6 @@ li.activity.label,
.file-picker td.label {
background: inherit;
color: inherit;
border: inherit;
text-shadow: none;
white-space: normal;
display: block;
@ -36129,6 +36171,7 @@ li.activity.label,
}
.file-picker td.label {
border: inherit;
display: table-cell;
text-align: right;
padding: 8px;
@ -36160,7 +36203,7 @@ li.activity.label,
* nice effect, though they'd still be active. Maybe reverse
* it to white?
*/
li.section.hidden,
.section.hidden,
.block.hidden,
.block.invisible {
visibility: visible;

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

@ -29068,6 +29068,9 @@ span.editinstructions .alert-link {
width: 32px;
border-radius: 0.25rem;
}
.course-section .action-menu.section-actions .btn.btn-icon {
font-size: 1.171875rem;
}
.course-section .section-summary-activities .icon {
width: inherit;
color: #0f6cbf;
@ -29126,7 +29129,7 @@ span.editinstructions .alert-link {
margin-top: 0.25rem;
border-top: 1px solid #dee2e6;
}
.editing .activity {
.editing .activity, .section .activity:first-child {
padding-top: 0;
margin-top: 0;
border-top: none;
@ -29135,7 +29138,7 @@ span.editinstructions .alert-link {
.activity-item {
position: relative;
padding: 0.75rem;
background-color: #fff;
border-radius: 1rem;
}
.activity-item.activityinline {
padding: 0.75rem 0;
@ -29149,18 +29152,16 @@ span.editinstructions .alert-link {
}
.editing .activity-item {
cursor: move;
border: 2px solid transparent;
border-radius: 1rem;
}
.editing .activity-item .a {
cursor: pointer;
}
.editing .activity-item:hover, .editing .activity-item.selected {
border: 2px solid #0f6cbf;
.editing .activity-item:hover:not(:has(.activity:hover)), .editing .activity-item.selected {
outline: 2px solid #0f6cbf;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.editing .activity-item:hover .activityiconcontainer,
.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
.editing .activity-item:hover:not(:has(.activity:hover)) .activityiconcontainer,
.editing .activity-item:hover:not(:has(.activity:hover)) .badge, .editing .activity-item.selected .activityiconcontainer,
.editing .activity-item.selected .badge {
mix-blend-mode: multiply;
}
@ -29919,6 +29920,48 @@ span.editinstructions .alert-link {
font-weight: bold;
}
/* Subsection specific styles */
.activity.subsection {
border-top: none;
}
.activity.subsection > .activity-item {
border: 1px solid #dee2e6;
padding: 0;
}
.activity.subsection > .activity-item .activity-altcontent {
margin-top: 0;
}
.activity.subsection .section {
margin-top: 0;
}
.activity.subsection .section .section-item {
border: none;
padding: 0.75rem;
}
.activity.subsection .section .icons-collapse-expand:has(+ h4) {
height: 24px;
width: 24px;
font-size: 0.8203125rem;
}
.activity.subsection .section h4 {
font-size: 1.171875rem;
}
.activity.subsection .section .section-actions .btn.btn-icon {
font-size: inherit;
}
.activity.subsection + .activity {
border-top: none;
}
.activity.subsection .focus-control:not(:has(.focus-control)):focus-within .v-parent-focus, .activity.subsection .focus-control:not(:has(.focus-control)):hover .v-parent-focus {
opacity: 1 !important;
visibility: visible !important;
}
.activity.subsection .focus-control:focus-within .focus-control .v-parent-focus,
.activity.subsection .focus-control:hover .focus-control .v-parent-focus {
opacity: 0;
visibility: hidden;
}
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
:target,
:focus {
@ -36119,7 +36162,6 @@ li.activity.label,
.file-picker td.label {
background: inherit;
color: inherit;
border: inherit;
text-shadow: none;
white-space: normal;
display: block;
@ -36129,6 +36171,7 @@ li.activity.label,
}
.file-picker td.label {
border: inherit;
display: table-cell;
text-align: right;
padding: 8px;
@ -36160,7 +36203,7 @@ li.activity.label,
* nice effect, though they'd still be active. Maybe reverse
* it to white?
*/
li.section.hidden,
.section.hidden,
.block.hidden,
.block.invisible {
visibility: visible;