Merge pull request #397 from alphagov/dh-106-update-header-to-make-it…

…-easier-to-find-support-guidance-and-where-to-log-in Update header to make it easier to find support, guidance and where to log in
Crown-Commercial-Service · Feb 15, 2018 · 62e640e · 62e640e
2 parents a259903 + 5524e15
commit 62e640e
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,29 @@
 
 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
+- To get this working on a frontend application, do the following:
+  - in _base_page.html:
+    - Remove:
+      ```python
+        {% include "toolkit/phase-banner.html" %}
+      ```
+    - Add:
+      ```python
+        {% block inside_header %}
+          {% include "toolkit/inside-header.html" %}
+        {% endblock %}
+      ```
+  - Update the frontend toolkit to version 28.0.0
+  - Update the dmutils module to version 33.0.1 and above
+
 ## 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.4.0
+28.0.0
diff --git a/toolkit/scss/_proposition-header.scss b/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;
+                }
+            }
+        }
+    }
+}
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="{{ 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>