Merge pull request #345 from nationalarchives/feature/banner

Add announcement banner on the death of Queen Elizabeth
nationalarchives · Sep 8, 2022 · 934307f · 934307f
2 parents c55daf7 + 5a54dd4
commit 934307f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 0 deletions.
diff --git a/ds_judgements_public_ui/sass/includes/_announcement_banner.scss b/ds_judgements_public_ui/sass/includes/_announcement_banner.scss
@@ -0,0 +1,64 @@
+.announcement-banner {
+  background-color: $color__black;
+  color: $color__white;
+  padding: calc($spacer__unit);
+
+  &__container {
+  }
+
+  &__notice {
+    padding: 0.3em 0;
+    font-family: "Roboto", sans-serif;
+    font-size: 1.1rem;
+    text-align: center;
+
+    @media (min-width: $grid__breakpoint-large) {
+       text-align: center;
+       font-size: 1.2rem;
+    }
+
+    a {
+      background-color: $color__white;
+      padding: 0.5rem 1rem;
+      color: $color__black;
+      display: inline-block;
+      font-weight: bold;
+      text-decoration: none;
+      font-family: "Roboto", sans-serif;
+
+      &:focus {
+        outline: 0.3rem solid $color__yellow;
+        background-color: $color__dark-blue;
+        color: $color__white;
+      }
+
+      &:hover {
+        background-color: $color__dark-blue;
+        color: $color__white;
+      }
+    }
+  }
+
+  &__phase {
+    background-color: $color__white;
+    color: $color__black;
+    text-transform: uppercase;
+    padding: 0 calc($spacer__unit / 4);
+    margin-right: $spacer__unit;
+    font-weight: 700;
+  }
+
+  &__message {
+    margin: 0;
+    display: block;
+    line-height: 1.8rem;
+    font-size: 1.6rem;
+    padding: 1rem;
+    font-weight: bold;
+  }
+  &__sub-message {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: normal;
+  }
+}
diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss
@@ -28,3 +28,4 @@
 @import "includes/homepage_browse";
 @import "includes/what_to_expect";
 @import "includes/js_enabled";
+@import "includes/announcement_banner";
diff --git a/ds_judgements_public_ui/templates/base.html b/ds_judgements_public_ui/templates/base.html
@@ -31,6 +31,7 @@
     {% include 'includes/cookie_consent/cookie_banner.html' %}
     <a id="skip-to-main-content" href="#main-content">{% translate "skiplink" %}</a>
     {% include 'includes/gtm/gtm_body.html' %}
+    {% include 'includes/announcement_banner.html' %}
     {% include 'includes/phase_banner.html' %}
     <main id="main-content">
       {% block content %}

diff --git a/ds_judgements_public_ui/templates/includes/announcement_banner.html b/ds_judgements_public_ui/templates/includes/announcement_banner.html
@@ -0,0 +1,7 @@
+<div class="announcement-banner">
+    <div class="announcement-banner__container">
+        <div class="announcement-banner__notice">
+            <p class="announcement-banner__message">HM QUEEN ELIZABETH II <span class="announcement-banner__sub-message">21 April 1926 - 08 September 2022</span></p>
+        </div>
+    </div>
+</div>
diff --git a/ds_judgements_public_ui/templates/layout_judgment_html.html b/ds_judgements_public_ui/templates/layout_judgment_html.html
@@ -28,6 +28,7 @@
 {% include 'includes/cookie_consent/cookie_banner.html' %}
 <a id="skip-to-main-content" href="#main-content">{% translate "skiplink" %}</a>
 {% include 'includes/gtm/gtm_body.html' %}
+{% include 'includes/announcement_banner.html' %}
 {% include 'includes/phase_banner.html' %}
 <header class="page-header">
   {% include 'includes/breadcrumbs.html' with current=context.page_title title=context.page_title link=request.path %}