[Constituencies] V1 Button with selection + description

mysociety · Apr 9, 2024 · 8809b24 · 8809b24
1 parent 165bd4d
commit 8809b24
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 9 deletions.
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
@@ -25,16 +25,20 @@ const app = createApp({
       area_type_changed: false, // so we know to reload the map
       area_types: [{
         slug: "WMC",
-        label: "Current constituencies"
+        label: "Current constituencies",
+        description: "This is the constituency currently represented by an MP in UK Parliament."
       }, {
         slug: "WMC23",
-        label: "Future constituencies"
+        label: "Future constituencies",
+        description: "This is the constituency in which parliamentary candidates will soon be standing for election."
       }, {
         slug: "STC",
-        label: "Single Tier councils"
+        label: "Single Tier councils",
+        description: "The local authority has powers over local services like education, planning, and transport."
       }, {
         slug: "DIS",
-        label: "District councils"
+        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"
       }],
       area_header_label: "constituencies",
 

diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
@@ -19,7 +19,7 @@ <h1 class="h2 mb-3">Explore</h1>
 
             <p>Use data from The Climate Coalition, its member organisations, and the wider sector, to narrow down your focus to the constituencies that matter to you.</p>
 
-            <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output format</h2>
+            <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Select an output format</h2>
 
             <ul class="nav nav-tabs mx-n4 mx-lg-n5 px-4 px-lg-5" id="myTab" role="tablist">
                 <li class="nav-item" role="presentation">
@@ -33,14 +33,54 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output f
 
         <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>
+
+                <!-- 
                 <label for="area_type" class="form-label text-muted">Constituency generation</label>
-                <p class="from-text fs-7">Parliamentary boundaries are changing at the next election. You can search by either the current or future constituencies. Some datasets have been <a href="{% url 'future_constituencies' %}" target="_blank" title="Opens in a new tab">automatically converted</a> to future constituencies.</p>
+                -->
+
+                <!--
                 <select id="area_type" class="form-select form-select-lg" v-model="area_type" @change="changeAreaType()">
                     <option v-for="t in area_types" :value="t['slug']">${ t.label }</option>
                 </select>
+                -->
+
+                <button type="button" class="btn btn-outline-secondary p-3 w-100 position-relative text-start" data-bs-toggle="modal" data-bs-target="#areaType">
+
+                    <p class="mb-1">Current constituencies</p>
+                    <small>These constituencies are the areas which MPs currently represent in UK Parliament.</small>
+                    <!--
+                    <small>This is the constituency in which parliamentary candidates will soon be standing for election.</small>
+                    -->
+                </button>
+
+                <div class="modal fade" id="areaType" tabindex="-1" aria-labelledby="areaTypeLabel" aria-hidden="true">
+                    <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                        <h5 class="modal-title" id="areaTypeLabel">Select area</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()">
+                                        <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">
+                                            ${ t.description }
+                                        </small>
+                                      </button>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
             </div>
 
-            <h2 class="h5 mb-4 text-primary">Step 2: Filter constituencies</h2>
+            <h2 class="h5 mb-4 text-primary">Filter constituencies</h2>
 
             <div ref="filtersContainer" class="mb-4" hidden>
                 <template v-for="filter in filters">
@@ -122,7 +162,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">Step 3: Shade constituencies (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Shade constituencies (optional)</h2>
 
                     <div ref="shaderContainer" hidden>
                         <div v-if="shader" class="filter mb-0" :class="{ 'bg-red-100': !shader.areas_available.includes(area_type) }">
@@ -162,7 +202,7 @@ <h3 class="h6">${ shader.title }</h3>
                 </div>
                 <div class="tab-pane" :class="{ 'active': tableViewActive }" id="options-table" role="tabpanel" aria-labelledby="tab-table" tabindex="0">
 
-                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 3: Add extra columns (optional)</h2>
+                    <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Add extra columns (optional)</h2>
 
                     <div ref="columnContainer" class="mb-4" hidden>
                     <template v-for="column in columns">