From d3a599a3d5b4695f69ab36705356ade681a47d35 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 2 Oct 2020 14:51:57 +0100
Subject: [PATCH] Adjust spacing and border on details map
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We hide the map inside a details element.

Because the map has such a strong shape I don’t think it needs the grey
border to contain it. This commit removes the border, and adjusts the
spacing to group things by proximity alone.

By removing the border and associated gutter we can give more space to
the map, and make the page look less busy.
---
 .../stylesheets/components/area-list.scss      | 18 +++++++++++++++++-
 .../views/broadcast/preview-areas.html         |  2 +-
 .../views/broadcast/view-message.html          | 10 ++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index 43f1de582..f7df53b55 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -88,7 +88,7 @@
   display: inline-block;
   position: relative;
   margin-right: govuk-spacing(3);
-  margin-bottom: govuk-spacing(5);
+  margin-bottom: govuk-spacing(4);
   height: govuk-spacing(7);
   padding-left: govuk-spacing(8);
   line-height: govuk-spacing(7);
@@ -132,3 +132,19 @@
   }
 
 }
+
+.map-details {
+  .govuk-details__summary {
+    display: block;
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+    margin-top: 1px;
+  }
+
+  .govuk-details__text {
+    padding: 0;
+    border: none;
+    border-bottom: 1px solid $border-colour;
+    margin-top: -1px;
+  }
+}
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 9e1efad65..327355ac5 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -53,7 +53,7 @@
 
   {% if broadcast_message.areas %}
     {{ map(broadcast_message) }}
-    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
+    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
       {{ page_footer('Continue to preview') }}
     </form>
   {% endif %}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 236090bc5..e6028d955 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -138,10 +138,12 @@
     {% endif %}
   {% endfor %}
 
-  {{ govukDetails({
-    "summaryText": "Show map",
-    "html": map(broadcast_message)
-  }) }}
+  <div class="map-details">
+    {{ govukDetails({
+      "summaryText": "Show map of areas",
+      "html": map(broadcast_message)
+    }) }}
+  </div>
 
   {{ broadcast_message.template|string }}