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
Crown-Commercial-Service · Feb 1, 2018 · b1f2f5c · b1f2f5c
1 parent 1d44c70
commit b1f2f5c
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 18 deletions.
diff --git a/CHANGELOG.md b/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)

diff --git a/VERSION.txt b/VERSION.txt
@@ -1 +1 @@
-27.2.0
+28.0.0
diff --git a/toolkit/scss/_proposition-header.scss b/toolkit/scss/_proposition-header.scss
@@ -17,3 +17,69 @@
 .logout-button:hover {
     text-decoration: underline;
 }
+
+#global-header.with-proposition {
+    .header-wrapper {
+        .header-global {
+            width: 50%;
+
+            @media only screen and (max-width: 767px)  {
+                width: 100%;
+            }
+
+            .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: 400px)  {
+                    padding-left: 15px;
+                }
+
+                a {
+                    color: $white;
+                    text-decoration: none;
+                }
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+
+            .phase-tag {
+                margin-left: 10px;
+                margin-top: 8px;
+            }
+        }
+
+        .header-proposition {
+            text-align: right;
+            width: 50%;
+
+            @media only screen and (max-width: 767px)  {
+                width: 100%;
+            }
+
+            #proposition-links {
+                float: right;
+
+                li {
+                    @media only screen and (max-width: 767px)  {
+                        text-align: left;
+                        width: 100%;
+                    }
+                }
+
+                @media only screen and (max-width: 767px)  {
+                    float: none;
+                }
+            }
+        }
+    }
+}
diff --git a/toolkit/templates/inside-header.html b/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>
diff --git a/toolkit/templates/proposition-header.html b/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="/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>
         {% else %}
-          <li><a href="/user/login">Log in</a></li>
+        <li>
+          <a href="/user/login">Log in</a>
+        </li>
         {% endif %}
       </ul>
     </nav>