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

MDL-84762 courseformat: Improve overview page styles

Browse Source 
- Add BODY_OUTLINE to button property enum
- Improve overviewdialog buttonclasses generation
- Replace button classes in activities overviews
- Add new courseoverview SCSS
This commit is contained in:
Mikel Martín
2025-07-22 16:30:50 +02:00
parent ef6df9e70e
commit 03b77e002f
16 changed files with 214 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/course/format/classes/output/local/overview/overviewdialog.php
+6
View File
@@ -17,6 +17,7 @@
namespace core_courseformat\output\local\overview;
use core\output\local\dropdown\dialog;
use core\output\local\properties\button;
use stdClass;
/**
@@ -109,6 +110,11 @@ class overviewdialog extends dialog {
'description' => $this->description,
];
// Overview dropdowns always have a dropdown toggle.
$data['buttonclasses'] = empty($data['buttonclasses'])
? button::BODY_OUTLINE->classes() . ' dropdown-toggle'
: $data['buttonclasses'] . ' dropdown-toggle';
return $data;
}
public/course/format/templates/local/overview/activityname.mustache
+1 -1
View File
@@ -33,7 +33,7 @@
<a href="{{activityurl}}" class="activityname">{{{activityname}}}</a>
</div>
{{#sectiontitle}}
<div>
<div class="small">
{{sectiontitle}}
</div>
{{/sectiontitle}}
public/lib/classes/output/local/properties/button.php
+2 -2
View File
@@ -30,9 +30,8 @@ enum button: string {
case DANGER = 'btn-danger';
case PRIMARY_OUTLINE = 'btn-outline-primary';
case SECONDARY_OUTLINE = 'btn-outline-secondary';
case BODY_OUTLINE = 'btn-subtle-body';
/**
* Returns the CSS classes for the property based on its type.
*
@@ -46,6 +45,7 @@ enum button: string {
self::DANGER => ' btn btn-danger',
self::PRIMARY_OUTLINE => ' btn btn-outline-primary',
self::SECONDARY_OUTLINE => ' btn btn-outline-secondary',
self::BODY_OUTLINE => ' btn btn-subtle-body',
};
}
}
public/mod/assign/classes/courseformat/overview.php
+1 -1
View File
@@ -104,7 +104,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new url('/mod/assign/view.php', ['id' => $this->cm->id, 'action' => 'grading']),
text: $name . $badge,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
public/mod/choice/classes/courseformat/overview.php
+1 -1
View File
@@ -96,7 +96,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new \moodle_url('/mod/choice/report.php', ['id' => $this->cm->id]),
text: get_string('view'),
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
public/mod/data/classes/courseformat/overview.php
+1 -1
View File
@@ -114,7 +114,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new url('/mod/data/view.php', ['id' => $this->cm->id]),
text: $text,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
public/mod/feedback/classes/courseformat/overview.php
+1 -1
View File
@@ -65,7 +65,7 @@ class overview extends \core_courseformat\activityoverviewbase {
'core',
['count' => $submissions, 'total' => $total]
),
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
public/mod/glossary/classes/courseformat/overview.php
+2 -2
View File
@@ -75,7 +75,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new url('/mod/glossary/view.php', ['id' => $this->cm->id, 'mode' => 'approval']),
text: $this->stringmanager->get_string('approve', 'mod_glossary') . $badge,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
@@ -105,7 +105,7 @@ class overview extends \core_courseformat\activityoverviewbase {
url: new url('/mod/glossary/view.php', ['id' => $this->cm->id]),
text: $entriescount,
attributes: [
'class' => button::SECONDARY_OUTLINE->classes(),
'class' => button::BODY_OUTLINE->classes(),
'title' => $this->stringmanager->get_string('seeallentries', 'mod_glossary'),
],
);
public/mod/h5pactivity/classes/courseformat/overview.php
+2 -2
View File
@@ -67,7 +67,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new url('/mod/h5pactivity/report.php', ['id' => $this->cm->id]),
text: $viewresults,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
@@ -152,7 +152,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new overviewdialog(
buttoncontent: $totalattempts,
title: $this->stringmanager->get_string('totalattempts', 'mod_h5pactivity'),
definition: ['buttonclasses' => button::SECONDARY_OUTLINE->classes() . ' dropdown-toggle'],
definition: ['buttonclasses' => button::BODY_OUTLINE->classes()],
);
$method = $this->manager::get_grading_methods()[$this->manager->get_instance()->grademethod];
$content->add_item($this->stringmanager->get_string('gradingmethod', 'grading'), $method);
public/mod/lesson/classes/courseformat/overview.php
+4 -3
View File
@@ -84,13 +84,14 @@ class overview extends \core_courseformat\activityoverviewbase {
$content = new action_link(
url: new url('/mod/lesson/report.php', ['id' => $this->cm->id, 'action' => 'reportoverview']),
text: $this->stringmanager->get_string('view', 'mod_lesson'),
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
return new overviewitem(
name: $this->stringmanager->get_string('actions'),
value: '',
content: $content,
textalign: text_align::CENTER,
);
}
@@ -144,7 +145,7 @@ class overview extends \core_courseformat\activityoverviewbase {
$overviewdialog = new overviewdialog(
buttoncontent: $totalattempts,
description: $this->stringmanager->get_string('retakesallowedinfo', 'mod_lesson'),
definition: ['buttonclasses' => button::SECONDARY_OUTLINE->classes() . ' dropdown-toggle'],
definition: ['buttonclasses' => button::BODY_OUTLINE->classes() . ' dropdown-toggle'],
);
$averageattempts = $totalattempts ? round($totalattempts / $attemptedusers) : 0;
@@ -160,7 +161,7 @@ class overview extends \core_courseformat\activityoverviewbase {
name: $this->stringmanager->get_string('totalattepmts', 'mod_lesson'),
value: !empty($overviewdialog) ? $totalattempts : null,
content: $overviewdialog ?? $totalattempts,
textalign: text_align::CENTER,
textalign: text_align::START,
);
}
}
public/mod/workshop/classes/courseformat/overview.php
+2 -2
View File
@@ -172,7 +172,7 @@ class overview extends \core_courseformat\activityoverviewbase {
'workshop-viewlet-allsubmissions',
),
text: $content,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
}
@@ -223,7 +223,7 @@ class overview extends \core_courseformat\activityoverviewbase {
'workshop-viewlet-gradereport',
),
text: $content,
attributes: ['class' => button::SECONDARY_OUTLINE->classes()],
attributes: ['class' => button::BODY_OUTLINE->classes()],
);
}
public/theme/boost/scss/moodle.scss
+1
View File
@@ -11,6 +11,7 @@
@import "moodle/course";
@import "moodle/coursemanagement";
@import "moodle/courselisting";
@import "moodle/courseoverview";
@import "moodle/drawer";
@import "moodle/filemanager";
@import "moodle/message";
public/theme/boost/scss/moodle/buttons.scss
+2 -2
View File
@@ -122,7 +122,7 @@ p.arrow_button {
@each $color, $value in $theme-colors {
.btn-subtle-#{$color} {
--#{$prefix}btn-font-weight: #{$font-weight-bold};
--#{$prefix}btn-font-weight: #{$font-weight-medium};
--#{$prefix}btn-color: var(--#{$prefix}#{$color}-text-emphasis);
--#{$prefix}btn-bg: var(--#{$prefix}#{$color}-bg-subtle);
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-text-emphasis);
@@ -134,7 +134,7 @@ p.arrow_button {
}
}
.btn-subtle-body {
--#{$prefix}btn-font-weight: #{$font-weight-bold};
--#{$prefix}btn-font-weight: #{$font-weight-medium};
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: var(--#{$prefix}border-color);
public/theme/boost/scss/moodle/courseoverview.scss
+64
View File
@@ -0,0 +1,64 @@
/*
* Course Overview page styles.
*/
$overviewdialogmaxwidth: 20rem !default;
#course-overview-page {
.table {
border-top: none;
}
table tbody td {
align-content: center;
// Buttons in the course overview.
.btn {
// Display buttons small by default inside the course overview table.
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius);
&:not(.dropdown-toggle) {
min-width: 6rem;
}
&:hover {
.badge.text-bg-primary {
color: var(--#{$prefix}body-color) !important; /* stylelint-disable-line declaration-no-important */
background-color: var(--#{$prefix}body-bg) !important; /* stylelint-disable-line declaration-no-important */
@include transition($btn-transition);
}
}
}
// Dropdowns in the course overview.
.dropdown:not(.completion-dropdown) {
.dropdown-toggle {
display: inline-flex;
justify-content: space-between;
align-items: center;
min-width: 5rem;
--#{$prefix}btn-font-weight: #{$font-weight-normal};
}
.dropdown-menu {
max-width: 20rem;
}
}
}
// Inline selects in the course overview.
.inplaceeditable-select {
display: inline-block;
}
.form-select {
padding-top: $btn-padding-y-sm;
padding-bottom: $btn-padding-y-sm;
}
// Activity icons in the course overview.
.activityiconcontainer {
width: map-get($iconsizes, 6);
height: map-get($iconsizes, 6);
max-height: map-get($iconsizes, 6);
max-width: map-get($iconsizes, 6);
margin-right: map-get($spacers, 2);
}
}
public/theme/boost/style/moodle.css
+62 -9
View File
@@ -31805,6 +31805,59 @@ table.calendartable caption {
margin: 10px 0 20px;
}
/*
* Course Overview page styles.
*/
#course-overview-page .table {
border-top: none;
}
#course-overview-page table tbody td {
align-content: center;
}
#course-overview-page table tbody td .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.8203125rem;
--bs-btn-border-radius: var(--bs-border-radius);
}
#course-overview-page table tbody td .btn:not(.dropdown-toggle) {
min-width: 6rem;
}
#course-overview-page table tbody td .btn:hover .badge.text-bg-primary {
color: var(--bs-body-color) !important; /* stylelint-disable-line declaration-no-important */
background-color: var(--bs-body-bg) !important; /* stylelint-disable-line declaration-no-important */
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
#course-overview-page table tbody td .btn:hover .badge.text-bg-primary {
transition: none;
}
}
#course-overview-page table tbody td .dropdown:not(.completion-dropdown) .dropdown-toggle {
display: inline-flex;
justify-content: space-between;
align-items: center;
min-width: 5rem;
--bs-btn-font-weight: 400;
}
#course-overview-page table tbody td .dropdown:not(.completion-dropdown) .dropdown-menu {
max-width: 20rem;
}
#course-overview-page .inplaceeditable-select {
display: inline-block;
}
#course-overview-page .form-select {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
#course-overview-page .activityiconcontainer {
width: 40px;
height: 40px;
max-height: 40px;
max-width: 40px;
margin-right: 0.5rem;
}
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
:target,
:focus {
@@ -37393,7 +37446,7 @@ p.arrow_button {
* Subtle buttons.
*/
.btn-subtle-primary {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-primary-text-emphasis);
--bs-btn-bg: var(--bs-primary-bg-subtle);
--bs-btn-active-color: var(--bs-primary-text-emphasis);
@@ -37408,7 +37461,7 @@ p.arrow_button {
}
.btn-subtle-secondary {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-secondary-text-emphasis);
--bs-btn-bg: var(--bs-secondary-bg-subtle);
--bs-btn-active-color: var(--bs-secondary-text-emphasis);
@@ -37423,7 +37476,7 @@ p.arrow_button {
}
.btn-subtle-success {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-success-text-emphasis);
--bs-btn-bg: var(--bs-success-bg-subtle);
--bs-btn-active-color: var(--bs-success-text-emphasis);
@@ -37438,7 +37491,7 @@ p.arrow_button {
}
.btn-subtle-info {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-info-text-emphasis);
--bs-btn-bg: var(--bs-info-bg-subtle);
--bs-btn-active-color: var(--bs-info-text-emphasis);
@@ -37453,7 +37506,7 @@ p.arrow_button {
}
.btn-subtle-warning {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-warning-text-emphasis);
--bs-btn-bg: var(--bs-warning-bg-subtle);
--bs-btn-active-color: var(--bs-warning-text-emphasis);
@@ -37468,7 +37521,7 @@ p.arrow_button {
}
.btn-subtle-danger {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-danger-text-emphasis);
--bs-btn-bg: var(--bs-danger-bg-subtle);
--bs-btn-active-color: var(--bs-danger-text-emphasis);
@@ -37483,7 +37536,7 @@ p.arrow_button {
}
.btn-subtle-light {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-light-text-emphasis);
--bs-btn-bg: var(--bs-light-bg-subtle);
--bs-btn-active-color: var(--bs-light-text-emphasis);
@@ -37498,7 +37551,7 @@ p.arrow_button {
}
.btn-subtle-dark {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-dark-text-emphasis);
--bs-btn-bg: var(--bs-dark-bg-subtle);
--bs-btn-active-color: var(--bs-dark-text-emphasis);
@@ -37513,7 +37566,7 @@ p.arrow_button {
}
.btn-subtle-body {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--bs-border-color);
public/theme/classic/style/moodle.css
+62 -9
View File
@@ -31805,6 +31805,59 @@ table.calendartable caption {
margin: 10px 0 20px;
}
/*
* Course Overview page styles.
*/
#course-overview-page .table {
border-top: none;
}
#course-overview-page table tbody td {
align-content: center;
}
#course-overview-page table tbody td .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.8203125rem;
--bs-btn-border-radius: var(--bs-border-radius);
}
#course-overview-page table tbody td .btn:not(.dropdown-toggle) {
min-width: 6rem;
}
#course-overview-page table tbody td .btn:hover .badge.text-bg-primary {
color: var(--bs-body-color) !important; /* stylelint-disable-line declaration-no-important */
background-color: var(--bs-body-bg) !important; /* stylelint-disable-line declaration-no-important */
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
#course-overview-page table tbody td .btn:hover .badge.text-bg-primary {
transition: none;
}
}
#course-overview-page table tbody td .dropdown:not(.completion-dropdown) .dropdown-toggle {
display: inline-flex;
justify-content: space-between;
align-items: center;
min-width: 5rem;
--bs-btn-font-weight: 400;
}
#course-overview-page table tbody td .dropdown:not(.completion-dropdown) .dropdown-menu {
max-width: 20rem;
}
#course-overview-page .inplaceeditable-select {
display: inline-block;
}
#course-overview-page .form-select {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
#course-overview-page .activityiconcontainer {
width: 40px;
height: 40px;
max-height: 40px;
max-width: 40px;
margin-right: 0.5rem;
}
/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
:target,
:focus {
@@ -37393,7 +37446,7 @@ p.arrow_button {
* Subtle buttons.
*/
.btn-subtle-primary {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-primary-text-emphasis);
--bs-btn-bg: var(--bs-primary-bg-subtle);
--bs-btn-active-color: var(--bs-primary-text-emphasis);
@@ -37408,7 +37461,7 @@ p.arrow_button {
}
.btn-subtle-secondary {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-secondary-text-emphasis);
--bs-btn-bg: var(--bs-secondary-bg-subtle);
--bs-btn-active-color: var(--bs-secondary-text-emphasis);
@@ -37423,7 +37476,7 @@ p.arrow_button {
}
.btn-subtle-success {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-success-text-emphasis);
--bs-btn-bg: var(--bs-success-bg-subtle);
--bs-btn-active-color: var(--bs-success-text-emphasis);
@@ -37438,7 +37491,7 @@ p.arrow_button {
}
.btn-subtle-info {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-info-text-emphasis);
--bs-btn-bg: var(--bs-info-bg-subtle);
--bs-btn-active-color: var(--bs-info-text-emphasis);
@@ -37453,7 +37506,7 @@ p.arrow_button {
}
.btn-subtle-warning {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-warning-text-emphasis);
--bs-btn-bg: var(--bs-warning-bg-subtle);
--bs-btn-active-color: var(--bs-warning-text-emphasis);
@@ -37468,7 +37521,7 @@ p.arrow_button {
}
.btn-subtle-danger {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-danger-text-emphasis);
--bs-btn-bg: var(--bs-danger-bg-subtle);
--bs-btn-active-color: var(--bs-danger-text-emphasis);
@@ -37483,7 +37536,7 @@ p.arrow_button {
}
.btn-subtle-light {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-light-text-emphasis);
--bs-btn-bg: var(--bs-light-bg-subtle);
--bs-btn-active-color: var(--bs-light-text-emphasis);
@@ -37498,7 +37551,7 @@ p.arrow_button {
}
.btn-subtle-dark {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-dark-text-emphasis);
--bs-btn-bg: var(--bs-dark-bg-subtle);
--bs-btn-active-color: var(--bs-dark-text-emphasis);
@@ -37513,7 +37566,7 @@ p.arrow_button {
}
.btn-subtle-body {
--bs-btn-font-weight: 700;
--bs-btn-font-weight: 500;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--bs-border-color);