From a80f4a4c29f09e1c9a539967c4d6b30bcde4cd0d Mon Sep 17 00:00:00 2001 From: Marcin Calka <6230943+marcinca@users.noreply.github.com> Date: Tue, 15 Aug 2023 12:45:35 +0100 Subject: [PATCH 1/3] DI-5598 Fix templates including reports 1. Fixed page column layouts 2. Fixed slide in trigger and header positioning 3. Added extra styling for some incourse navigation action buttons 4. Switched on prev next navigation (theme config) 5. Fixed show password at login --- classes/output/core_renderer.php | 1 + config.php | 253 ++++++++-------- lang/en/theme_nhse.php | 4 +- layout/reports.php | 41 +++ scss/nhse.scss | 280 ++++++++++++------ scss/nhse/courseindex.scss | 6 + templates/columns1.mustache | 17 +- templates/columns2.mustache | 24 +- templates/core/loginform.mustache | 13 +- templates/core/navbar.mustache | 4 +- .../core_course/activity_navigation.mustache | 101 +++++++ templates/drawers.mustache | 2 +- templates/reports.mustache | 75 +++++ 13 files changed, 575 insertions(+), 246 deletions(-) create mode 100644 layout/reports.php create mode 100644 scss/nhse/courseindex.scss create mode 100644 templates/core_course/activity_navigation.mustache create mode 100644 templates/reports.mustache diff --git a/classes/output/core_renderer.php b/classes/output/core_renderer.php index 384b82c..1f13f4d 100644 --- a/classes/output/core_renderer.php +++ b/classes/output/core_renderer.php @@ -61,6 +61,7 @@ public function header() // } // $html = str_replace('nhsuk-header__default', 'nhsuk-header__light', $html); // $html = str_replace('navbar__default', 'navbar__light', $html); + return $html; } diff --git a/config.php b/config.php index 91a179f..ec63427 100755 --- a/config.php +++ b/config.php @@ -58,135 +58,135 @@ }; $THEME->layouts = [ -// // Most backwards compatible layout without the blocks. -// 'base' => array( -// 'file' => 'drawers.php', -// 'regions' => array(), -// ), -// // Standard layout with blocks. -// 'standard' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // Main course page. -// 'course' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// 'options' => array('langmenu' => true), -// ), -// 'coursecategory' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // Part of course, typical for modules - default page layout if $cm specified in require_login(). -// 'incourse' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // The site home page. -// 'frontpage' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// 'options' => array('nonavbar' => true), -// ), -// // Server administration scripts. -// 'admin' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // My courses page. -// 'mycourses' => array( -// 'file' => 'drawers.php', -// 'regions' => ['side-pre'], -// 'defaultregion' => 'side-pre', -// 'options' => array('nonavbar' => true), -// ), -// // My dashboard page. -// 'mydashboard' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// 'options' => array('nonavbar' => true, 'langmenu' => true), -// ), -// // My public page. -// 'mypublic' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), + // Most backwards compatible layout without the blocks. + 'base' => array( + 'file' => 'drawers.php', + 'regions' => array(), + ), + // Standard layout with blocks. + 'standard' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // Main course page. + 'course' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + 'options' => array('langmenu' => true), + ), + 'coursecategory' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // Part of course, typical for modules - default page layout if $cm specified in require_login(). + 'incourse' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // The site home page. + 'frontpage' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + 'options' => array('nonavbar' => true), + ), + // Server administration scripts. + 'admin' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // My courses page. + 'mycourses' => array( + 'file' => 'drawers.php', + 'regions' => ['side-pre'], + 'defaultregion' => 'side-pre', + 'options' => array('nonavbar' => true), + ), + // My dashboard page. + 'mydashboard' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + 'options' => array('nonavbar' => true, 'langmenu' => true), + ), + // My public page. + 'mypublic' => array( + 'file' => 'drawers.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), 'login' => array( 'file' => 'login.php', 'regions' => array(), 'options' => array('langmenu' => true), ), -// // Pages that appear in pop-up windows - no navigation, no blocks, no header and bare activity header. -// 'popup' => array( -// 'file' => 'columns1.php', -// 'regions' => array(), -// 'options' => array( -// 'nofooter' => true, -// 'nonavbar' => true, -// 'activityheader' => [ -// 'notitle' => true, -// 'nocompletion' => true, -// 'nodescription' => true -// ] -// ) -// ), -// // No blocks and minimal footer - used for legacy frame layouts only! -// 'frametop' => array( -// 'file' => 'columns1.php', -// 'regions' => array(), -// 'options' => array( -// 'nofooter' => true, -// 'nocoursefooter' => true, -// 'activityheader' => [ -// 'nocompletion' => true -// ] -// ), -// ), -// // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible. -// 'embedded' => array( -// 'file' => 'embedded.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // Used during upgrade and install, and for the 'This site is undergoing maintenance' message. -// // This must not have any blocks, links, or API calls that would lead to database or cache interaction. -// // Please be extremely careful if you are modifying this layout. -// 'maintenance' => array( -// 'file' => 'maintenance.php', -// 'regions' => array(), -// ), -// // Should display the content and basic headers only. -// 'print' => array( -// 'file' => 'columns1.php', -// 'regions' => array(), -// 'options' => array('nofooter' => true, 'nonavbar' => false, 'noactivityheader' => true), -// ), -// // The pagelayout used when a redirection is occuring. -// 'redirect' => array( -// 'file' => 'embedded.php', -// 'regions' => array(), -// ), -// // The pagelayout used for reports. -// 'report' => array( -// 'file' => 'drawers.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre', -// ), -// // The pagelayout used for safebrowser and securewindow. -// 'secure' => array( -// 'file' => 'secure.php', -// 'regions' => array('side-pre'), -// 'defaultregion' => 'side-pre' -// ) + // Pages that appear in pop-up windows - no navigation, no blocks, no header and bare activity header. + 'popup' => array( + 'file' => 'reports.php', + 'regions' => array(), + 'options' => array( + 'nofooter' => true, + 'nonavbar' => true, + 'activityheader' => [ + 'notitle' => true, + 'nocompletion' => true, + 'nodescription' => true + ] + ) + ), + // No blocks and minimal footer - used for legacy frame layouts only! + 'frametop' => array( + 'file' => 'columns1.php', + 'regions' => array(), + 'options' => array( + 'nofooter' => true, + 'nocoursefooter' => true, + 'activityheader' => [ + 'nocompletion' => true + ] + ), + ), + // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible. + 'embedded' => array( + 'file' => 'embedded.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // Used during upgrade and install, and for the 'This site is undergoing maintenance' message. + // This must not have any blocks, links, or API calls that would lead to database or cache interaction. + // Please be extremely careful if you are modifying this layout. + 'maintenance' => array( + 'file' => 'maintenance.php', + 'regions' => array(), + ), + // Should display the content and basic headers only. + 'print' => array( + 'file' => 'columns1.php', + 'regions' => array(), + 'options' => array('nofooter' => true, 'nonavbar' => false, 'noactivityheader' => true), + ), + // The pagelayout used when a redirection is occuring. + 'redirect' => array( + 'file' => 'embedded.php', + 'regions' => array(), + ), + // The pagelayout used for reports. + 'report' => array( + 'file' => 'columns1.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre', + ), + // The pagelayout used for safebrowser and securewindow. + 'secure' => array( + 'file' => 'secure.php', + 'regions' => array('side-pre'), + 'defaultregion' => 'side-pre' + ) ]; $THEME->enable_dock = false; @@ -199,7 +199,10 @@ $THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV; $THEME->iconsystem = \core\output\icon_system::FONTAWESOME; $THEME->haseditswitch = true; -$THEME->usescourseindex = true; +// A new theme config 'removedprimarynavitems' allows a theme to customise primary navigation by specifying the list of items to remove. +//$THEME->removedprimarynavitems = [] +// A new theme config 'usescourseindex' allows a theme to specify whether it implements and uses course index, shows modules pagination if unset or false +$THEME->usescourseindex = getenv("USES_COURSE_INDEX"); // Control displaying nhse titles (Boost is set to true). $THEME->activityheaderconfig = [ diff --git a/lang/en/theme_nhse.php b/lang/en/theme_nhse.php index f9a50e0..1122701 100644 --- a/lang/en/theme_nhse.php +++ b/lang/en/theme_nhse.php @@ -36,7 +36,7 @@ $string['brandcolor_desc'] = 'The accent colour.'; $string['bootswatch'] = 'Bootswatch'; $string['bootswatch_desc'] = 'A bootswatch is a set of Bootstrap variables and css to style Bootstrap'; -$string['choosereadme'] = 'Boost is a modern highly-customisable theme. This theme is intended to be used directly, or as a parent theme when creating new themes utilising Bootstrap 4.'; +$string['choosereadme'] = 'The NHSE is a modern highly-customisable theme based on Moodle Boost ans .'; $string['configtitle'] = 'NHSE'; $string['copyright'] = 'Copyright notice'; $string['copyright_desc'] = 'Anything you add here will be prepended with © and the year'; @@ -80,7 +80,7 @@ $string['preset_desc'] = 'Pick a preset to broadly change the look of the theme.'; $string['presetfiles'] = 'Additional theme preset files'; $string['presetfiles_desc'] = 'Preset files can be used to dramatically alter the appearance of the theme. See Boost presets for information on creating and sharing your own preset files, and see the Presets repository for presets that others have shared.'; -$string['privacy:metadata'] = 'The Boost theme does not store any personal data about any user.'; +$string['privacy:metadata'] = 'The NHSE theme does not store any personal data about any user.'; $string['previoussection'] = 'Previous'; $string['privacy:metadata'] = 'The Moodle NHSE theme does not store any personal data about any user.'; $string['privacy:metadata:preference:draweropenblock'] = 'The user\'s preference for hiding or showing the drawer with blocks.'; diff --git a/layout/reports.php b/layout/reports.php new file mode 100644 index 0000000..7226c93 --- /dev/null +++ b/layout/reports.php @@ -0,0 +1,41 @@ +. + +/** + * A one column layout for the boost theme. + * + * @package theme_boost + * @copyright 2016 Damyon Wiese + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ + +defined('MOODLE_INTERNAL') || die(); + +$bodyattributes = $OUTPUT->body_attributes([]); +$templatecontext = [ + 'sitename' => format_string($SITE->shortname, true, ['context' => context_course::instance(SITEID), "escape" => false]), + 'output' => $OUTPUT, + 'bodyattributes' => $bodyattributes, +]; + +if (empty($PAGE->layout_options['noactivityheader'])) { + $header = $PAGE->activityheader; + $renderer = $PAGE->get_renderer('core'); + $templatecontext['headercontent'] = $header->export_for_template($renderer); +} + +echo $OUTPUT->render_from_template('theme_nhse/reports', $templatecontext); + diff --git a/scss/nhse.scss b/scss/nhse.scss index 5ec3715..d480785 100644 --- a/scss/nhse.scss +++ b/scss/nhse.scss @@ -19,7 +19,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } - ul { @extend %nhsuk-list; @extend %nhsuk-list--bullet; @@ -30,22 +29,9 @@ ol { @extend %nhsuk-list--number; } -.coursebox { - p { - font-size: initial; - line-height: initial; - } -} +/* Import NHSE scss directory partials */ -.course_category_tree { - .category { - >.info { - >.categoryname { - font-size: inherit; - } - } - } -} +@import "nhse/courseindex"; /** * Button styles @@ -63,8 +49,38 @@ ol { } /** - * Cards and drawers + * Body styles + */ +body.limitedwidth { + #page.drawers .main-inner { + max-width: 960px; + } +} + +/** + * Background variations */ + +.bg-dark { + color: $btn-primary-text; + background-color: $btn-primary-background !important; + * { + color: $btn-primary-text !important; + } +} + +.bg-light { + color: $color_nhsuk-grey-1; + background-color: $btn-default-background !important; + > * { + color: $color_nhsuk-grey-1 !important; + } +} + +/** + * Cards and box styles + */ + .card { border: none; border-radius: 0; @@ -73,6 +89,94 @@ ol { margin: 0; } +.coursebox { + p { + font-size: initial; + line-height: initial; + } +} + +.course_category_tree { + .category { + >.info { + >.categoryname { + font-size: inherit; + } + } + } +} + +.dashboard-card-deck { + .dashboard-card { + background-color: $color_nhsuk-white; + .dashboard-card-img { + border-radius: 0; + } + } +} + +/** + * Drawer styles + */ + +.drawer-toggles { + .drawer-toggler { + top: calc(83px + 0.7rem) + } +} + +@media (min-width: 992px) { + .drawer-toggles { + .drawer-toggler { + top: calc(140px + 0.7rem) + } + } +} + +.drawercontent { + height: calc(100% - 124px) +} + +.drawers .block_myoverview>.card-body { + padding: 1.25rem!important; +} + +.dropdown-menu { + min-width: 20rem; +} + +[data-region=right-hand-drawer].drawer { + top: 84px; +} + +@media (min-width: 640px) { + [data-region=right-hand-drawer].drawer { + top: 92px; + } +} + +/** + * Header styles + */ + +.header-maxwidth { + max-width: 960px; +} + +@media (min-width: 768px) { + .header-maxwidth { + padding-left: 0; + } +} + +.icon { + font-size: 20px; + width: 20px; + height: 20px; + padding-top:0; + padding-bottom:0; +} + /** * Page and headings */ @@ -83,7 +187,6 @@ ol { flex-direction: column; #page { - padding-top: 0; margin-top: 0; } @@ -92,14 +195,26 @@ ol { } } -body.limitedwidth { - #page.drawers .main-inner { - max-width: 960px; +.pagelayout-mydashboard, +.pagelayout-mycourses +{ + #page-wrapper { + #page { + padding-top: 0; + } } } -.header-maxwidth { - max-width: 960px; +.pagelayout-login, +.pagelayout-popup, +.pagelayout-embedded, +.pagelayout-redirect +{ + #page-wrapper { + #page { + padding-top: 60px; + } + } } @media (min-width: 768px) { @@ -113,9 +228,13 @@ body.limitedwidth { padding-right: 0; } } +} - .header-maxwidth { - padding-left: 0; +@media (max-width: 768px) { + #page-wrapper { + #page { + margin-top: 60px; + } } } @@ -134,28 +253,42 @@ body.limitedwidth { } } -.bg-dark { - color: $btn-primary-text; - background-color: $btn-primary-background !important; - * { - color: $btn-primary-text !important; - } -} +#frontpage-available-course-list { + .coursebox { + @extend .nhsuk-card__content; + border-radius: 0; + border-top: 1px solid $color_nhsuk-grey-4; -.bg-light { - color: $color_nhsuk-grey-1; - background-color: $btn-default-background !important; - > * { - color: $color_nhsuk-grey-1 !important; + & > .info { + @extend .nhsuk-card--care__heading; + & > .coursename { + @extend .nhsuk-card--care__heading; + font-size: 1.5rem; + font-weight: bold; + + & a { + color: inherit; + } + } + } + & > .content { + @extend .nhsuk-card__content; + } } } /** * Header navigation and tabs */ +@media (max-width: 40.0525em) { + .nhsuk-header__container { + padding: 20px; + } +} .nhsuk-header__navigation-link { color: $color_nhsuk-white; + white-space: nowrap; &:visited { color: $color_nhsuk-white; @@ -251,12 +384,16 @@ body.limitedwidth { } } -.icon { - font-size: 20px; - width: 20px; - height: 20px; - padding-top:0; - padding-bottom:0; +@media (min-width: 992px) { + .path-admin-reportbuilder { + &.pagelayout-popup { + .dynamictabs { + .nav-tabs { + padding-top: 0; + } + } + } + } } .popover-region-header-container { @@ -265,10 +402,6 @@ body.limitedwidth { padding-bottom: 10px; } -.drawerheader { - height: 84px; -} - .navbar-expand { .navbar-nav { margin-top: .2em; @@ -465,35 +598,9 @@ body.limitedwidth { } } -.drawers .block_myoverview>.card-body { - padding: 1.25rem!important; -} - -.dropdown-menu { - min-width: 20rem; -} - -#frontpage-available-course-list { - .coursebox { - @extend .nhsuk-card__content; - border-radius: 0; - border-top: 1px solid $color_nhsuk-grey-4; - - & > .info { - @extend .nhsuk-card--care__heading; - & > .coursename { - @extend .nhsuk-card--care__heading; - font-size: 1.5rem; - font-weight: bold; - - & a { - color: inherit; - } - } - } - & > .content { - @extend .nhsuk-card__content; - } +#navbuttons { + input[type="submit"] { + @extend .nhsuk-button--small; } } @@ -516,10 +623,6 @@ body.limitedwidth { } } -[data-region=right-hand-drawer].drawer { - top: 84px; -} - .nhsuk-header__service-name { display: none; } @@ -546,9 +649,6 @@ body.limitedwidth { } @media (min-width: 640px) { - [data-region=right-hand-drawer].drawer { - top: 92px; - } .navbar { .divider { display: block; @@ -583,19 +683,11 @@ body.limitedwidth { display: none !important; } [data-region=right-hand-drawer].drawer { - top: 147px; + top: 148px; } .drawer-left, .drawer-right { - top: 147px; - } -} - -.dashboard-card-deck { - .dashboard-card { - background-color: $color_nhsuk-white; - .dashboard-card-img { - border-radius: 0; - } + top: 148px; + height: calc(100vh - 124px) } } diff --git a/scss/nhse/courseindex.scss b/scss/nhse/courseindex.scss new file mode 100644 index 0000000..fbb1855 --- /dev/null +++ b/scss/nhse/courseindex.scss @@ -0,0 +1,6 @@ +.courseindex { + .courseindex-item { + padding: 0.25rem 0.5rem; + line-height: 1.5rem; + } +} diff --git a/templates/columns1.mustache b/templates/columns1.mustache index c93e881..f033056 100644 --- a/templates/columns1.mustache +++ b/templates/columns1.mustache @@ -41,14 +41,12 @@ {{> core/local/toast/wrapper}} -
+
{{{ output.standard_top_of_body_html }}} - - {{> theme_boost/navbar }} + {{> theme_nhse/header }}
- {{{ output.breadcrumbs }}}
@@ -60,20 +58,25 @@ {{{ output.activity_navigation }}} {{{ output.course_content_footer }}}
+ {{#hasblocks}} +
+ {{{ addblockbutton }}} + {{{ sidepreblocks }}} +
+ {{/hasblocks}}
- {{{ output.standard_after_main_region_html }}} + {{> theme_nhse/footer }}
{{{ output.standard_end_of_body_html }}} -{{> theme_nhse/footer }} {{#js}} M.util.js_pending('theme_boost/loader'); -require(['theme_boost/loader'], function() { + require(['theme_boost/loader'], function() { M.util.js_complete('theme_boost/loader'); }); {{/js}} diff --git a/templates/columns2.mustache b/templates/columns2.mustache index 3cc4075..29b551e 100644 --- a/templates/columns2.mustache +++ b/templates/columns2.mustache @@ -53,26 +53,24 @@ {{> core/local/toast/wrapper}} -
+
{{{ output.standard_top_of_body_html }}} - - {{> theme_boost/navbar }} + {{> theme_nhse/header }}
{{{ output.full_header }}} - {{{ output.breadcrumbs }}} {{#secondarymoremenu}}
{{> core/moremenu}}
{{/secondarymoremenu}} -
+
{{#hasregionmainsettingsmenu}} -
-
{{{ regionmainsettingsmenu }}}
-
+
+
{{{ regionmainsettingsmenu }}}
+
{{/hasregionmainsettingsmenu}}
@@ -92,10 +90,10 @@
{{#hasblocks}} -
- {{{ addblockbutton }}} - {{{ sidepreblocks }}} -
+
+ {{{ addblockbutton }}} + {{{ sidepreblocks }}} +
{{/hasblocks}}
@@ -108,7 +106,7 @@ {{#js}} M.util.js_pending('theme_boost/loader'); -require(['theme_boost/loader', 'theme_boost/drawer'], function(Loader, Drawer) { + require(['theme_boost/loader', 'theme_boost/drawer'], function(Loader, Drawer) { Drawer.init(); M.util.js_complete('theme_boost/loader'); }); diff --git a/templates/core/loginform.mustache b/templates/core/loginform.mustache index ee45160..2916ad2 100644 --- a/templates/core/loginform.mustache +++ b/templates/core/loginform.mustache @@ -308,13 +308,22 @@
{{#js}} + var loginField = document.getElementById('password'); + var showPassword = document.getElementById('showPassword'); + showPassword.addEventListener('click', function () { + if (loginField.getAttribute("type") == 'password') { + loginField.setAttribute("type", "text"); + } else { + loginField.setAttribute("type", "password"); + } + }); {{^error}} {{#autofocusform}} var userNameField = document.getElementById('username'); if (userNameField.value.length == 0) { - userNameField.focus(); + userNameField.focus(); } else { - document.getElementById('password').focus(); + document.getElementById('password').focus(); } {{/autofocusform}} {{/error}} diff --git a/templates/core/navbar.mustache b/templates/core/navbar.mustache index 05a5213..05778f6 100644 --- a/templates/core/navbar.mustache +++ b/templates/core/navbar.mustache @@ -66,8 +66,8 @@ -{{#activitylist}} - {{> core/url_select }} -{{/activitylist}} +{{! Commented out as we use the LH side panel popup instead in boost/nhse Moodle 4.0+ }} +{{! {#activitylist} }} +{{!> core/url_select }} +{{!/activitylist}}