Add a grid layout to the choose services page

This allows us to split the page into sections without over-using bold
fonts. And it means that when the user clicks into a service from this
page the column layout stays the same 1/4 – 3/4, rather than jumping
about so much.

app/templates/views/choose-account.html

@@ -2,11 +2,17 @@
 
 {% macro service_list(heading, show_heading, organisations=[], services=[]) %}
   {% if show_heading %}
-    <h2 class="heading-small">
-      {{ heading }}
-    </h2>
+    <div class="grid-row">
+      <div class="column-one-quarter">
+        <h2>
+          {{ heading }}
+        </h2>
+      </div>
+      <div class="column-three-quarters">
+        <ul>
+  {% else %}
+    <ul>
   {% endif %}
-  <ul>
   {% for org in organisations %}
     <li class="browse-list-item">
       <a href="{{ url_for('.organisation_dashboard', org_id=org.id) }}" class="browse-list-link">{{ org.name }}</a>
@@ -21,7 +27,14 @@
       <a href="{{ url_for('.service_dashboard', service_id=service.id) }}" class="browse-list-link">{{ service.name }}</a>
     </li>
   {% endfor %}
-  </ul>
+  {% if show_heading %}
+        </ul>
+      </div>
+    </div>
+  {% else %}
+    </ul>
+  {% endif %}
+  <div class="keyline-block"></div>
 {% endmacro %}
 
 {% block per_page_title %}
@@ -36,13 +49,19 @@
   <nav class="browse-list">
 
     {% if current_user.platform_admin %}
-      <h2>Platform admin</h2>
-      <ul>
-        <li class="browse-list-item">
-          <a href="{{ url_for('.organisations') }}" class="browse-list-link">All organisations</a>
-        </li>
-      <ul>
-      <div class ="keyline-block"></div>
+      <div class="grid-row">
+        <div class="column-one-quarter">
+          <h2>
+            Platform admin
+          </h2>
+        </div>
+        <div class="column-three-quarters">
+          <li class="browse-list-item">
+            <a href="{{ url_for('.organisations') }}" class="browse-list-link">All organisations</a>
+          </li>
+        </div>
+      </div>
+      <div class="keyline-block"></div>
     {% endif %}
 
     {% if current_user.organisations %}

app/templates/views/organisations/index.html

@@ -4,32 +4,56 @@
 {% from "components/page-header.html" import page_header %}
 
 {% block per_page_title %}
-  Organisations
+  All organisations
 {% endblock %}
 
-{% block maincolumn_content %}
+{% block fullwidth_content %}
 
-  {{ page_header(
-    'Organisations',
-    back_link=url_for('main.choose_account'),
-  ) }}
+  <div id="content">
+    <div class="navigation-service">
+      <div class="navigation-service-name">
+        &nbsp;
+      </div>
+      <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>
+    </div>
 
-  {{ live_search(target_selector='.browse-list-item', show=True, form=search_form, label='Search by name') }}
+    <main role="main">
+      <div class="grid-row top-gutter-2-3">
+        <div class="column-one-quarter">
+          <h1>
+            All organisations
+          </h1>
+        </div>
+        <div class="column-three-quarters">
 
-  <nav class="browse-list">
-    <ul>
-      {% for org in organisations %}
-        <li class="browse-list-item">
-          <a href="{{ url_for('main.organisation_dashboard', org_id=org['id']) }}" class="browse-list-link">{{ org['name'] }}</a>
-          {% if not org['active'] %}
-            <span class="table-field-status-default heading-medium">- archived</span>
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
-  <div class="js-stick-at-bottom-when-scrolling">
-    <a href="{{ url_for('main.add_organisation') }}" class="button-secondary">New organisation</a>
+          {{ live_search(target_selector='.browse-list-item', show=True, form=search_form, label='Search by name') }}
+
+          <nav class="browse-list">
+            <ul>
+              {% for org in organisations %}
+                <li class="browse-list-item">
+                  <a href="{{ url_for('main.organisation_dashboard', org_id=org['id']) }}" class="browse-list-link">{{ org['name'] }}</a>
+                  {% if not org['active'] %}
+                    <span class="table-field-status-default heading-medium">- archived</span>
+                  {% endif %}
+                </li>
+              {% endfor %}
+            </ul>
+          </nav>
+
+        </div>
+      </div>
+      <div class="js-stick-at-bottom-when-scrolling">
+        <div class="grid-row">
+          <div class="column-one-quarter">
+            &nbsp;
+          </div>
+          <div class="column-three-quarters">
+            <a href="{{ url_for('main.add_organisation') }}" class="button-secondary">New organisation</a>
+          </div>
+        </div>
+      </div>
+    </main>
   </div>
 
 {% endblock %}

tests/app/main/views/organisations/test_organisation.py

@@ -37,7 +37,7 @@ def test_organisation_page_shows_all_organisations(
 
     assert normalize_spaces(
         page.select_one('h1').text
-    ) == "Organisations"
+    ) == "All organisations"
 
     for index, org in enumerate(orgs):
         assert page.select('a.browse-list-link')[index].text == org['name']