Add a key to the map

To help people understand that broadcasting is not a precise technology,
we have shown the estimate bleed area on the map.

Because people aren’t familiar with the technology a visual only clue is
not enough. So this commit adds a key to the map, which explains what
the different outlines mean.

It also removes the sticky footer from this page to:
- make the key visible on the page
- make people scroll and review the map before they get to the big green
  button
- not reduce the size of the map any further

app/assets/stylesheets/components/area-list.scss

@@ -1,7 +1,7 @@
 .area-list {
 
   display: inline-block;
-  
+
   &-item {
 
     display: inline-block;
@@ -74,3 +74,48 @@
   }
 
 }
+
+#map {
+  z-index: 50;
+  margin-bottom: govuk-spacing(4);
+}
+
+.area-key {
+
+  display: inline-block;
+  position: relative;
+  margin-right: govuk-spacing(3);
+  margin-bottom: govuk-spacing(5);
+  height: govuk-spacing(7);
+  padding-left: govuk-spacing(8);
+  line-height: govuk-spacing(7);
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: govuk-spacing(7);
+    height: govuk-spacing(7);
+    box-sizing: border-box;
+    margin-right: govuk-spacing(1);
+  }
+
+  &--certain {
+    &:before {
+      border: 4px solid rgba($white, 0.1);
+      background: rgba($govuk-blue, 0.6);
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
+
+  &--likely {
+    &:before {
+      padding: 1px;
+      border: 2px solid $govuk-blue;
+      background: rgba($govuk-blue, 0.2);
+    }
+  }
+
+}

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -5,10 +5,10 @@
   {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        opacity: 0.5,
+        opacity: 0.8,
-        color: '#2B8CC4', // $light-blue
+        color: '#005ea5', // $light-blue
-        fillColor: '#2B8CC4', // $light-blue
+        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.2,
+        fillOpacity: 0.15,
         weight: 2
       })
     );
@@ -17,10 +17,10 @@
   {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        opacity: 0.1,
+        opacity: 0.3,
-        color: '#2B8CC4', // $black
+        color: '#005ea5', // $black
-        fillColor: '#2B8CC4', // $light-blue
+        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.4,
+        fillOpacity: 0.3,
         weight: 1
       })
     );

app/templates/views/broadcast/partials/area-map-stylesheets.html

@@ -1,8 +1 @@
 <link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
-<style>
-  #map {
-    z-index: 50;
-    margin-bottom: 30px;
-    border: 1px solid #b1b4b6;
-  }
-</style>

app/templates/views/broadcast/preview-areas.html

@@ -1,6 +1,6 @@
 {% from "components/button/macro.njk" import govukButton %}
 {% from "components/page-header.html" import page_header %}
-{% from "components/page-footer.html" import sticky_page_footer %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% extends "withnav_template.html" %}
 
@@ -52,8 +52,16 @@
 
   {% if broadcast_message.areas %}
     <div id="map"></div>
+    <div>
+      <div class="area-key area-key--certain">
+        Will get alert
+      </div>
+      <div class="area-key area-key--likely">
+        Likely to get alert
+      </div>
+    </div>
     <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
-      {{ sticky_page_footer('Continue to preview') }}
+      {{ page_footer('Continue to preview') }}
     </form>
   {% endif %}