fixup! Added UI for area type in Map page

hub/static/css/_explore.scss

@@ -48,13 +48,16 @@ $osm-sea-blue: rgb(168, 212, 243);
     background: $osm-sea-blue;
 }
 
-.explore-modal {
+.dataset-modal {
     // Full-width modal, even on large screens.
     .modal-dialog {
         margin: var(--#{$prefix}modal-margin);
         max-width: none;
     }
+}
 
+.dataset-modal,
+.area-type-modal {
     .list-group {
         --#{$prefix}list-group-item-padding-y: 0.75em;
     }

hub/static/js/explore.esm.js

@@ -26,21 +26,24 @@ const app = createApp({
       area_types: [{
         slug: "WMC",
         label: "Current constituencies",
-        description: "This is the constituency currently represented by an MP in UK Parliament."
+        short_label: "constituencies",
+        description: "These are the constituencies currently represented by MPs in UK Parliament."
       }, {
         slug: "WMC23",
         label: "Future constituencies",
-        description: "This is the constituency in which parliamentary candidates will soon be standing for election."
+        short_label: "constituencies",
+        description: "These are the constituencies in which parliamentary candidates will soon be standing for election."
       }, {
         slug: "STC",
         label: "Single Tier councils",
-        description: "The local authority has powers over local services like education, planning, and transport."
+        short_label: "councils",
+        description: "Includes county councils, London boroughs, unitary authorities, and metropolitain districts."
       }, {
         slug: "DIS",
         label: "District councils",
-        description: "A district council has certain exclusive responsibilities (e.g. housing and local planning) and shares others (e.g. recreation, town and country planning) with the council of the county to which the district belongs"
+        short_label: "councils",
+        description: "Some places are served by both a county council, and one of these district councils, which handle local services like rubbish collection and planning applications."
       }],
-      area_header_label: "constituencies",
 
       filters_applied: false, // were filters applied on the last Update?
       area_count: 0, // number of areas returned on last Update
@@ -494,11 +497,6 @@ const app = createApp({
           });
 
           this.area_count = Object.keys(features).length
-          if (["DIS", "STC"].includes(this.area_type)) {
-            this.area_header_label = "councils"
-          } else {
-            this.area_header_label = "constituencies"
-          }
 
           window.geojson.eachLayer(function (layer) {
             if ( features[layer.feature.properties.PCON13CD] ) {

hub/templates/hub/explore.html

@@ -33,15 +33,15 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Select an output format</h
 
         <div class="p-4 p-lg-5">
             <div class="mb-4 mb-lg-5" v-cloak>
-                <h2 class="h5 mt-2 mt-lg-3 mb-3 mb-lg-4 text-primary">Select an area type</h2>
+                <h2 class="h5 mb-3 mb-lg-4 text-primary">Select an area type</h2>
                 <button type="button" class="btn btn-outline-secondary p-3 pe-5 w-100 position-relative text-start" @click="selectAreaType">
-                    <p class="mb-1">${ getAreaType(area_type)["label"] }</p>
-                    <small>${ getAreaType(area_type)["description"] }</small>
+                    <p class="mb-2 lh-sm">${ getAreaType(area_type)["label"] }</p>
+                    <small class="d-block fw-normal">${ getAreaType(area_type)["description"] }</small>
                     {% include "hub/includes/icons/select.html" with classes="position-absolute top-50 start-95 translate-middle" %}
                 </button>
             </div>
 
-            <h2 class="h5 mb-4 text-primary">Filter constituencies</h2>
+            <h2 class="h5 mb-4 text-primary">Filter ${ getAreaType(area_type)["short_label"] }</h2>
 
             <div ref="filtersContainer" class="mb-4" hidden>
                 <template v-for="filter in filters">
@@ -123,7 +123,7 @@ <h3 class="h6">${ filter.title }</h3>
             <div class="tab-content">
                 <div class="tab-pane" :class="{ 'active': mapViewActive }" id="options-map" role="tabpanel" aria-labelledby="tab-map" tabindex="0">
 
-                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade constituencies (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade ${ getAreaType(area_type)["short_label"] } (optional)</h2>
 
                     <div ref="shaderContainer" hidden>
                         <div v-if="shader" class="filter mb-0" :class="{ 'bg-red-100': !shader.areas_available.includes(area_type) }">
@@ -214,16 +214,16 @@ <h3 class="h6 mb-0 me-auto">${ column.title }</h3>
             </template>
             <template v-else-if="filters_applied && area_count == 0">
                 {% include 'hub/includes/icons/exclamation.html' with classes="flex-grow-0 me-2" %}
-                No matching ${ area_header_label }
+                No matching ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else-if="filters_applied">
-                ${ area_count } matching ${ area_header_label }
+                ${ area_count } matching ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else-if="area_count">
-                ${ area_count } ${ area_header_label }
+                ${ area_count } ${ getAreaType(area_type)["short_label"] }
             </template>
             <template v-else>
-                No ${ area_header_label }
+                No ${ getAreaType(area_type)["short_label"] }
             </template>
         </div>
         <div class="explore-map" ref="map" :hidden="!mapViewActive"></div>

hub/templates/hub/includes/add-data-modal.html

@@ -1,4 +1,4 @@
-<div class="modal fade explore-modal" tabindex="-1" ref="datasetModal">
+<div class="modal fade dataset-modal" tabindex="-1" ref="datasetModal">
     <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content h-100 overflow-hidden shadow-lg">
             <div class="modal-header">

hub/templates/hub/includes/area-type-modal.html

@@ -1,24 +1,22 @@
-<div class="modal fade" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true" ref="areaTypeModal">
-    <div class="modal-dialog">
-    <div class="modal-content">
-        <div class="modal-header">
-        <h5 class="modal-title" id="areaTypeLabel">Select area type</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-            <div class="list-group">
-                <template v-for="t in area_types">
-                    <button class="list-group-item list-group-item-action" @click="changeAreaType(t.slug)">
+<div class="modal fade area-type-modal" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true" ref="areaTypeModal">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content overflow-hidden shadow-lg">
+            <div class="modal-header">
+                <h5 class="modal-title" id="areaTypeLabel">Select area type</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body bg-gray-100">
+                <div class="list-group">
+                    <button v-for="t in area_types" class="list-group-item list-group-item-action" @click="changeAreaType(t.slug)">
                         <div class="d-flex align-items-center mb-2">
                             <strong class="lh-sm me-auto pe-3">${ t.label }</strong>
                         </div>
-                        <small class="d-block fs-7 mb-2">
+                        <small class="d-block fs-7">
                             ${ t.description }
                         </small>
                     </button>
-                </template>
+                </div>
             </div>
         </div>
     </div>
-    </div>
 </div>