From 5da1a6f0859a224da85b25d3f10c1f5b62f7ef48 Mon Sep 17 00:00:00 2001 From: Frank C <115793157+frank-hee@users.noreply.github.com> Date: Tue, 3 Jun 2025 16:29:59 +0100 Subject: [PATCH 1/9] updated scss and layout files to rationalise .nhsuk overrides --- .gitignore | 3 + .../Styles/index.scss | 46 +- .../Styles/layout.scss | 97 +- .../Styles/nhsuk.scss | 149 + .../SelfAssessments/_Layout.cshtml | 32 +- .../Views/Shared/_Layout.cshtml | 32 +- .../appsettings.Development.json | 73 - .../appsettings.Test.json | 27 - DigitalLearningSolutions.Web/web.config | 14 - DigitalLearningSolutions.Web/yarn.lock | 6434 ----------------- 10 files changed, 190 insertions(+), 6717 deletions(-) delete mode 100644 DigitalLearningSolutions.Web/appsettings.Development.json delete mode 100644 DigitalLearningSolutions.Web/appsettings.Test.json delete mode 100644 DigitalLearningSolutions.Web/web.config delete mode 100644 DigitalLearningSolutions.Web/yarn.lock diff --git a/.gitignore b/.gitignore index 1a70475b0e..947dd8c60a 100644 --- a/.gitignore +++ b/.gitignore @@ -512,3 +512,6 @@ DigitalLearningSolutions.Web/Views/Shared/Components/SelectList/Default.cshtml DigitalLearningSolutions.Web/Views/Shared/Components/SingleCheckbox/Default.cshtml DigitalLearningSolutions.Web/Views/Shared/Components/TextArea/Default.cshtml DigitalLearningSolutions.Web/Views/Shared/Components/TextInput/Default.cshtml +/DigitalLearningSolutions.Web/appsettings.Test.json +/DigitalLearningSolutions.Web/web.config +/DigitalLearningSolutions.Web/yarn.lock diff --git a/DigitalLearningSolutions.Web/Styles/index.scss b/DigitalLearningSolutions.Web/Styles/index.scss index 987c59e75b..c61029a83f 100644 --- a/DigitalLearningSolutions.Web/Styles/index.scss +++ b/DigitalLearningSolutions.Web/Styles/index.scss @@ -62,11 +62,7 @@ ul > li > ul > li { padding-top: 0; } -.nhsuk-button { - @include mq($until: tablet) { - margin-top: nhsuk-spacing(3); - } -} + input:invalid { border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color; @@ -78,13 +74,7 @@ input[type=file] { } } -input[type=file].nhsuk-input--error { - height: 44px; - @include govuk-media-query($until: tablet) { - height: 40px; - } -} h1#page-heading { margin-bottom: 16px; @@ -98,9 +88,6 @@ h1#page-heading { display: flex; } -.nhsuk-main-wrapper { - flex: 1; -} .responsive-iframe-wrapper { height: 100%; @@ -121,10 +108,6 @@ h1#page-heading { padding-bottom: $iframe-padding-bottom * 1.5; } -.nhsuk-heading-xl.heading-margin-2 { - margin-bottom: nhsuk-spacing(2); -} - .responsive-iframe { width: 100%; height: 100%; @@ -147,25 +130,6 @@ h1#page-heading { margin-bottom: 0; } -.basic-summary-list__row:last-child .nhsuk-summary-list__key { - border: none; -} - -.basic-summary-list__row:last-child .nhsuk-summary-list__value { - border: none; - margin-bottom: 0; -} - -.nhsuk-summary-list__value { - @include govuk-media-query($until: tablet) { - word-break: break-word; - @include word-break-ie-fix; - } -} - -.nhsuk-tag { - text-align: center; -} .right-align-tag-column { padding: 0; @@ -211,10 +175,6 @@ ul.no-bullets { margin-bottom: 0; } -.nhsuk-details__text > .nhsuk-button { - margin-bottom: 0; -} - @mixin hidden-submit-ie-fix { // IE11 hack @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @@ -335,10 +295,6 @@ ul.no-bullets { } } -.nhsuk-error-message.error-message--margin-bottom-1 { - margin-bottom: nhsuk-spacing(1); -} - .display-none { display: none; } diff --git a/DigitalLearningSolutions.Web/Styles/layout.scss b/DigitalLearningSolutions.Web/Styles/layout.scss index f815adafe4..57797ceb48 100644 --- a/DigitalLearningSolutions.Web/Styles/layout.scss +++ b/DigitalLearningSolutions.Web/Styles/layout.scss @@ -24,74 +24,14 @@ body { flex: 1 0 auto; align-self: center; width: 100%; - margin: 0; + padding-left: 32px; + padding-right: 32px; } footer { flex-shrink: 0; } -.nhsuk-header__navigation-item.selected { - a { - font-weight: bold; - } -} - -.nhsuk-header__logo { - @include mq($until: large-desktop) { - max-width: unset; - - .nhsuk-header__link--service { - align-items: center; - display: flex; - -ms-flex-align: center; - margin-bottom: 0; - width: auto; - } - - .nhsuk-header__service-name { - padding-left: nhsuk-spacing(3); - max-width: unset; - } - } -} -.nhsuk-navigation-container { - @include mq($until: tablet) { - margin-top: unset; - } -} - -body:not(.js-enabled) { - .nhsuk-header__menu { - display: none; - } - - #close-menu { - display: none; - } - - .nhsuk-header__navigation { - display: block; - } -} - -:not(.nhsuk-header--transactional) div.nhsuk-header__container { - @media (max-width: 40.0525em) { - margin: 0; - } -} - -.nhsuk-header--transactional { - .nhsuk-header__link--service { - width: auto; - height: auto; - - @include mq($from: large-desktop) { - display: flex; - } - } -} - .centre-brand-logo { float: right; max-width: 280px; @@ -102,13 +42,7 @@ body:not(.js-enabled) { } } -nav .nhsuk-width-container { - margin: 0 auto; -} -nav, .nhsuk-header__navigation, #header-navigation { - border-bottom: 0; -} .visual-separator { height: 8px; @@ -307,19 +241,7 @@ nav, .nhsuk-header__navigation, #header-navigation { clip: auto; } -.nhsuk-button--danger { - background-color: $color_nhsuk-red; - box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%); - margin-bottom: 16px !important; - &:hover { - background-color: shade($color_nhsuk-red, 20%); - } - - &:active { - background-color: shade($color_nhsuk-red, 50%); - } -} .first-row td { border-top: 2px solid #d8dde0; @@ -330,12 +252,6 @@ nav, .nhsuk-header__navigation, #header-navigation { white-space: nowrap; } -.nhsuk-header__link--service { - @include mq($from: large-desktop) { - align-items: unset; - } -} - .header-beta { color: #c8e4ff; font-family: FrutigerLTW01-55Roman, Arial, sans-serif; @@ -347,15 +263,8 @@ nav, .nhsuk-header__navigation, #header-navigation { } } -.nhsuk-width-container, .nhsuk-header__navigation-list { - max-width: 1144px !important; - padding-left: $nhsuk-gutter !important; - padding-right: $nhsuk-gutter !important; -} -.nhsuk-width-container { - margin: auto !important; -} + @media only screen and (max-width: 767px) { .section-card-result { diff --git a/DigitalLearningSolutions.Web/Styles/nhsuk.scss b/DigitalLearningSolutions.Web/Styles/nhsuk.scss index c2b4c7239b..e5e42bb678 100644 --- a/DigitalLearningSolutions.Web/Styles/nhsuk.scss +++ b/DigitalLearningSolutions.Web/Styles/nhsuk.scss @@ -7,3 +7,152 @@ .nhsuk-hint { white-space: initial; } + + +@mixin word-break-ie-fix { + // IE11 hack + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + word-break: break-all; + } +} + +/* Items below moved from layout.scss or index.scss and deemed to be part of NHSE frontend */ + +body:not(.js-enabled) { + .nhsuk-header__menu { + display: none; + } + + #close-menu { + display: none; + } + + .nhsuk-header__navigation { + display: block; + } +} + +/* nhsuk-header__navigation-item paired with menu li items that become bold when you're on that page */ +/*
  • */ +.nhsuk-header__navigation-item.selected { + a { + font-weight: bold; + } +} + +/* stops blue menu overlapping white header, noticable because it's white, not as noticable in blue headers */ +.nhsuk-header--white .nhsuk-navigation-container { + @include mq($until: tablet) { + margin-top: unset; + } +} + +/* .nhsuk-header--transactional brought from live design-system, not in current implentation */ +.nhsuk-header--transactional { + .nhsuk-header__container { + justify-content: normal; + } + + .nhsuk-header__link { + display: block; + height: 32px; + width: 80px + } + + .nhsuk-logo { + height: 32px; + width: 80px + } +} + +.nhsuk-main-wrapper { + flex: 1; +} + +/* + Included as fixing issue caused by older grid implementation of NHS breadcrumbs and nav + TODO: Update header and breadcrumbs to reflect current nhsuk implementation + */ +.nhsuk-breadcrumb .nhsuk-width-container { + padding-left: $nhsuk-gutter !important; + padding-right: $nhsuk-gutter !important; +} + +.feedback-bar .nhsuk-width-container { + margin-bottom: 0; +} + +nav, .nhsuk-header__navigation, #header-navigation { + border-bottom: 0; +} + +.nhsuk-heading-xl.heading-margin-2 { + margin-bottom: nhsuk-spacing(2); +} + +.nhsuk-button { + @include mq($until: tablet) { + margin-top: nhsuk-spacing(3); + } +} + +.nhsuk-button--danger { + background-color: $color_nhsuk-red; + box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%); + margin-bottom: 16px !important; + + &:hover { + background-color: shade($color_nhsuk-red, 20%); + } + + &:active { + background-color: shade($color_nhsuk-red, 50%); + } +} + +.nhsuk-details__text > .nhsuk-button { + margin-bottom: 0; +} + +input[type=file].nhsuk-input--error { + height: 44px; + + @include govuk-media-query($until: tablet) { + height: 40px; + } +} + +.nhsuk-error-message.error-message--margin-bottom-1 { + margin-bottom: nhsuk-spacing(1); +} + +.basic-summary-list__row:last-child .nhsuk-summary-list__key { + border: none; +} + +.basic-summary-list__row:last-child .nhsuk-summary-list__value { + border: none; + margin-bottom: 0; +} + +.nhsuk-summary-list__value { + @include govuk-media-query($until: tablet) { + word-break: break-word; + @include word-break-ie-fix; + } +} + +.nhsuk-tag { + text-align: center; +} + + + +/* + styles/index.scss has the following nhsuk dependancies - FGC 2/6/25 + .nhsuk-u-font-weight-normal; + .nhsuk-u-font-weight-bold; + .nhsuk-u-font-size-16; + .nhsuk-u-font-size-19; +*/ + diff --git a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/_Layout.cshtml b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/_Layout.cshtml index a92ae4ce53..dd778f91ff 100644 --- a/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/_Layout.cshtml +++ b/DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/_Layout.cshtml @@ -51,23 +51,25 @@ { @await Html.PartialAsync("~/Views/Shared/_GoogleTagManagerBodyTagJs.cshtml") } + + Skip to main content
    - - - Skip to main content - -
    -
    -