Skip to content

Commit

Permalink
Merge pull request #38 from NHSLeadership/DI-5563
Browse files Browse the repository at this point in the history
DI-5563 Completion marking and course navigation
  • Loading branch information
marcinca authored Aug 3, 2023
2 parents dde3317 + 38cfd81 commit 21aef2a
Show file tree
Hide file tree
Showing 10 changed files with 374 additions and 57 deletions.
2 changes: 1 addition & 1 deletion config.php
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@
$THEME->haseditswitch = true;
$THEME->usescourseindex = true;

// Control displaying nhse titles.
// Control displaying nhse titles (Boost is set to true).
$THEME->activityheaderconfig = [
'notitle' => false
];
11 changes: 11 additions & 0 deletions scss/components/button/_button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
Half size button with half size margin
*/
.nhsuk-button--small {
@extend .nhsuk-button;
box-shadow: 0 2px 0 $nhsuk-box-shadow-color;
font-size: 0.95rem;
margin-bottom: 18px;
padding: 4px 6px;
transition: none;
}
81 changes: 44 additions & 37 deletions scss/nhse.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 600;
}

.coursebox {

ul,
ol,
p {
font-size: initial;
line-height: initial;
}
}
ul,
ol,
p {
font-size: initial;
line-height: initial;
}

.course_category_tree {
.category {
Expand All @@ -39,6 +36,26 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
}
}

/**
* Button styles
*/
.btn {
&:not(.btn-link):not(.btn-icon):not(.search-icon):not(.dropdown-toggle):not(.icon-no-margin) {
@extend .nhsuk-button--small;
}
}

/**
* Cards and drawers
*/
.card {
border: none;
border-radius: 0;
-moz-border-radius: 0;
background-color: $color_nhsuk-grey-5;
margin: 0;
}

/**
* Page and headings
*/
Expand All @@ -49,7 +66,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
flex-direction: column;

#page {
padding-top: 3rem;
padding-top: 0;
margin-top: 0;
}

Expand Down Expand Up @@ -111,7 +128,7 @@ body.limitedwidth {
.bg-light {
color: $color_nhsuk-grey-1;
background-color: $btn-default-background !important;
* {
> * {
color: $color_nhsuk-grey-1 !important;
}
}
Expand Down Expand Up @@ -209,8 +226,12 @@ body.limitedwidth {
height: 2.0em;
}

.navbar-expand .navbar-nav .nav-link {
padding-top: 15px;
.navbar-expand {
.navbar-nav {
.nav-link {
padding-top: 15px;
}
}
}

.icon {
Expand Down Expand Up @@ -242,6 +263,12 @@ body.limitedwidth {
margin-left: 0;
}

.nav-link {
padding: 0.6rem 1rem;
font-size: 1rem;
line-height: 1.5;
}

.navbar {
color: $btn-primary-text;
background-color: $btn-primary-background;
Expand Down Expand Up @@ -415,30 +442,6 @@ body.limitedwidth {
}
}

/**
* Button styles
*/

.btn-primary:not(.search-icon),
.btn-secondary:not(.search-icon) {
@extend .nhsuk-button;
}

.btn-secondary:not(.search-icon) {
@extend .nhsuk-button--secondary;
}

/**
* Cards and drawers
*/
.card {
border: none;
border-radius: 0;
-moz-border-radius: 0;
background-color: $color_nhsuk-grey-5;
margin: 0;
}

.drawers .block_myoverview>.card-body {
padding: 1.25rem!important;
}
Expand Down Expand Up @@ -486,6 +489,10 @@ body.limitedwidth {
display: none;
}

.nhsuk-header__navigation-item {
border-top: none;
}

.popover-region-toggle::before, .popover-region-toggle::after {
display: none;
}
Expand Down
3 changes: 3 additions & 0 deletions scss/nhsuk.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,6 @@
@import "../node_modules/nhsuk-frontend/packages/components/warning-callout/warning-callout";
//@import "../node_modules/nhsuk-frontend/packages/components/character-count/character-count";
//@import "../node_modules/nhsuk-frontend/packages/components/tabs/tabs";

// Custom extras (for Moodle)
@import "components/button/button";
85 changes: 85 additions & 0 deletions templates/core/activity_header.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/activity_header
Activity header template.
Context variables required for this template:
* title - The title of the activity module
* description - The intro for the module
* completion - The completion info if available for the the module as acquired via the activity_information method
* additional_items - Any additional URL select navigation that needs to show up in the header
Example context (json):
{
"title": "Assignment 1",
"description": "The assignment does something",
"completion": "<div class='activitycompletion'>Some activity completion criteria</div>",
"additional_items": {
"id": "url_select_test",
"action": "https://example.com/post",
"formid": "url_select_form",
"sesskey": "sesskey",
"label": "core/url_select",
"helpicon": {
"title": "Help with something",
"text": "Help with something",
"url": "http://example.org/help",
"linktext": "",
"icon":{
"extraclasses": "iconhelp",
"attributes": [
{"name": "src", "value": "../../../pix/help.svg"},
{"name": "alt", "value": "Help icon"}
]
}
},
"showbutton": "Go",
"options": [{
"name": "Group 1", "isgroup": true, "options":
[
{"name": "Item 1", "isgroup": false, "value": "1"},
{"name": "Item 2", "isgroup": false, "value": "2"}
]},
{"name": "Group 2", "isgroup": true, "options":
[
{"name": "Item 3", "isgroup": false, "value": "3"},
{"name": "Item 4", "isgroup": false, "value": "4"}
]}],
"disabled": false,
"title": "Some cool title"
}
}
}}
<span id="maincontent"></span>
<div class="activity-header" data-for="page-activity-header">
{{#completion}}
<span class="sr-only">{{#str}} overallaggregation, completion {{/str}}</span>
{{{completion}}}
{{/completion}}
{{#description}}
<div class="activity-description" id="intro">
{{{description}}}
</div>
{{/description}}
</div>
{{#additional_items}}
<nav aria-label="{{#str}} additionalcustomnav, core {{/str}}">
{{> core/url_select}}
</nav>
{{/additional_items}}
82 changes: 82 additions & 0 deletions templates/core_course/activity_info.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_course/activity_info
Container to display activity information such as:
- Activity dates
- Activity completion requirements (automatic completion)
- Manual completion button
Example context (json):
{
"activityname": "Course announcements",
"hascompletion": true,
"uservisible": true,
"hasdates": true,
"isautomatic": true,
"istrackeduser": true,
"showmanualcompletion": true,
"activitydates": [
{
"label": "Opens:",
"timestamp": 1293876000
}
],
"completiondetails": [
{
"statuscomplete": 1,
"description": "Viewed"
},
{
"statusincomplete": 1,
"description": "Receive a grade"
}
]
}
}}
<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}}">
{{#completiondetails}}
{{> core_course/completion_automatic }}
{{/completiondetails}}
</div>
{{/isautomatic}}
{{^isautomatic}}
{{#showmanualcompletion}}
{{> core_course/completion_manual }}
{{/showmanualcompletion}}
{{/isautomatic}}
</div>
{{/uservisible}}
{{/hascompletion}}

{{#hasdates}}
<div data-region="activity-dates" class="activity-dates">
<div class="description-inner">
{{#activitydates}}
{{>core_course/activity_date}}
{{/activitydates}}
</div>
</div>
{{/hasdates}}
</div>
65 changes: 65 additions & 0 deletions templates/core_course/completion_automatic.mustache
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core_course/completion_automatic
Template for displaying an automatic completion rule and its status.
Example context (json):
{
"statuscomplete": 1,
"description": "View",
"istrackeduser": true,
"accessibledescription": "Done: View (Set by Admin User)"
}
}}
{{#istrackeduser}}
{{#statuscomplete}}
<span class="badge badge-pill alert-success icon-no-margin" role="listitem" {{!
}}{{#accessibledescription}}{{!
}}title="{{.}}" {{!
}}aria-label="{{.}}" {{!
}}{{/accessibledescription}}>
{{#pix}}i/checked{{/pix}}
<strong>{{#str}}completion_automatic:done, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
</span>
{{/statuscomplete}}
{{#statuscompletefail}}
<span class="badge badge-pill alert-danger icon-no-margin" role="listitem" {{!
}}{{#accessibledescription}}{{!
}}title="{{.}}" {{!
}}aria-label="{{.}}" {{!
}}{{/accessibledescription}}>
{{#pix}}e/cancel{{/pix}}
<strong>{{#str}}completion_automatic:failed, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
</span>
{{/statuscompletefail}}
{{#statusincomplete}}
<span class="badge badge-pill badge-light" role="listitem" {{!
}}{{#accessibledescription}}{{!
}}title="{{.}}" {{!
}}aria-label="{{.}}" {{!
}}{{/accessibledescription}}>
<strong>{{#str}}completion_automatic:todo, core_course{{/str}}</strong> <span class="font-weight-normal">{{description}}</span>
</span>
{{/statusincomplete}}
{{/istrackeduser}}
{{^istrackeduser}}
<span class="badge badge-pill badge-light" role="listitem">
<span class="font-weight-normal">{{description}}</span>
</span>
{{/istrackeduser}}
Loading

0 comments on commit 21aef2a

Please sign in to comment.