Environment banner

Uses DJANGO_ENV to determine environment name

Author: swebberuk

manage_breast_screening/assets/sass/main.scss

@@ -50,6 +50,24 @@ a[href="#"] {
   color: #c80000 !important;
 }
 
+// Environment banner at the top of the page
+.app-environment {
+  @include nhsuk-font-size(14);
+  @include nhsuk-responsive-padding(2, bottom);
+  @include nhsuk-responsive-padding(2, top);
+
+  .nhsuk-link {
+    color: inherit;
+  }
+
+  .nhsuk-width-container {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: nhsuk-spacing(1) nhsuk-spacing(2);
+  }
+}
+
 // Status tag positioning within headers
 .app-header {
   position: relative;

manage_breast_screening/config/jinja2_env.py

@@ -41,6 +41,7 @@ def environment(**options):
             "static": static,
             "url": reverse,
             "inflector": inflector,
+            "DJANGO_ENV": settings.DJANGO_ENV,
         }
     )
 

manage_breast_screening/core/jinja2/layout-app.jinja

@@ -14,6 +14,17 @@
 {% block pageTitle %}{% if form and form.errors %}Error: {% endif %}{% if page_title %}{{ page_title }} – {% endif %}Manage breast screening – NHS{% endblock %}
 
 {% block header %}
+  {% if DJANGO_ENV != 'prod' %}
+    <div class="app-environment nhsuk-tag--grey">
+      <div class="nhsuk-width-container">
+        <strong class="nhsuk-tag nhsuk-tag--grey">
+          {{ DJANGO_ENV }}
+        </strong>
+        This is the {{ DJANGO_ENV }} environment.
+      </div>
+    </div>
+  {% endif %}
+
   {{ header({
     "classes": "nhsuk-header--inline",
     "service": {