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

MDL-79987 course: Improve one section per page course layout

Browse Source 
The following changes have been implemented:
- Activities count instead of group by type.
- Icons before Activities and Progress.
- Arrow icon to navigate to the section.
- Other styling improvements, such as the color for the section name and no hover,
and a separator between the activities summary information and the list of activities
for the highlighted section.
This commit is contained in:
Sara Arjona 2023-11-07 11:12:55 +01:00
parent a0ba7d282a
commit 8410cf05e0
No known key found for this signature in database
8 changed files with 110 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
course/format/classes/output/local/content/section/cmsummary.php
View File

@ -70,15 +70,13 @@ class cmsummary implements named_templatable, renderable {
list($mods, $complete, $total, $showcompletion) = $this->calculate_section_stats();
if (empty($mods)) {
return new stdClass();
}
$totalactivities = array_reduce($mods, fn($carry, $item) => $carry + ($item["count"] ?? 0), 0);
$data = (object)[
'showcompletion' => $showcompletion,
'total' => $total,
'complete' => $complete,
'mods' => array_values($mods),
'totalactivities' => $totalactivities,
];
$data->modprogress = get_string('progresstotal', 'completion', $data);

21
course/format/templates/local/content/section/cmsummary.mustache
View File

@ -32,16 +32,17 @@
"count": "2"
}
],
"modprogress": "Total 5"
"modprogress": "Progress: 1 / 5",
"totalactivities": "5"
}
}}
<div class="section-summary-activities pr-2 mdl-right">
{{#mods}}
<span class="activity-count">{{name}}: {{count}}</span>
{{/mods}}
</div>
{{#showcompletion}}
<div class="section-summary-activities pr-2 mdl-right">
<span class="activity-count">{{modprogress}}</span>
<div class="section-summary-activities d-flex">
<div class="d-flex align-items-center">
{{#pix}}i/activities, moodle{{/pix}}{{#str}} totalactivities, course, {{totalactivities}} {{/str}}
</div>
{{/showcompletion}}
{{#showcompletion}}
<div class="d-flex ml-auto align-items-center">
{{#pix}}i/stats, moodle{{/pix}}{{modprogress}}
</div>
{{/showcompletion}}
</div>

27
course/format/templates/local/content/section/content.mustache
View File

@ -39,6 +39,7 @@
"hasname": "true"
},
"id": 3,
"cmid": 3,
"module": "forum",
"anchor": "activity-3",
"extraclasses": "newmessages"
@ -51,6 +52,7 @@
"hasname": "true"
},
"id": 4,
"cmid": 4,
"anchor": "activity-4",
"module": "assign",
"extraclasses": ""
@ -123,11 +125,30 @@
{{> core_courseformat/local/content/section/controlmenu }}
{{/ core_courseformat/local/content/section/controlmenu }}
{{/controlmenu}}
{{#header}}
{{#headerdisplaymultipage}}
{{^controlmenu}}
<div class="section_goto bulk-hidden ml-auto" data-sectionid="{{id}}">
<a href="{{{url}}}"
class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin"
title="{{#str}}gotosection, course, {{name}}{{/str}}">
<span class="dir-rtl-hide">
{{#pix}}t/right, moodle{{/pix}}
</span>
<span class="dir-ltr-hide">
{{#pix}}t/left, moodle, {{#str}}gotosection, course, {{name}}{{/str}}{{/pix}}
</span>
<span class="sr-only">
{{#str}}gotosection, course, {{name}}{{/str}}
</span>
</a>
</div>
{{/controlmenu}}
{{/headerdisplaymultipage}}
{{/header}}
</div>
<div id="coursecontentcollapse{{num}}"
class="content {{^iscoursedisplaymultipage}}
{{^sitehome}}course-content-item-content collapse {{^contentcollapsed}}show{{/contentcollapsed}}{{/sitehome}}
{{/iscoursedisplaymultipage}}">
class="content {{^iscoursedisplaymultipage}}{{^sitehome}}course-content-item-content collapse {{^contentcollapsed}}show{{/contentcollapsed}}{{/sitehome}}{{/iscoursedisplaymultipage}}">
<div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
{{#summary}}
{{$ core_courseformat/local/content/section/summary }}

25
course/tests/behat/paged_course_information.feature
View File

@ -13,7 +13,7 @@ Feature: Course paged mode information
| activity | course | name | section | completion |
| chat | C1 | Chat room | 1 | <completion> |
| data | C1 | Database | 1 | <completion> |
| forum | C1 | First forum | 2 | <completion> |
| forum | C1 | First forum | 1 | <completion> |
| forum | C1 | Second forum | 2 | <completion> |
And the following "users" exist:
| username | firstname | lastname | email |
@ -23,13 +23,13 @@ Feature: Course paged mode information
| user | course | role |
| student1 | C1 | student |
| teacher1 | C1 | editingteacher |
When I log in as "<user>"
And I am on "Course 1" course homepage
Then I should see "Chat: 1" in the "#section-1" "css_element"
And I should see "Database: 1" in the "#section-1" "css_element"
When I am on the "Course 1" "Course" page logged in as "<user>"
Then I should see "Activities: 3" in the "#section-1" "css_element"
And I should <show> "Progress:" in the "#section-1" "css_element"
And I should see "Forums: 2" in the "#section-2" "css_element"
And I should see "Activities: 1" in the "#section-2" "css_element"
And I should <show> "Progress:" in the "#section-2" "css_element"
And I should see "Activities: 0" in the "#section-3" "css_element"
And I should not see "Progress:" in the "#section-3" "css_element"
Examples:
| user | courseformat | completion | show |
@ -51,18 +51,17 @@ Feature: Course paged mode information
| activity | course | name | section | completion |
| chat | C1 | Chat room | 1 | <completion> |
| data | C1 | Database | 1 | <completion> |
| forum | C1 | First forum | 2 | <completion> |
| forum | C1 | First forum | 1 | <completion> |
| forum | C1 | Second forum | 2 | <completion> |
And I am on the "Course 1" "enrolment methods" page logged in as admin
And I click on "Enable" "link" in the "Guest access" "table_row"
And I log out
When I log in as "guest"
And I am on "Course 1" course homepage
Then I should see "Chat: 1" in the "#section-1" "css_element"
And I should see "Database: 1" in the "#section-1" "css_element"
When I am on the "Course 1" "Course" page logged in as "guest"
Then I should see "Activities: 3" in the "#section-1" "css_element"
And I should not see "Progress:" in the "#section-1" "css_element"
And I should see "Forums: 2" in the "#section-2" "css_element"
And I should see "Activities: 1" in the "#section-2" "css_element"
And I should not see "Progress:" in the "#section-2" "css_element"
And I should see "Activities: 0" in the "#section-3" "css_element"
And I should not see "Progress:" in the "#section-3" "css_element"
Examples:
| courseformat | completion |

2
lang/en/course.php
View File

@ -162,6 +162,8 @@ $string['targetlabelstudentgradetopassno'] = 'Student who is likely to meet the
$string['targetlabelstudentgradetopassyes'] = 'Student at risk of not meeting the minimum grade to pass the course.';
$string['targetlabelteachingyes'] = 'Users with teaching capabilities who have access to the course';
$string['targetlabelteachingno'] = 'Courses at risk of not starting';
$string['totalactivities'] = 'Activities: {$a}';
$string['gotosection'] = 'Go to section {$a}';
// Deprecated since Moodle 4.3.
$string['aria:courseimage'] = 'Course image';

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

@ -375,14 +375,6 @@ body:not(.editing) .sitetopic ul.section {
margin: 2px 5px 2px 5px;
}
.course-content .section-summary .section-summary-activities .activity-count {
color: $text-muted;
font-size: $font-size-sm;
margin: 3px;
white-space: nowrap;
display: inline-block;
}
.course-content .section-summary .summary {
margin-top: 5px;
}
@ -1366,6 +1358,13 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
padding-left: 0;
border-bottom: $border-width solid $border-color;
.sectionname > a {
color: $gray-900;
&:hover {
text-decoration: none;
}
}
&:last-child:not(.section-summary) {
border-bottom: 0;
}
@ -1423,12 +1422,22 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
}
}
.section-summary-activities .activity-count {
color: $text-muted;
font-size: $font-size-sm;
margin: 3px;
white-space: nowrap;
display: inline-block;
.section-summary-activities {
.icon {
width: inherit;
color: $primary;
}
}
.section-summary-activities + .section {
border-top: $border-width solid $border-color;
margin-top: map-get($spacers, 3) !important; // stylelint-disable-line declaration-no-important
padding-top: map-get($spacers, 3) !important; // stylelint-disable-line declaration-no-important
}
.section_goto .icon {
font-size: $font-size-lg;
color: $primary;
}
// Legacy dndupload classes. Can be removed in 4.4 as part of MDL-77124.

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

@ -28251,14 +28251,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
margin: 2px 5px 2px 5px;
}
.course-content .section-summary .section-summary-activities .activity-count {
color: #6a737b;
font-size: 0.8203125rem;
margin: 3px;
white-space: nowrap;
display: inline-block;
}
.course-content .section-summary .summary {
margin-top: 5px;
}
@ -29140,6 +29132,12 @@ span.editinstructions .alert-link {
padding-left: 0;
border-bottom: 1px solid #dee2e6;
}
.course-section .sectionname > a {
color: #1d2125;
}
.course-section .sectionname > a:hover {
text-decoration: none;
}
.course-section:last-child:not(.section-summary) {
border-bottom: 0;
}
@ -29180,12 +29178,18 @@ span.editinstructions .alert-link {
margin-top: 0.5rem;
border-radius: 0.5rem;
}
.course-section .section-summary-activities .activity-count {
color: #6a737b;
font-size: 0.8203125rem;
margin: 3px;
white-space: nowrap;
display: inline-block;
.course-section .section-summary-activities .icon {
width: inherit;
color: #0f6cbf;
}
.course-section .section-summary-activities + .section {
border-top: 1px solid #dee2e6;
margin-top: 1rem !important;
padding-top: 1rem !important;
}
.course-section .section_goto .icon {
font-size: 1.171875rem;
color: #0f6cbf;
}
.course-section.dndupload-dropzone {
border: 2px dashed #0f6cbf;

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

@ -28251,14 +28251,6 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
margin: 2px 5px 2px 5px;
}
.course-content .section-summary .section-summary-activities .activity-count {
color: #6a737b;
font-size: 0.8203125rem;
margin: 3px;
white-space: nowrap;
display: inline-block;
}
.course-content .section-summary .summary {
margin-top: 5px;
}
@ -29140,6 +29132,12 @@ span.editinstructions .alert-link {
padding-left: 0;
border-bottom: 1px solid #dee2e6;
}
.course-section .sectionname > a {
color: #1d2125;
}
.course-section .sectionname > a:hover {
text-decoration: none;
}
.course-section:last-child:not(.section-summary) {
border-bottom: 0;
}
@ -29180,12 +29178,18 @@ span.editinstructions .alert-link {
margin-top: 0.5rem;
border-radius: 0.25rem;
}
.course-section .section-summary-activities .activity-count {
color: #6a737b;
font-size: 0.8203125rem;
margin: 3px;
white-space: nowrap;
display: inline-block;
.course-section .section-summary-activities .icon {
width: inherit;
color: #0f6cbf;
}
.course-section .section-summary-activities + .section {
border-top: 1px solid #dee2e6;
margin-top: 1rem !important;
padding-top: 1rem !important;
}
.course-section .section_goto .icon {
font-size: 1.171875rem;
color: #0f6cbf;
}
.course-section.dndupload-dropzone {
border: 2px dashed #0f6cbf;