Try collapsing legend controls

acteng · Oct 8, 2024 · eece2e7 · eece2e7
1 parent 51e7749
commit eece2e7
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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