add html class to fix dark grey background issue

nhsuk · Jan 21, 2025 · 5963f92 · 5963f92
1 parent 3bc4b7a
commit 5963f92
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/docs/_includes/example.njk b/docs/_includes/example.njk
@@ -1,4 +1,4 @@
-<div class="app-example{%- if mobile == true %} app-example--mobile{% endif -%}">
+<div class="app-example">
   <span class="app-example__new-window">
     <a href="{{ href }}" target="_blank">Open this example <span class="nhsuk-u-visually-hidden">({{ title }})</span> in a new window</a>
   </span>
@@ -23,7 +23,7 @@
   {% endif -%}
 </div>
 
-<div class="app-tabs{%- if mobile == true %} app-tabs--mobile{% endif -%}" data-module="app-tabs">
+<div class="app-tabs" data-module="app-tabs">
   <ul class="app-tabs__list" role="tablist">
     <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
     <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>

diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -5,7 +5,7 @@
 {% from "icon/macro.njk" import nhsappIcon %}
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" {% if htmlClasses %} class="{{ htmlClasses }}"{% endif %}>
   <head>
     <meta content="IE=edge" http-equiv="X-UA-Compatible">
     <meta charset="utf-8">

diff --git a/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk b/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk
@@ -2,6 +2,7 @@
 
 {% block skiplink %}{% endblock %}
 
+{% set htmlClasses = "app-html-background-color-grey-5" %}
 {% set mainClasses = "nhsuk-main-wrapper--s" %}
 
 {% block header %}

diff --git a/docs/_includes/layouts/example-full-page-mobile.njk b/docs/_includes/layouts/example-full-page-mobile.njk
@@ -2,6 +2,7 @@
 
 {% block skiplink %}{% endblock %}
 
+{% set htmlClasses = "app-html-background-color-grey-5" %}
 {% set containerClasses = "app-width-container" %}
 {% set mainClasses = "app-main-wrapper" %}
 

diff --git a/docs/assets/css/_container.scss b/docs/assets/css/_container.scss
@@ -7,3 +7,9 @@
 .app-main-wrapper {
   padding: 0 0 130px; // to give correct spacing for sticky footer
 }
+
+// App html class
+// Removes the dark grey background at the bottom of shorter pages
+.app-html-background-color-grey-5 {
+  background-color: $color_nhsuk-grey-5;
+}