L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-87712 course: Relocate dates in activity page

Browse Source
This commit is contained in:
Sara Arjona
2026-02-10 08:43:13 +01:00
parent 2456d4e3bb
commit df1eaf806e
9 changed files with 156 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/course/templates/activity_date.mustache
+2 -2
View File
@@ -25,6 +25,6 @@
"datestring": "6 April 2021, 6:46 PM"
}
}}
<div>
<strong>{{label}}</strong> {{{datestring}}}
<div class="date-item">
<span class="date-item-label">{{label}}</span> {{{datestring}}}
</div>
public/course/templates/activity_info.mustache
+30 -23
View File
@@ -50,29 +50,6 @@
}
}}
<div data-region="activity-information" data-activityname="{{activityname}}" class="activity-information">
{{#hascompletion}}
{{#uservisible}}
<div class="completion-info" data-region="completion-info">
{{#isautomatic}}
<div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
<div class="automatic-completion-title"><strong>{{#str}}completionrequirements, core_completion{{/str}}</strong></div>
<ul class="activity-completion-list">
{{#completiondetails}}
{{> core_course/completion_automatic }}
{{/completiondetails}}
</ul>
</div>
{{/isautomatic}}
{{^isautomatic}}
{{#showmanualcompletion}}
{{> core_course/completion_manual }}
{{/showmanualcompletion}}
{{/isautomatic}}
</div>
{{/uservisible}}
{{/hascompletion}}
{{#hasdates}}
<div data-region="activity-dates" class="activity-dates">
{{#activitydates}}
@@ -80,4 +57,34 @@
{{/activitydates}}
</div>
{{/hasdates}}
<div data-region="activity-details" class="activity-details">
{{#description}}
<div class="activity-description" id="intro">
{{{description}}}
</div>
{{/description}}
{{#hascompletion}}
{{#uservisible}}
<div class="completion-info" data-region="completion-info">
{{#isautomatic}}
<div class="automatic-completion-conditions" data-region ="completionrequirements" role="list" aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}">
<div class="automatic-completion-title"><strong>{{#str}}completionrequirements, core_completion{{/str}}</strong></div>
<ul class="activity-completion-list">
{{#completiondetails}}
{{> core_course/completion_automatic }}
{{/completiondetails}}
</ul>
</div>
{{/isautomatic}}
{{^isautomatic}}
{{#showmanualcompletion}}
{{> core_course/completion_manual }}
{{/showmanualcompletion}}
{{/isautomatic}}
</div>
{{/uservisible}}
{{/hascompletion}}
</div>
</div>
public/lib/classes/output/activity_header.php
+1
View File
@@ -196,6 +196,7 @@ class activity_header implements renderable, templatable {
$activitydates = new \core_course\output\activity_dates($activitydates);
$activitydatesdata = (array) $activitydates->export_for_template($output);
$data = array_merge($activitycompletiondata, $activitydatesdata);
$data['description'] = $this->description;
$activityinfo = $output->render_from_template('core_course/activity_info', $data);
}
public/lib/templates/activity_header.mustache
+1 -5
View File
@@ -71,11 +71,7 @@
<h2>{{{title}}}</h2>
{{/title}}
<div class="activity-header" data-for="page-activity-header">{{!
}}{{#description}}
<div class="activity-description" id="intro">
{{{description}}}
</div>
{{/description}}
}}
{{#completion}}
{{{completion}}}
{{/completion}}
public/theme/boost/scss/moodle/course.scss
+4
View File
@@ -325,6 +325,10 @@ $divider-hover-color: $primary !default;
@include media-breakpoint-down(sm) {
margin-top: map-get($spacers, 2);
}
.date-item-label {
font-weight: 600;
margin-right: map-get($spacers, 1);
}
}
.activity-name-area {
grid-area: name;
public/theme/boost/scss/moodle/modules.scss
+34 -7
View File
@@ -10,7 +10,11 @@ select {
}
.path-mod {
.activity-header:not(:empty) {
.activity-header {
max-width: $course-content-maxwidth;
margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
}
.activity-details:not(:empty) {
background-color: $gray-100;
margin-bottom: map-get($spacers, 3);
padding-left: map-get($spacers, 3);
@@ -22,17 +26,34 @@ select {
border-bottom: 0;
}
}
.activity-information {
.activity-dates {
padding-top: map-get($spacers, 2);
padding-bottom: map-get($spacers, 3);
display: grid;
grid-template-columns: 1fr 1fr; // Creates two equal columns
gap: map-get($spacers, 2) map-get($spacers, 4); // Vertical and horizontal spacing
width: 100%;
align-items: center;
.date-item {
color: $gray-700;
display: flex;
align-items: center;
white-space: nowrap;
.activity-dates {
padding-top: map-get($spacers, 3);
padding-bottom: map-get($spacers, 3);
border-bottom: $border-width solid $border-color;
&:not(:last-child)::after {
display: none;
}
.date-item-label {
font-weight: 600;
margin-right: map-get($spacers, 1);
}
}
}
.activity-details {
.completion-info {
padding-top: map-get($spacers, 2);
padding-bottom: map-get($spacers, 2);
border-bottom: $border-width solid $border-color;
}
}
.activity-description {
@@ -120,6 +141,12 @@ select {
}
}
@media (max-width: 767px) {
.path-mod .activity-dates {
grid-template-columns: 1fr; // Stack them on small screens
}
}
// Choice module
.path-mod-choice {
public/theme/boost/style/moodle.css
+36 -7
View File
@@ -30717,6 +30717,10 @@ table.calendartable caption {
margin-top: 0.5rem;
}
}
.activity-item .activity-dates .date-item-label {
font-weight: 600;
margin-right: 0.25rem;
}
.activity-item .activity-name-area {
grid-area: name;
}
@@ -35596,25 +35600,45 @@ select {
width: auto;
}
.path-mod .activity-header:not(:empty) {
.path-mod .activity-header {
max-width: 830px;
margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
}
.path-mod .activity-details:not(:empty) {
background-color: #f8f9fa;
margin-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.5rem;
}
.path-mod .activity-header:not(:empty) > div:last-child > div:last-child {
.path-mod .activity-details:not(:empty) > div:last-child > div:last-child {
border-bottom: 0;
}
.path-mod .activity-information .activity-dates {
padding-top: 1rem;
.path-mod .activity-dates {
padding-top: 0.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #dee2e6;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.5rem;
width: 100%;
align-items: center;
}
.path-mod .activity-information .completion-info {
.path-mod .activity-dates .date-item {
color: #495057;
display: flex;
align-items: center;
white-space: nowrap;
}
.path-mod .activity-dates .date-item:not(:last-child)::after {
display: none;
}
.path-mod .activity-dates .date-item .date-item-label {
font-weight: 600;
margin-right: 0.25rem;
}
.path-mod .activity-details .completion-info {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #dee2e6;
}
.path-mod .activity-description {
padding-top: 1rem;
@@ -35685,6 +35709,11 @@ select {
margin-bottom: 0;
}
@media (max-width: 767px) {
.path-mod .activity-dates {
grid-template-columns: 1fr;
}
}
.path-mod-choice .horizontal .choices .option {
display: inline-block;
}
public/theme/classic/scss/classic/course.scss
+12
View File
@@ -47,3 +47,15 @@
white-space: pre-wrap;
}
}
.path-mod {
.activity-header {
max-width: initial;
}
}
@media (max-width: map-get($grid-breakpoints, "xl")) {
.path-mod .activity-dates {
grid-template-columns: 1fr; // Stack them on small screens
}
}
public/theme/classic/style/moodle.css
+36 -7
View File
@@ -30717,6 +30717,10 @@ table.calendartable caption {
margin-top: 0.5rem;
}
}
.activity-item .activity-dates .date-item-label {
font-weight: 600;
margin-right: 0.25rem;
}
.activity-item .activity-name-area {
grid-area: name;
}
@@ -35596,25 +35600,45 @@ select {
width: auto;
}
.path-mod .activity-header:not(:empty) {
.path-mod .activity-header {
max-width: 830px;
margin: 0 auto !important; /* stylelint-disable-line declaration-no-important */
}
.path-mod .activity-details:not(:empty) {
background-color: #f8f9fa;
margin-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.375rem;
}
.path-mod .activity-header:not(:empty) > div:last-child > div:last-child {
.path-mod .activity-details:not(:empty) > div:last-child > div:last-child {
border-bottom: 0;
}
.path-mod .activity-information .activity-dates {
padding-top: 1rem;
.path-mod .activity-dates {
padding-top: 0.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #dee2e6;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1.5rem;
width: 100%;
align-items: center;
}
.path-mod .activity-information .completion-info {
.path-mod .activity-dates .date-item {
color: #495057;
display: flex;
align-items: center;
white-space: nowrap;
}
.path-mod .activity-dates .date-item:not(:last-child)::after {
display: none;
}
.path-mod .activity-dates .date-item .date-item-label {
font-weight: 600;
margin-right: 0.25rem;
}
.path-mod .activity-details .completion-info {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #dee2e6;
}
.path-mod .activity-description {
padding-top: 1rem;
@@ -35685,6 +35709,11 @@ select {
margin-bottom: 0;
}
@media (max-width: 767px) {
.path-mod .activity-dates {
grid-template-columns: 1fr;
}
}
.path-mod-choice .horizontal .choices .option {
display: inline-block;
}