Update header to make it easier to find support, guidance and where t…

…o log in

    This is part of a larger piece of work to change the homepage styling so it is easier to find things on the page and consistent with other services in the service toolkit.

    Examples of other pages that use this pattern can be found under the components heading on the service toolkit. https://www.gov.uk/service-toolkit

    The code for these pages can be found here: https://github.com/alphagov/product-page-example

    As part of this work we will make support easier to find and remove the beta phase banner

    The guidance link would go to: https://www.gov.uk/government/collections/digital-marketplace-buyers-and-suppliers-information

    The GOV.UK Digital Marketplace logo would go to the digital marketplace home page.

    Ticket ID: https://trello.com/c/mityCieG/106-update-header-to-make-it-easier-to-find-support-guidance-and-where-to-log-in

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 Records breaking changes from major version bumps
 
+## 28.0.0
+
+PR: [#397](https://github.com/alphagov/digitalmarketplace-frontend-toolkit/pull/397)
+
+### What changed
+
+- Changes existing header to product page style header.
+- Product page Github: https://github.com/alphagov/product-page-example
+
 ## 27.0.0
 
 PR: [#395](https://github.com/alphagov/digitalmarketplace-frontend-toolkit/pull/395)

VERSION.txt

@@ -1 +1 @@
-27.3.0
+28.0.0

toolkit/scss/_proposition-header.scss

@@ -17,3 +17,71 @@
 .logout-button:hover {
     text-decoration: underline;
 }
+
+#global-header.with-proposition {
+    .header-wrapper {
+        .header-global {
+            @media only screen and (min-width: 769px)  {
+                width: 60%;
+            }
+
+            .header-logo {
+                width: auto;
+            }
+
+            .header-title {
+                float: left;
+                font-family: $toolkit-font-stack;
+                font-weight: normal; 
+                padding-top: 7px;
+                font-size: 24px;
+
+                @media only screen and (max-width: 800px)  {
+                    padding-left: 15px;
+                }
+
+                @media only screen and (min-width: 473px) and (max-width: 769px)  {
+                    padding-left: 0px;
+                }
+
+                a {
+                    color: $white;
+                    text-decoration: none;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .phase-tag {
+                margin-left: 10px;
+                margin-top: 4px;
+                vertical-align: top;
+            }
+        }
+
+        .header-proposition {
+            text-align: right;
+
+            @media only screen and (min-width: 769px)  {
+                width: 40%;
+            }
+
+            #proposition-links {
+                float: right;
+
+                li {
+                    @media only screen and (max-width: 769px)  {
+                        text-align: left;
+                        width: 100%;
+                    }
+                }
+
+                @media only screen and (max-width: 769px)  {
+                    float: none;
+                }
+            }
+        }
+    }
+}

toolkit/templates/inside-header.html

@@ -0,0 +1,4 @@
+<div class="header-title">
+    <a href="/">Digital Marketplace</a>
+    <strong class="phase-tag">BETA</strong>
+</div>

toolkit/templates/proposition-header.html

@@ -2,25 +2,37 @@
   <div class="content">
     <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
     <nav id="proposition-menu">
-      <a href="/" id="proposition-name">Digital Marketplace</a>
       <ul id="proposition-links">
-        {% if (current_user.is_authenticated() if logged_in is not defined else logged_in) %}
-          {% if (role or current_user.role) == 'buyer' %}
-            <li><a href="/buyers">View your account</a></li>
-          {% elif (role or current_user.role) == 'supplier' %}
-            <li><a href="/suppliers">View your account</a></li>
-          {% endif %}
-          {% for item in items %}
-            <li><a href="{{ item.link }}">{{ item.label }}</a></li>
-          {% endfor %}
-          <li>
-            <form method="post" action="/user/logout">
-              <input type="submit" class="logout-button" value="Log out" />
-              <input type="hidden" name="csrf_token" value="{{ csrf_token_value or csrf_token() }}" />
-            </form>
-          </li>
+        <li>
+          <a href="https://www.gov.uk/government/collections/digital-marketplace-buyers-and-suppliers-information">Guidance</a>
+        </li>
+        <li>
+          <a href="{{ url_for('external.help') }}">Help</a>
+        </li>
+        {% if (current_user.is_authenticated() if logged_in is not defined else logged_in) %} {% if (role or current_user.role) == 'buyer' %}
+        <li>
+          <a href="{{ url_for('external.buyer_dashboard') }}">View your account</a>
+        </li>
+        {% elif (role or current_user.role) == 'supplier' %}
+        <li>
+          <a href="{{ url_for('external.supplier_dashboard') }}">View your account</a>
+        </li>
+        {% endif %} 
+        {% for item in items %}
+        <li>
+          <a href="{{ item.link }}">{{ item.label }}</a>
+        </li>
+        {% endfor %}
+        <li>
+          <form method="post" action="{{ url_for('external.user_logout') }}">
+            <input type="submit" class="logout-button" value="Log out" />
+            <input type="hidden" name="csrf_token" value="{{ csrf_token_value or csrf_token() }}" />
+          </form>
+        </li>
         {% else %}
-          <li><a href="/user/login">Log in</a></li>
+        <li>
+          <a href="{{ url_for('external.render_login') }}">Log in</a>
+        </li>
         {% endif %}
       </ul>
     </nav>