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

Adjust type and spacing to accommodate organisation breadcrumb

app/assets/stylesheets/app.scss

@@ -75,20 +75,10 @@ a {
 
   .heading-large,
   > .heading-medium {
-    margin: ($gutter / 3) 0 ($gutter / 3 * 2) 0;
+    margin: $gutter-half 0 ($gutter / 3 * 2) 0;
     word-wrap: break-word;
   }
 
-  > .grid-row:first-child  {
-
-    .heading-large,
-    .heading-medium {
-      margin: 10px 0 15px 0;
-      word-wrap: break-word;
-    }
-
-  }
-
 }
 
 .highlight {
@@ -286,5 +276,5 @@ details .arrow {
 }
 
 .heading-upcoming-jobs {
-  margin-top: $gutter / 3;
+  margin-top: $gutter-half;
 }

app/assets/stylesheets/components/message.scss

@@ -1,3 +1,29 @@
+@mixin separator {
+  display: inline-block;
+  vertical-align: top;
+  width: 20px;
+  height: $gutter;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -5px;
+    bottom: 1px;
+    right: 7px;
+    width: 9px;
+    height: 9px;
+    margin: auto 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border: solid;
+    border-width: 2px 2px 0 0;
+    border-color: $secondary-text-colour;
+  }
+}
+
 .message {
 
   &-name {
@@ -10,6 +36,13 @@
 
       &:hover {
         color: $link-hover-colour;
+
+        .message-name-separator {
+          &:before {
+            border-color: $link-hover-colour;
+          }
+        }
+
       }
 
       &:focus {
@@ -25,14 +58,20 @@
         }
 
       }
+
+      .message-name-separator {
+
+        margin-right: -2px;
+        margin-left: -2px;
+
+        &:before {
+          border-color: $link-colour;
+        }
+      }
     }
 
     &-separator {
-      display: inline-block;
-      vertical-align: top;
-      color: $secondary-text-colour;
-      padding: 0 4px 0 5px;
-      font-weight: normal;
+      @include separator;
     }
 
   }
@@ -46,7 +85,13 @@
 }
 
 #template-list {
+
   margin-top: $gutter;
+
+  &.top-gutter-0 {
+    margin-top: 0;
+  }
+
 }
 
 .template-list {
@@ -151,6 +196,11 @@
 
 .folder-heading {
 
+  .grid-row & {
+    margin: $gutter-half 0 20px 0;
+    word-wrap: break-word;
+  }
+
   a,
   &-folder,
   &-subfolder {
@@ -224,13 +274,7 @@
   }
 
   &-separator {
-
-    display: inline-block;
-    vertical-align: top;
-    color: $secondary-text-colour;
-    padding: 0 4px 0 5px;
-    font-weight: normal;
-
+    @include separator;
   }
 
   &-manage-link {

app/assets/stylesheets/components/navigation.scss

@@ -2,34 +2,44 @@
 
   padding: 0 $gutter 0 0;
 
+  $padding-top: 14px;
+  $padding-bottom: 11px;
+
   &-service {
 
-    padding: 11px 0 9px 0;
     border-bottom: 1px solid $border-colour;
     margin: 0 0 10px;
     position: relative;
+    font-size: 0;
 
     &-name {
       @include bold-19;
-      margin: 0 0 0 0;
+      padding: $padding-top 0 $padding-bottom 0;
+      display: inline-block;
+      max-width: 50%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     &-switch {
 
-      @include core-16;
+      @include core-19;
+      text-decoration: none;
       text-align: right;
       position: absolute;
       top: 0;
       right: 0;
-      padding: 13px 0 9px 15px;
+      padding: $padding-top 0 $padding-bottom $gutter-half;
 
       &:hover {
         color: $link-hover-colour;
+        text-decoration: underline;
       }
 
       &:focus {
         outline: none;
-        border-bottom: 4px solid $yellow;
+        border-bottom: 1px solid $yellow;
         border-left: 10px solid $yellow;
         border-right: 3px solid $yellow;
         right: -3px;
@@ -38,16 +48,66 @@
 
     }
 
+    &-back-to {
+
+      @include core-19;
+      padding: $padding-top $gutter-half $padding-bottom 0;
+      display: inline-block;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        color: $link-hover-colour;
+      }
+
+    }
+
   }
 
-  &-breadcrumb {
+  &-organisation-link {
+
+    @include core-19;
     display: inline-block;
-    width: 6px;
-    height: 11px;
-    margin: 0 5px;
-    background-image: file-url("separator-2x.png");
-    background-size: 6px 11px;
-    background-repeat: no-repeat;
+    max-width: 25%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+    text-decoration: none;
+    padding: $padding-top 20px $padding-bottom 0;
+    margin-right: 7px;
+    box-sizing: border-box;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+      bottom: 1px;
+      right: 6px;
+      width: 7px;
+      height: 7px;
+      margin: auto 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      border: solid;
+      border-width: 1px 1px 0 0;
+      border-color: $secondary-text-colour;
+    }
+
+    &:hover {
+      color: $link-hover-colour;
+      text-decoration: underline;
+    }
+
+    &:focus {
+      color: $text-colour;
+      outline: none;
+      box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
+    }
+
   }
 
   li {

app/assets/stylesheets/components/table.scss

@@ -5,7 +5,7 @@
 
 .table-heading {
   text-align: left;
-  margin: 40px 0 $gutter-half 0;
+  margin: $gutter-half 0 $gutter-half 0;
 }
 
 .dashboard-table {

app/assets/stylesheets/views/dashboard.scss

@@ -13,7 +13,7 @@
   }
 
   > .heading-medium:first-of-type {
-    margin-top: 10px;
+    margin-top: $gutter-half;
   }
 
 }

app/models/service.py

@@ -452,7 +452,10 @@ class Service(JSONModel):
                     "users_with_permission": folder["users_with_permission"]
                 }
                 while folder_attrs["parent_id"] is not None:
-                    folder_attrs["name"] = parent["name"] + " / " + folder_attrs["name"]
+                    folder_attrs["name"] = [
+                        parent["name"],
+                        folder_attrs["name"],
+                    ]
                     if parent["parent_id"] is None:
                         folder_attrs["parent_id"] = None
                     else:

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">