TD-5884- Managed header div positions and CSS classes to align the logo.

Author: Auldrin-Possa

DigitalLearningSolutions.Web/Styles/nhsuk.scss

@@ -49,9 +49,6 @@ body:not(.js-enabled) {
 
 /* .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;
@@ -137,7 +134,18 @@ input[type=file].nhsuk-input--error {
   text-align: center;
 }
 
+.nhsuk-header__logo {
+  display: flex;
+  justify-content: space-between;
+}
 
+@media (max-width: 600px) {
+  .nhsuk-header__transactional--logo {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}
 
 /*
     styles/index.scss has the following nhsuk dependancies - FGC 2/6/25

DigitalLearningSolutions.Web/Views/LearningPortal/SelfAssessments/_Layout.cshtml

@@ -67,10 +67,10 @@
                             <image src="https://assets.nhs.uk/images/nhs-logo.png" width="40" height="16" xlink:href=""></image>
                         </svg>
                     </a>
-                </div>
-                <div class="nhsuk-header__transactional-service-name">
-                    <a class="nhsuk-header__transactional-service-name--link" href="/">@ViewData["SelfAssessmentTitle"]</a>
-                    <sup class="header-beta">Beta</sup>
+                    <div class="nhsuk-header__transactional-service-name">
+                        <a class="nhsuk-header__transactional-service-name--link" href="/">@ViewData["SelfAssessmentTitle"]</a>
+                        <sup class="header-beta">Beta</sup>
+                    </div>
                 </div>
             </div>
             <feature name="@(FeatureFlags.UserFeedbackBar)">

DigitalLearningSolutions.Web/Views/Shared/_Layout.cshtml

@@ -82,7 +82,7 @@
             }
 
             <div class="nhsuk-header__container">
-                <div class="nhsuk-header__logo nhsuk-header__transactional--logo">
+                <div class="nhsuk-header__transactional--logo nhsuk-header__logo">
                     <a class="nhsuk-header__link"
                        href="@(ViewData[LayoutViewDataKeys.HeaderPath] ?? Configuration["AppRootPath"] + "/Home")"
                        aria-label="NHS Digital Learning Solutions - @(ViewData[LayoutViewDataKeys.HeaderPathName] ?? "Landing Page")">
@@ -93,16 +93,16 @@
                             <image src="https://assets.nhs.uk/images/nhs-logo.png" width="40" height="16" xlink:href=""></image>
                         </svg>
                     </a>
-                </div>
-                <div class="nhsuk-header__transactional-service-name">
-                    <a class="nhsuk-header__transactional-service-name--link" href="@(ViewData[LayoutViewDataKeys.HeaderPath] ?? Configuration["AppRootPath"] + "/Home")">@(ViewData[LayoutViewDataKeys.HeaderPrefix] ?? "Digital Learning Solutions ")@(headerExtension)</a>
-                    @if (ViewData[LayoutViewDataKeys.Application] != null)
-                    {
-                        if (ViewData[LayoutViewDataKeys.Application].ToString() == "Framework Service" | ViewData[LayoutViewDataKeys.Application].ToString() == "Supervise")
+                    <div class="nhsuk-header__transactional-service-name">
+                        <a class="nhsuk-header__transactional-service-name--link" href="@(ViewData[LayoutViewDataKeys.HeaderPath] ?? Configuration["AppRootPath"] + "/Home")">@(ViewData[LayoutViewDataKeys.HeaderPrefix] ?? "Digital Learning Solutions ")@(headerExtension)</a>
+                        @if (ViewData[LayoutViewDataKeys.Application] != null)
                         {
-                            <sup class="header-beta header-beta--dark">Beta</sup>
+                            if (ViewData[LayoutViewDataKeys.Application].ToString() == "Framework Service" | ViewData[LayoutViewDataKeys.Application].ToString() == "Supervise")
+                            {
+                                <sup class="header-beta header-beta--dark">Beta</sup>
+                            }
                         }
-                    }
+                    </div>
                 </div>
                 <vc:logo customisation-id="@((int?)ViewData[LayoutViewDataKeys.CustomisationIdForHeaderLogo])" />
             </div>