Merge pull request #3024 from alphagov/style-org-breadcrumb

Adjust type and spacing to accommodate organisation breadcrumb

app/templates/components/folder-path.html

@@ -79,5 +79,5 @@
 
 
 {% macro folder_path_separator() %}
-  <span class="folder-heading-separator">/</span>
+  <span class="folder-heading-separator"></span>
 {% endmacro %}

app/templates/org_template.html

@@ -7,11 +7,10 @@
 {% block fullwidth_content %}
   <div id="content">
     <div class="navigation-service">
+      {% if current_user.platform_admin %}
+        <a href="{{ url_for('.organisations') }}" class="navigation-organisation-link">All organisations</a>
+      {% endif %}
       <div class="navigation-service-name">
-        {% if current_user.platform_admin %}
-          <a href="{{ url_for('.organisations') }}">Organisations</a>
-          <span class="navigation-breadcrumb"></span>
-        {% endif %}
         {{ current_org.name }}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>

app/templates/views/organisations/add-organisation.html

@@ -12,9 +12,7 @@
 {% block fullwidth_content %}
   <div id="content">
     <div class="navigation-service">
-      <div class="navigation-service-name">
-        <a href="{{ url_for('.organisations') }}">All organisations</a>
-      </div>
+      <a href="{{ url_for('.organisations') }}" class="navigation-service-back-to">All organisations</a>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>
     </div>
 

app/templates/views/templates/_template_list.html

@@ -1,6 +1,17 @@
 {% from "components/checkbox.html" import unlabelled_checkbox %}
 {% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
 
+{% macro format_item_name(name) -%}
+  {%- if name is string -%}
+    {{- name -}}
+  {%- else -%}
+    {%- for part in name -%}
+      {{- format_item_name(part) -}}
+      {%- if not loop.last %} <span class="message-name-separator"></span> {% endif -%}
+    {%- endfor -%}
+  {% endif %}
+{%- endmacro %}
+
 {% if template_list.template_folder_id and not template_list.templates_to_show %}
   <p class="template-list-empty">
     {% if template_list.folder_is_empty %}
@@ -10,7 +21,7 @@
     {% endif %}
   </p>
 {% else %}
-  <nav id=template-list>
+  <nav id="template-list" class="{{ 'top-gutter-0' if (not show_template_nav and not show_search_box) else '' }}">
     {% for item in template_list %}
       <div class="template-list-item {% if current_user.has_permissions('manage_templates') %}template-list-item-with-checkbox{% endif %} {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
         {% if current_user.has_permissions('manage_templates') %}
@@ -24,16 +35,16 @@
         <h2 class="message-name">
           {% for ancestor in item.ancestors %}
             <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="template-list-folder">
-              {{ ancestor.name }}
-            </a> <span class="message-name-separator">/</span>
+              {{- format_item_name(ancestor.name) -}}
+            </a> <span class="message-name-separator"></span>
           {% endfor %}
           {% if item.is_folder %}
             <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="template-list-folder">
-              <span class="live-search-relevant">{{ item.name }}</span>
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% else %}
             <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="template-list-template">
-              <span class="live-search-relevant">{{ item.name }}</span>
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% endif %}
         </h2>

app/templates/views/templates/choose.html

@@ -44,7 +44,7 @@
   {% else %}
 
     <div class="grid-row">
-      <div class="{% if current_user.has_permissions('manage_templates') %} column-five-sixths {% else %} column-two-thirds {% endif %}">
+      <div class="{% if current_user.has_permissions('manage_templates') %} column-five-sixths {% else %} column-whole {% endif %}">
         {{ folder_path(
           folders=template_folder_path,
           service_id=current_service.id,

app/templates/views/templates/copy.html

@@ -30,7 +30,7 @@
                   <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="template-list-folder">
                 {% endif %}
                   {{ ancestor.name }}
-                </a> <span class="message-name-separator">/</span>
+                </a> <span class="message-name-separator"></span>
               {% endfor %}
               {% if item.is_service %}
                 <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="template-list-folder">

app/templates/withnav_template.html

@@ -7,14 +7,13 @@
 {% block fullwidth_content %}
   <div id="content">
     <div class="navigation-service">
-      <div class="navigation-service-name">
-        {% if current_service.organisation_id %}
-          {% if current_user.platform_admin or
-            (current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
-            <a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation.id) }}">{{ current_service.organisation.name }}</a>
-            <span class="navigation-breadcrumb"></span>
-          {% endif %}
+      {% if current_service.organisation_id %}
+        {% if current_user.platform_admin or
+          (current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
+          <a href="{{ url_for('.organisation_dashboard', org_id=current_service.organisation_id) }}" class="navigation-organisation-link">{{ current_service.organisation.name }}</a>
         {% endif %}
+      {% endif %}
+      <div class="navigation-service-name">
         {{ current_service.name }}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>

app/templates/withoutnav_template.html

@@ -4,7 +4,7 @@
   <div id="content">
     {% if current_service and current_service.active and current_user.is_authenticated and current_user.belongs_to_service(current_service.id) %}
     <div class="navigation-service">
-      <a href="{{ url_for('main.show_accounts_or_dashboard') }}">Back to {{ current_service.name }}</a>
+      <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="navigation-service-back-to">Back to {{ current_service.name }}</a>
     </div>
     {% endif %}
     <main role="main">