Update favicons and other icons (#734)

* Update icons and paths * Start up local redis * Optimise crests
ministryofjustice · Oct 10, 2024 · 40f219f · 40f219f
1 parent 70a0c9f
commit 40f219f
Show file tree

Hide file tree

Showing 24 changed files with 433 additions and 67 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -86,6 +86,8 @@ services:
       MYSQL_USER: ${DB_USER}
       MYSQL_PASSWORD: ${DB_PASSWORD}
       MYSQL_DATABASE: ${DB_NAME}
+    depends_on:
+      - redis
 
   phpmyadmin:
     container_name: intranet-phpmyadmin
@@ -205,6 +207,7 @@ services:
       - nginx
 
   redis:
+    container_name: intranet-redis
     image: 'bitnami/redis:latest'
     environment:
       - ALLOW_EMPTY_PASSWORD=yes
diff --git a/public/app/themes/clarity/src/components/c-copyright-notice/style.styl b/public/app/themes/clarity/src/components/c-copyright-notice/style.styl
@@ -7,7 +7,7 @@
   img {
     width: 30%;
     +above(m) {
-      width: 60%;
+      width: 65%;
     }
   }
 }
diff --git a/public/app/themes/clarity/src/components/c-copyright-notice/view.php b/public/app/themes/clarity/src/components/c-copyright-notice/view.php
@@ -1,5 +1,5 @@
 <div class="c-copyright-notice">
-    <img src="<?= get_stylesheet_directory_uri() ?>/dist/images/crown_copyright_logo.png" alt="crown copyright logo">
+    <img src="<?= get_stylesheet_directory_uri() ?>/dist/images/tudor_crest.svg" alt="crown copyright logo" width="160">
     <br>
     <span>&copy; Crown copyright</span>
 </div>
diff --git a/public/app/themes/clarity/src/components/c-global-header/base-header.php b/public/app/themes/clarity/src/components/c-global-header/base-header.php
@@ -4,7 +4,7 @@
 /**
  * The header for our theme
  *
- * This is the template that displays all of the <head> section
+ * This is the template that displays all the <head> section
  *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
@@ -14,48 +14,43 @@
 $oAgency      = new Agency();
 $activeAgency = $oAgency->getCurrentAgency() ? $oAgency->getCurrentAgency() : 'hq';
 
-// define the title
-$header_title = get_the_title();
-
-// Search page?
-if (is_search()) {
-    $header_title = 'Search: ' . get_search_query();
-
-    $query_post_type = sanitize_text_field($_GET['post_types'] ?? null);
-    if ($query_post_type) {
-        $header_title .= ' (' . $query_post_type . ')';
-    }
-}
-
 ?><!DOCTYPE html>
 <html lang="en" class="no-js">
 <head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
-    <meta name="theme-color" content="<?= $agency_colour ?>"/>
-    <meta name="agency" content="<?= $activeAgency['label'] ?>"/>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <meta name="theme-color" content="<?php echo $agency_colour; ?>">
+    <meta name="agency" content="<?php echo $activeAgency['label']; ?>">
 
-    <title><?= $header_title ?><?= ' - ' . $activeAgency['label'] . ' Intranet'; ?></title>
+    <title><?php echo single_post_title(); ?><?php echo ' - ' . $activeAgency['label'] . ' Intranet'; ?></title>
 
-  <link rel="icon" sizes="180x180" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-180x180.png">
-  <link rel="shortcut icon" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/favicon.ico" type="image/x-icon" />
-  <link rel="apple-touch-icon" href="<?= get_stylesheet_directory_uri(); ?>/dist/images/icons/apple-touch-icon.png" />
-  <link rel="apple-touch-icon" sizes="57x57" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-57x57.png" />
-  <link rel="apple-touch-icon" sizes="72x72" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-72x72.png" />
-  <link rel="apple-touch-icon" sizes="76x76" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-76x76.png" />
-  <link rel="apple-touch-icon" sizes="114x114" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-114x114.png" />
-  <link rel="apple-touch-icon" sizes="120x120" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-120x120.png" />
-  <link rel="apple-touch-icon" sizes="144x144" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-144x144.png" />
-  <link rel="apple-touch-icon" sizes="152x152" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-152x152.png" />
-  <link rel="apple-touch-icon" sizes="180x180" href="<?= get_stylesheet_directory_uri() ?>/dist/images/icons/apple-touch-icon-180x180.png" />
+    <link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/images/icons/favicon-48x48.png" sizes="48x48" />
+    <link rel="icon" type="image/svg+xml" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/images/icons/favicon.svg" />
+    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/images/icons/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/images/icons/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="MoJ Intranet" />
+    <link rel="manifest" href="<?php echo get_stylesheet_directory_uri(); ?>/dist/images/icons/site.webmanifest" />
     <?php
-    wp_head() ?>
-
-   <script defer>
+    /**
+     * wp_head() required WP function do not remove. Used by plugins to hook into and for theme development.
+     */
+    wp_head();
+    ?>
+    <script defer>
+      function readCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+          var c = ca[i];
+          while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+      }
       document.addEventListener('DOMContentLoaded', function() {
-        // Ensure the correct agency cookie gets picked up
-        var agency_cookie = ('; ' + document.cookie).split('; dw_agency=').pop().split(';').shift();
-        if (agency_cookie !== null && agency_cookie !== '<?= $agency_shortcode ?>') { window.location.reload() }
+        <!-- Ensure the correct agency cookie gets picked up -->
+        var agency_cookie = readCookie("dw_agency");
+        if (agency_cookie !== null && agency_cookie !== '<?php echo $agency_shortcode; ?>') { window.location.reload(true); }
       });
     </script>
 </head>
@@ -65,22 +60,25 @@
 }
 ?>
 <!-- Google Tag Manager -->
-<noscript><iframe src="//www.googletagmanager.com/ns.html?id=<?= GT_CODE ?>"
-                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','<?= GT_CODE ?>');</script>
+<noscript>
+    <iframe src="//www.googletagmanager.com/ns.html?id=<?php echo GT_CODE; ?>" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+</noscript>
+<script>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','<?php echo GT_CODE; ?>');
+</script>
 <!-- End Google Tag Manager -->
 <body
-<?php
-/**
- * Adds agency specific classes to the page.
- */
-  $agency_class      = 'agency-' . $agency_shortcode;
-  body_class($class = $agency_class);
-?>
+    <?php
+    /**
+     * Adds agency specific classes to the page.
+     */
+    $agency_class      = 'agency-' . $agency_shortcode;
+    body_class($class = $agency_class);
+    ?>
 >
 <a class="u-skip-link" href="#maincontent">Skip to main content</a>
 

diff --git a/public/app/themes/clarity/src/components/c-logo-bar/style.styl b/public/app/themes/clarity/src/components/c-logo-bar/style.styl
@@ -15,16 +15,17 @@
     text-decoration: none;
   }
 
-  .image {
-    background-size: inherit;
-    background-repeat: no-repeat;
-    background-position: 1px 12px;
-    width: 38px;
-    height: 49px;
+  &__logo {
     display: block;
     float: left;
-    margin-right: 2px;
+    height: 50px;
+    margin: -1px 2px 0 0;
+    -o-object-fit: contain;
+    object-fit: contain;
+    padding-left: 1px;
+    width: 38px;
   }
+
   .agency-title {
     color: white;
     font-size: 26px;
@@ -48,7 +49,6 @@
   }
 
   .u-wrapper {
-
     &__stack--right {
       padding: $spacing 0 $spacing;
     }

diff --git a/public/app/themes/clarity/src/components/c-logo-bar/view.php b/public/app/themes/clarity/src/components/c-logo-bar/view.php
@@ -6,14 +6,13 @@
 $activeAgency = $oAgency->getCurrentAgency();
 $header_logo = get_field(get_intranet_code() .'_header_logo', 'option');
 $logo = get_stylesheet_directory_uri() . '/dist/images/moj_logo_header.png';
-$size = "94%";
 
+# If the agency is the law commission, use the new logo
 if ($activeAgency['shortcode'] === 'law-commission') {
-    $logo = get_stylesheet_directory_uri() . '/dist/images/lawcomms_logo_new.jpg';
-    $size = "100%";
+    $logo = get_stylesheet_directory_uri() . '/dist/images/lawcomms_logo_new.png';
 }
 
-# If header logo is set, use that instead
+# If a header logo is set, use that instead
 if (!empty($header_logo)) {
     $logo = $header_logo;
 }
@@ -23,9 +22,9 @@
 <section class="c-logo-bar">
   <div class="u-wrapper">
         <div class="u-wrapper__stack--left">
-            <a href="/" rel="home" style="background-size: <?= $size ?>">
-                <span class="image" style="background-image: url('<?= $logo ?>')">&nbsp;</span>
-                <span class="agency-title l-half-section"><?= $activeAgency['label'] ?></span>
+            <a href="/" rel="home">
+            <img class="c-logo-bar__logo" aria-hidden="true" src="<?= $logo ?>" alt="" />
+            <span class="agency-title l-half-section"><?= $activeAgency['label'] ?></span>
             </a>
         </div>
 

diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-114x114.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-114x114.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-120x120.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-120x120.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-144x144.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-144x144.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-152x152.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-152x152.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-180x180.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-180x180.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-57x57.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-57x57.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-72x72.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-72x72.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-76x76.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon-76x76.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon.png b/public/app/themes/clarity/src/globals/images/icons/apple-touch-icon.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/favicon-48x48.png b/public/app/themes/clarity/src/globals/images/icons/favicon-48x48.png
diff --git a/public/app/themes/clarity/src/globals/images/icons/favicon.ico b/public/app/themes/clarity/src/globals/images/icons/favicon.ico