+
{{sectiontitle}}
{{/sectiontitle}}
diff --git a/public/lib/classes/output/local/properties/button.php b/public/lib/classes/output/local/properties/button.php
index a78e80ea4dc..67c4133893d 100644
--- a/public/lib/classes/output/local/properties/button.php
+++ b/public/lib/classes/output/local/properties/button.php
@@ -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',
};
}
}
diff --git a/public/mod/assign/classes/courseformat/overview.php b/public/mod/assign/classes/courseformat/overview.php
index 8ddf8173859..f1bec6a3468 100644
--- a/public/mod/assign/classes/courseformat/overview.php
+++ b/public/mod/assign/classes/courseformat/overview.php
@@ -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(
diff --git a/public/mod/choice/classes/courseformat/overview.php b/public/mod/choice/classes/courseformat/overview.php
index 792bffb688f..4e2272a676e 100644
--- a/public/mod/choice/classes/courseformat/overview.php
+++ b/public/mod/choice/classes/courseformat/overview.php
@@ -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(
diff --git a/public/mod/data/classes/courseformat/overview.php b/public/mod/data/classes/courseformat/overview.php
index fa6e42ded8a..af3426dc4ef 100644
--- a/public/mod/data/classes/courseformat/overview.php
+++ b/public/mod/data/classes/courseformat/overview.php
@@ -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(
diff --git a/public/mod/feedback/classes/courseformat/overview.php b/public/mod/feedback/classes/courseformat/overview.php
index 993982c9f7f..522c86e7d36 100644
--- a/public/mod/feedback/classes/courseformat/overview.php
+++ b/public/mod/feedback/classes/courseformat/overview.php
@@ -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(
diff --git a/public/mod/glossary/classes/courseformat/overview.php b/public/mod/glossary/classes/courseformat/overview.php
index 74415eb334b..99813699d0f 100644
--- a/public/mod/glossary/classes/courseformat/overview.php
+++ b/public/mod/glossary/classes/courseformat/overview.php
@@ -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'),
],
);
diff --git a/public/mod/h5pactivity/classes/courseformat/overview.php b/public/mod/h5pactivity/classes/courseformat/overview.php
index 5c152416c56..9cb170d03fc 100644
--- a/public/mod/h5pactivity/classes/courseformat/overview.php
+++ b/public/mod/h5pactivity/classes/courseformat/overview.php
@@ -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);
diff --git a/public/mod/lesson/classes/courseformat/overview.php b/public/mod/lesson/classes/courseformat/overview.php
index 54ad4a0013f..21dd8b0e8a0 100644
--- a/public/mod/lesson/classes/courseformat/overview.php
+++ b/public/mod/lesson/classes/courseformat/overview.php
@@ -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,
);
}
}
diff --git a/public/mod/workshop/classes/courseformat/overview.php b/public/mod/workshop/classes/courseformat/overview.php
index 3e01769787a..6e3c30be4aa 100644
--- a/public/mod/workshop/classes/courseformat/overview.php
+++ b/public/mod/workshop/classes/courseformat/overview.php
@@ -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()],
);
}
diff --git a/public/theme/boost/scss/moodle.scss b/public/theme/boost/scss/moodle.scss
index 07945e83a00..a8f0f5ff182 100644
--- a/public/theme/boost/scss/moodle.scss
+++ b/public/theme/boost/scss/moodle.scss
@@ -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";
diff --git a/public/theme/boost/scss/moodle/buttons.scss b/public/theme/boost/scss/moodle/buttons.scss
index 39aacb9a5e3..935c6e2a19e 100644
--- a/public/theme/boost/scss/moodle/buttons.scss
+++ b/public/theme/boost/scss/moodle/buttons.scss
@@ -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);
diff --git a/public/theme/boost/scss/moodle/courseoverview.scss b/public/theme/boost/scss/moodle/courseoverview.scss
new file mode 100644
index 00000000000..782792fae94
--- /dev/null
+++ b/public/theme/boost/scss/moodle/courseoverview.scss
@@ -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);
+ }
+}
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index 9ac72d65367..4bed585c574 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -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);
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index 569b141596c..933aa304a10 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -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);