Improve main header menus on mobile

The external link list, intranet switcher button and main menu were all jumbled up. They now all list out nicely. Tested on most main mobile devices. Avoided implementing hamburger menu as it seems to be going out of fashion within UX community.
ministryofjustice · May 17, 2019 · 8f45d2c · 8f45d2c
1 parent a46aa76
commit 8f45d2c
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git a/wp-content/themes/clarity/inc/enqueue.php b/wp-content/themes/clarity/inc/enqueue.php
@@ -3,14 +3,13 @@
 /**
  *
  * Enqueue Clarity scripts and styles.
- *
  */
 
 add_action( 'wp_enqueue_scripts', 'enqueue_clarity_scripts', 99 );
 
 function enqueue_clarity_scripts() {
 	// CSS
-	wp_register_style( 'core-css', get_stylesheet_directory_uri() . '/assets/css/core.min.css', array(), '1.4.0', 'all' );
+	wp_register_style( 'core-css', get_stylesheet_directory_uri() . '/assets/css/core.min.css', array(), '1.5.0', 'all' );
 	wp_enqueue_style( 'core-css' );
 
 	wp_register_style( 'ie-css', get_stylesheet_directory_uri() . '/assets/css/ie.min.css', array(), null, 'screen' );
@@ -46,21 +45,31 @@ function enqueue_clarity_scripts() {
 
 /**
  *
- * Enqueued backend admin CSS and JS
+ * Remove Gutenberg CSS as we do not use
+ */
+add_action( 'wp_print_styles', 'wps_deregister_gutenberg_css', 100 );
+
+function wps_deregister_gutenberg_css() {
+	wp_dequeue_style( 'wp-block-library' );
+	wp_deregister_style( 'wp-block-library' );
+}
+
+/**
  *
+ * Enqueued backend admin CSS and JS
  */
 add_action( 'admin_enqueue_scripts', 'clarity_admin_enqueue' );
 
 function clarity_admin_enqueue( $hook ) {
 
 	 // Warning message to editors when they don't enter a page title
-	 if ( $hook == 'post-new.php' || $hook == 'post.php' ) :
-		 wp_enqueue_script( 'force_title_script', get_stylesheet_directory_uri() . '/inc/admin/js/force-title.js', array(), null, false  );
-		 wp_enqueue_script( 'colour-contrast-checker', get_stylesheet_directory_uri() . '/inc/admin/js/colour-contrast-checker.js', array(), null, false  );
-		 wp_localize_script( 'colour-contrast-checker', 'myAjax', [ 'ajaxurl' => admin_url( 'admin-ajax.php' ) ] );
+	if ( $hook == 'post-new.php' || $hook == 'post.php' ) :
+		wp_enqueue_script( 'force_title_script', get_stylesheet_directory_uri() . '/inc/admin/js/force-title.js', array(), null, false );
+		wp_enqueue_script( 'colour-contrast-checker', get_stylesheet_directory_uri() . '/inc/admin/js/colour-contrast-checker.js', array(), null, false );
+		wp_localize_script( 'colour-contrast-checker', 'myAjax', [ 'ajaxurl' => admin_url( 'admin-ajax.php' ) ] );
 
-		 wp_register_style( 'page-search-dropdown-filter', get_stylesheet_directory_uri() . '/inc/admin/css/page-search-dropdown-filter.css', array(), '0.2.0', 'all' );
-		 wp_enqueue_style( 'page-search-dropdown-filter' );
+		wp_register_style( 'page-search-dropdown-filter', get_stylesheet_directory_uri() . '/inc/admin/css/page-search-dropdown-filter.css', array(), '0.2.0', 'all' );
+		wp_enqueue_style( 'page-search-dropdown-filter' );
 	 endif;
 
 }
diff --git a/wp-content/themes/clarity/src/components/c-external-services/style.styl b/wp-content/themes/clarity/src/components/c-external-services/style.styl
@@ -4,9 +4,17 @@
 .c-external-services {
   ul{
     li{
-      width: 50%;
-      float: left;
+      width: 100%;
       line-height: 1.5;
+      margin: $spacing;
+
+      +above(m) {
+        width: 50%;
+        float: left;
+        line-height: 1.5;
+        margin: 0;
+      }
+
       a{
         color: white;
         font-size: 16px;

diff --git a/wp-content/themes/clarity/src/components/c-logo-bar/style.styl b/wp-content/themes/clarity/src/components/c-logo-bar/style.styl
@@ -5,7 +5,6 @@
   position: relative;
   background-color: $dark;
   padding: $spacing $spacing $spacing;
-  height: 47px;
 
   a {
     text-decoration: none;
@@ -26,13 +25,12 @@
 
   &__switch {
     color: $light;
-    display block
+    display block;
+    padding: $spacing 0;
     text-decoration: none;
-
     +above(m) {
-      position: absolute;
-      top: 10%;
-      right: $spacing;
+      padding: 5px 0 0 0;
+      text-align: right;
     }
   }
 

diff --git a/wp-content/themes/clarity/src/components/c-logo-bar/view.php b/wp-content/themes/clarity/src/components/c-logo-bar/view.php
@@ -15,12 +15,20 @@
 
 <section class="c-logo-bar">
   <div class="u-wrapper">
-	<div class="u-wrapper__stack--left"><a href="/" rel="home">
-	  <img src="<?php echo $logo; ?>" alt="<?php echo $activeAgency['label']; ?> Logo">
-	  <span class="agency-title"><?php echo $activeAgency['label']; ?></span>
-	</a></div>
-	<?php if ( $page_name !== 'agency-switcher' ) : ?>
-	<div class="u-wrapper__stack--right"><a href="/agency-switcher" class="c-logo-bar__switch">Switch to other intranet</a></div>
-	<?php endif; ?>
+
+		<div class="u-wrapper__stack--left">
+			<a href="/" rel="home">
+			<img src="<?php echo $logo; ?>" alt="<?php echo $activeAgency['label']; ?> Logo">
+			<span class="agency-title l-half-section"><?php echo $activeAgency['label']; ?></span>
+			</a>
+		</div>
+
+		<div class="u-wrapper__stack--right">
+			<?php if ( $page_name !== 'agency-switcher' ) : ?>
+			<a href="/agency-switcher" class="c-logo-bar__switch">Switch to other intranet</a>
+			<?php endif; ?>
+		</div>
+
+	</div>
   </div>
 </section>
diff --git a/wp-content/themes/clarity/src/components/c-main-nav-bar/style.styl b/wp-content/themes/clarity/src/components/c-main-nav-bar/style.styl
@@ -39,12 +39,16 @@
 
   a {
     display: block;
-    text-align: center;
+    text-align: left;
     padding: $spacing $spacing*2;
     color: $text;
     text-decoration: none;
     font-weight: bold;
 
+    +above(m) {
+      text-align: center;
+     }
+
     &:hover {
       background-color: darken($boxBg, 15%);
       border-color: $border;

diff --git a/wp-content/themes/clarity/src/components/c-phase-banner/style.styl b/wp-content/themes/clarity/src/components/c-phase-banner/style.styl
@@ -2,7 +2,11 @@
 @require "../../globals/css/_toolkit"
 
 .c-phase-banner {
-  padding: $spacing 0 0 0;
+  padding: $spacing;
+
+  +above(m) {
+    padding: $spacing 0 0 0;
+  }
 
   &__icon {
     float:left;