From eece2e7bf6cf2b8b083c35b83839756252feab0c Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Tue, 8 Oct 2024 15:28:35 +0100
Subject: [PATCH] Try collapsing legend controls

---
 src/lib/browse/layers/LayerControl.svelte       | 17 +++++++++++++++--
 .../layers/areas/CensusOutputAreas.svelte       |  2 +-
 src/lib/browse/layers/areas/Pollution.svelte    |  2 +-
 src/lib/browse/layers/lines/CyclePaths.svelte   |  4 ++--
 src/lib/browse/layers/lines/PCT.svelte          |  2 +-
 src/lib/browse/layers/lines/RoadSpeeds.svelte   |  2 +-
 src/lib/browse/layers/points/Education.svelte   |  4 ++--
 src/lib/browse/layers/points/Problems.svelte    |  2 +-
 src/lib/browse/layers/points/Stats19.svelte     |  4 ++--
 src/lib/browse/schemes/SchemesLayer.svelte      | 14 ++++++++++++--
 10 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/lib/browse/layers/LayerControl.svelte b/src/lib/browse/layers/LayerControl.svelte
index 94aff752..0e009669 100644
--- a/src/lib/browse/layers/LayerControl.svelte
+++ b/src/lib/browse/layers/LayerControl.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import { HelpButton } from "lib/common";
-  import { SecondaryButton, Checkbox, CheckboxGroup } from "govuk-svelte";
+  import {
+    CollapsibleCard,
+    SecondaryButton,
+    Checkbox,
+    CheckboxGroup,
+  } from "govuk-svelte";
   import { onDestroy } from "svelte";
   import { activeLayers, layerLegends } from "./stores";
 
@@ -10,6 +15,8 @@
   export let title: string;
   // This must be bound to state that controls the layer display and URL
   export let show: boolean;
+  // If true, use a CollapsibleCard
+  export let bigControls = false;
 
   // If the layer is initially shown (from the URL state), make it active
   if (show) {
@@ -84,6 +91,12 @@
     </div>
   </CheckboxGroup>
   {#if show}
-    <slot name="controls" />
+    {#if bigControls}
+      <CollapsibleCard label={title} open>
+        <slot name="controls" />
+      </CollapsibleCard>
+    {:else}
+      <slot name="controls" />
+    {/if}
   {/if}
 </div>
diff --git a/src/lib/browse/layers/areas/CensusOutputAreas.svelte b/src/lib/browse/layers/areas/CensusOutputAreas.svelte
index 3d149aa7..9320021b 100644
--- a/src/lib/browse/layers/areas/CensusOutputAreas.svelte
+++ b/src/lib/browse/layers/areas/CensusOutputAreas.svelte
@@ -70,7 +70,7 @@
   }
 </script>
 
-<LayerControl {name} title="2021 census" bind:show={$state.show}>
+<LayerControl {name} title="2021 census" bind:show={$state.show} bigControls>
   <span slot="help">
     {#if $state.kind == "percent_households_with_car"}
       <p>
diff --git a/src/lib/browse/layers/areas/Pollution.svelte b/src/lib/browse/layers/areas/Pollution.svelte
index c657dfd9..344f76a6 100644
--- a/src/lib/browse/layers/areas/Pollution.svelte
+++ b/src/lib/browse/layers/areas/Pollution.svelte
@@ -82,7 +82,7 @@
   }
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       Most layers show air quality data from <ExternalLink
diff --git a/src/lib/browse/layers/lines/CyclePaths.svelte b/src/lib/browse/layers/lines/CyclePaths.svelte
index cf1ecf1b..1b4f8b37 100644
--- a/src/lib/browse/layers/lines/CyclePaths.svelte
+++ b/src/lib/browse/layers/lines/CyclePaths.svelte
@@ -98,7 +98,7 @@
   }
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       This shows different types of cycle path, according to OpenStreetMap (as
@@ -133,7 +133,7 @@
     <OsmLicense />
   </span>
 
-  <div slot="controls" style="border: 1px solid black; padding: 8px;">
+  <div slot="controls">
     <CheckboxGroup small>
       {#each legend as [kind, label, color]}
         <Checkbox bind:checked={$state[kind]}>
diff --git a/src/lib/browse/layers/lines/PCT.svelte b/src/lib/browse/layers/lines/PCT.svelte
index 25eb5744..6a23d2a4 100644
--- a/src/lib/browse/layers/lines/PCT.svelte
+++ b/src/lib/browse/layers/lines/PCT.svelte
@@ -66,7 +66,7 @@
   }
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       The PCT shows major links on the transport network on which there is high
diff --git a/src/lib/browse/layers/lines/RoadSpeeds.svelte b/src/lib/browse/layers/lines/RoadSpeeds.svelte
index 5439f657..66cd3dae 100644
--- a/src/lib/browse/layers/lines/RoadSpeeds.svelte
+++ b/src/lib/browse/layers/lines/RoadSpeeds.svelte
@@ -54,7 +54,7 @@
   };
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       The average speed data is collected over a six-month period by <ExternalLink
diff --git a/src/lib/browse/layers/points/Education.svelte b/src/lib/browse/layers/points/Education.svelte
index 1b043913..2869816c 100644
--- a/src/lib/browse/layers/points/Education.svelte
+++ b/src/lib/browse/layers/points/Education.svelte
@@ -49,7 +49,7 @@
   }
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       This shows different places of education according to OpenStreetMap (as of
@@ -58,7 +58,7 @@
     <OsmLicense />
   </span>
 
-  <div slot="controls" style="border: 1px solid black; padding: 8px;">
+  <div slot="controls">
     <CheckboxGroup small>
       <Checkbox bind:checked={$state.school}>
         <ColorLegend color={colors.education.schools} />
diff --git a/src/lib/browse/layers/points/Problems.svelte b/src/lib/browse/layers/points/Problems.svelte
index fd13b269..f99f7bb7 100644
--- a/src/lib/browse/layers/points/Problems.svelte
+++ b/src/lib/browse/layers/points/Problems.svelte
@@ -39,7 +39,7 @@
   ];
 </script>
 
-<LayerControl {name} {title} bind:show={$show}>
+<LayerControl {name} {title} bind:show={$show} bigControls>
   <span slot="help">
     <p>
       Critical issues and policy conflicts from the Design Assistance Log. This
diff --git a/src/lib/browse/layers/points/Stats19.svelte b/src/lib/browse/layers/points/Stats19.svelte
index d4ef1e41..91991a0d 100644
--- a/src/lib/browse/layers/points/Stats19.svelte
+++ b/src/lib/browse/layers/points/Stats19.svelte
@@ -167,7 +167,7 @@
   ];
 </script>
 
-<LayerControl {name} {title} bind:show={$state.show}>
+<LayerControl {name} {title} bind:show={$state.show} bigControls>
   <span slot="help">
     <p>
       This layer shows collisions recorded in the <ExternalLink
@@ -204,7 +204,7 @@
     <OsOglLicense />
   </span>
 
-  <div slot="controls" style="border: 1px solid black; padding: 8px;">
+  <div slot="controls">
     <CheckboxGroup small>
       <Checkbox bind:checked={$state.pedestrians}>Pedestrians</Checkbox>
       <Checkbox bind:checked={$state.cyclists}>Cyclists</Checkbox>
diff --git a/src/lib/browse/schemes/SchemesLayer.svelte b/src/lib/browse/schemes/SchemesLayer.svelte
index 5161e0ed..2dfeb67b 100644
--- a/src/lib/browse/schemes/SchemesLayer.svelte
+++ b/src/lib/browse/schemes/SchemesLayer.svelte
@@ -88,7 +88,12 @@
   {/if}
 
   {#if $atfSchemes.size > 0}
-    <LayerControl name={atfName} title={atfTitle} bind:show={$atfShow}>
+    <LayerControl
+      name={atfName}
+      title={atfTitle}
+      bind:show={$atfShow}
+      bigControls
+    >
       <span slot="help">
         <p>
           <WarningIcon text="Scheme data caveats" />Please note there are data
@@ -125,7 +130,12 @@
   {/if}
 
   {#if $lcwipSchemes.size > 0}
-    <LayerControl name={lcwipName} title={lcwipTitle} bind:show={$lcwipShow}>
+    <LayerControl
+      name={lcwipName}
+      title={lcwipTitle}
+      bind:show={$lcwipShow}
+      bigControls
+    >
       <span slot="help">
         <p>
           <WarningIcon text="Scheme data caveats" />Please note there are data