Merge pull request #215 from dof-dss/D8NID-1534

HTML and CSS updates for banner and show banner on all pages (not jus…
dof-dss · Jul 4, 2022 · 41a2f61 · 41a2f61
2 parents 0f0829f + 3ed1b80
commit 41a2f61
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 88 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,6 +10,11 @@ jobs:
       - image: circleci/php:8.0-apache-browsers
     steps:
       - checkout
+      - run:
+          name: Update public Key for Google repo
+          command: |
+            # Fix for the 'No public key availaible' warning.
+            wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
       - run:
           name: Fetch phpcs and dependencies
           command: |
@@ -33,12 +38,17 @@ jobs:
     steps:
       - checkout:
           path: /home/circleci/origins_modules
+      - run:
+          name: Update public Key for Google repo
+          command: |
+            # Fix for the 'No public key availaible' warning.
+            wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
       - run:
           name: Add OS and PHP extensions/config
           command: |
             sudo cp /home/circleci/origins_modules/.circleci/docker-php-circleci.ini /usr/local/etc/php/conf.d/
-            sudo apt --allow-releaseinfo-change update
-            sudo apt install -y libpng-dev
+            sudo apt-get update
+            sudo apt-get install -y libpng-dev
             sudo docker-php-ext-install gd
       - run:
           name: Fetch latest Drupal version

diff --git a/origins_shamrock/css/shamrock_banner.css b/origins_shamrock/css/shamrock_banner.css
@@ -1,101 +1,107 @@
-.opsh--banner {
+#opsh-banner *,
+#opsh-banner *::before,
+#opsh-banner *::after {
+  box-sizing: border-box;
+}
+
+#opsh-banner {
+  font-size: 16px;
+  line-height: 1.5;
+
+  width: 100%;
+  clear: both;
+  padding: 1.5em;
+  margin: 0;
+
   background: #000;
-  padding: 0.5em 21px;
   color: #fff;
 }
 
-@media screen and (max-width: 979px) {
-  .opsh--banner {
-    padding: 0.5em 12px;
+@media screen and (min-width: 768px) {
+  #opsh-banner {
+    padding: 2em;
+    font-size: 18px;
   }
 }
 
-.opsh__link {
+#opsh-banner .opsh-banner__content {
   display: block;
-  max-width: 940px;
+  width: 100%;
+  max-width: 960px;
   margin: 0 auto;
 }
 
-.opsh__link:link {
-  display: block;
-  max-width: 940px;
-  margin: 0 auto;
-  color: #fff;
+#opsh-banner a.opsh-banner__content,
+#opsh-banner a.oposh-banner__content:link,
+#opsh-banner a.opsh-banner__content:visited,
+#opsh-banner a.opsh-banner__content:focus,
+#opsh-banner a.opsh-banner__content:hover,
+#opsh-banner a.opsh-banner__content:active {
+  background: none;
+  box-shadow: none;
   text-decoration: none;
+  border: 0;
+  color: #fff;
+  outline: none;
 }
 
-.opsh__link:visited {
-  color: #bfb1ba;
+#opsh-banner .opsh-banner__title {
+  display: block;
+  width: 100%;
+  clear: both;
+  color: #fff;
+  background-color: transparent;
+  font-size: 1.5em;
+  line-height: 1.25;
+  margin: 0;
+  padding: 0;
 }
 
-.opsh__link:hover {
-  text-decoration: none;
+@media screen and (min-width: 600px) {
+  #opsh-banner .opsh-banner__title {
+    font-size: 2em;
+  }
 }
 
-.opsh__link:hover .opsh__read-more {
-  background-color: #fff;
-  color: #000;
-  outline: 1px solid #fff;
-  text-decoration: none;
+#opsh-banner p {
+  margin: .5em 0 0;
 }
 
-.opsh__link:focus {
-  outline: 3px solid #fff;
-  outline-offset: .5em;
+#opsh-banner .opsh-banner__body {
+  font-size: 1.8rem;
+  line-height: 2.8rem;
+  margin: 0;
 }
 
-.opsh__title {
-  display: block;
-  font-size: 3.6rem;
-  font-weight: bold;
-  line-height: 1.25;
-  padding: 0.25em 21px;
+@media screen and (min-width: 768px) {
+  #opsh-banner .opsh-banner__body {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
 }
 
-.opsh__msg {
-  display: block;
-  font-size: 1.6rem;
-  line-height: 2.7rem;
-  margin: 0;
+#opsh-banner a.opsh-banner__content .opsh-banner__faux-link {
+  text-decoration: 1px underline;
+  text-underline-offset: 1px;
 }
 
-.opsh__read-more {
-  display: inline-block;
-  font-size: 1.4rem;
-  line-height: 2.1rem;
-  text-decoration: underline;
+#opsh-banner a.opsh-banner__content:visited .opsh-banner__faux-link {
+  color: #999;
 }
 
-@media screen and (max-width: 599px) {
-  .opsh__title {
-    font-size: 2.8rem;
-    line-height: 3.2rem;
-  }
-
-  .opsh__title.opsh__msg {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    margin: 0;
-  }
-
-  .opsh__msg.opsh__read-more {
-    font-size: 1.4rem;
-    line-height: 2.1rem;
-  }
+#opsh-banner a.opsh-banner__content:hover .opsh-banner__faux-link {
+  text-decoration: 2px underline;
 }
 
-@media screen and (max-width: 480px) {
-  .opsh__title {
-    font-size: 2.6rem;
-    margin: 0;
-    line-height: 2.4rem;
-  }
-
-  .opsh__title.opsh__msg {
-    font-size: 1.6rem;
-  }
+#opsh-banner a.opsh-banner__content:focus .opsh-banner__faux-link {
+  text-decoration: none;
+  box-shadow: 0 -2px #fd0, 0 2px #fd0;
+  background-color: #fd0;
+  color: #000;
+}
 
-  .opsh__title.opsh__msg .opsh__read-more {
-    font-size: 1.4rem;
-  }
+#opsh-banner a.opsh-banner__content:active .opsh-banner__faux-link {
+  color: #f61;
+  background-color: transparent;
+  box-shadow: none;
 }
diff --git a/origins_shamrock/modules/origins_shamrock_admin/templates/origins-shamrock-banner.html.twig b/origins_shamrock/modules/origins_shamrock_admin/templates/origins-shamrock-banner.html.twig
@@ -1,21 +1,22 @@
-{%
-
-  set result_classes = [
-  passed ? 'info-notice info-notice--success' : 'info-notice info-notice--error'
-]
-%}
-
-<div{{ attributes.addClass('opsh--banner').setAttribute('role', 'presentation') }}>
-  <a{{ attributes.addClass('opsh__link') }} href="{{ url }}">
-    <span{{ attributes.addClass('opsh__title') }}>
+{% set attributes = attributes.addClass('opsh-banner') %}
+{% set attributes = attributes.setAttribute('id','opsh-banner')
+                              .setAttribute('role', 'region')
+                              .setAttribute('aria-roledescription', 'Important message from U K Government')
+                              .setAttribute('aria-live', 'polite')
+                              .setAttribute('aria-atomic', 'region') %}
+<div{{ attributes }}>
+  <a class="opsh-banner__content" href="{{ url }}">
+    <h1 class="opsh-banner__title">
       {{ title }}
-    </span>
-    <span{{ attributes.addClass('opsh__msg') }}>
+    </h1>
+    <p class="opsh-banner__body">
       {{ body }}
-    </span>
-    <span{{ attributes.addClass('opsh__read-more') }}>
-      {{ 'Read more'|t }}
-    </span>
+    </p>
+    <p>
+      <span class="opsh-banner__faux-link" }}>
+        {{ 'Read about the arrangements following The Queen\'s death'|t }}
+      </span>
+    </p>
   </a>
 </div>
 
diff --git a/origins_shamrock/origins_shamrock.module b/origins_shamrock/origins_shamrock.module
@@ -30,7 +30,7 @@ function origins_shamrock_help($route_name, RouteMatchInterface $route_match) {
 function origins_shamrock_preprocess_page(&$variables) {
   $variables['#cache']['tags'][] = 'origins:operation_shamrock';
 
-  if (\Drupal::config('origins_shamrock.settings')->get('show_banner') && \Drupal::service('path.matcher')->isFrontPage()) {
+  if (\Drupal::config('origins_shamrock.settings')->get('show_banner')) {
     $config_factory = \Drupal::configFactory();
     $config = $config_factory->get('origins_shamrock.settings');