Merge pull request #1029 from alphagov/header-pattern

Use cross-GaaP pattern for admin headers

app/assets/stylesheets/_grids.scss

@@ -46,7 +46,7 @@
 .align-with-heading {
   display: block;
   text-align: center;
-  margin-top: $gutter;
+  margin-top: 13px;
   padding-left: 2px;
   padding-right: 2px;
 }

app/assets/stylesheets/app.scss

@@ -9,11 +9,11 @@
   #logo {
 
     white-space: nowrap;
-    font-size: 27px;
-    line-height: 32px;
 
-    img {
-      padding-right: 8px;
+    #product-name {
+      font-size: 24px;
+      font-weight: 400;
+      padding-left: 5px;
     }
 
   }
@@ -24,6 +24,9 @@
         padding: 0 0 0 15px;
       }
     }
+    #proposition-menu {
+      margin-top: 9px;
+    }
   }
 
 }
@@ -56,14 +59,16 @@ a {
 
 .column-main {
 
-  > .heading-large {
-    margin-top: $gutter;
+  > .heading-large,
+  > .heading-medium {
+    margin: 10px 0 15px 0;
   }
 
-  > .grid-row  {
+  > .grid-row:first-child  {
 
-    .heading-large {
-      margin-top: $gutter;
+    .heading-large,
+    .heading-medium {
+      margin: 10px 0 15px 0;
     }
 
   }

app/assets/stylesheets/components/navigation.scss

@@ -2,17 +2,35 @@
 
   padding: 0 $gutter 0 0;
 
+  &-service {
+
+    padding: 11px 0 9px 0;
+    border-bottom: 1px solid $border-colour;
+    margin: 0 0 10px;
+    position: relative;
+
+    h2 {
+      @include bold-19;
+      margin: 0 0 0 0;
+    }
+
+    &-switch {
+      @include core-16;
+      text-align: right;
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 13px 0 9px 15px;
+    }
+
+  }
+
   li {
     @include core-19;
     margin: 10px 0 0 0;
     list-style-type: none;
   }
 
-  h2 {
-    @include bold-19;
-    margin: $gutter 0 0 0;
-  }
-
   a {
 
     &:link,

app/assets/stylesheets/views/dashboard.scss

@@ -11,6 +11,11 @@
       border: 0;
     }
   }
+
+  > .heading-medium {
+    margin-top: 10px;
+  }
+
 }
 
 .keyline-block {

app/templates/admin_template.html

@@ -45,9 +45,6 @@
             <li>
               <a href="{{ url_for('main.user_profile') }}">{{ current_user.name }}</a>
             </li>
-            <li>
-              <a href="{{ url_for('main.choose_service') }}">Switch service</a>
-            </li>
             {% if current_user.has_permissions(admin_override=True) %}
                 <li>
                   <a href="{{ url_for('main.platform_admin') }}">Platform admin</a>
@@ -68,7 +65,7 @@
 {% endblock %}
 
 
-{% set global_header_text = "GOV.UK Notify" %}
+{% set global_header_text = "GOV.UK <span id='product-name'>Notify</span>"|safe %}
 
 {% set homepage_url = url_for('main.show_all_services_or_dashboard') %}
 

app/templates/main_nav.html

@@ -42,9 +42,6 @@
   {% endcall %}
 {% else %}
 <nav class="navigation">
-  <h2 class="navigation-service-name">
-    {{ current_service.name }}
-  </h2>
   <ul>
     <li><a href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
   {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %}

app/templates/withnav_template.html

@@ -1,6 +1,12 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
+  <div class="navigation-service">
+    <h2 class="navigation-service-name">
+      {{ current_service.name }}
+    </h2>
+    <a href="{{ url_for('main.choose_service') }}" class="navigation-service-switch">Switch service</a>
+  </div>
   <div class="grid-row">
     <div class="column-one-third">
       {% include "main_nav.html" %}

package.json

@@ -23,7 +23,7 @@
     "diff-dom": "2.1.0",
     "govuk-elements-sass": "1.1.1",
     "govuk_frontend_toolkit": "4.6.0",
-    "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.18.0/jinja_govuk_template-0.18.0.tgz",
+    "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.19.1/jinja_govuk_template-0.19.1.tgz",
     "gulp": "3.9.0",
     "gulp-add-src": "0.2.0",
     "gulp-babel": "6.1.1",