Work around pico-ambiguity

Review note: you might want to hide whitespace diff
a-b-street · Feb 13, 2025 · 246d96f · 246d96f
1 parent b06202d
commit 246d96f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 99 deletions.
diff --git a/web/src/CntChooseArea.svelte b/web/src/CntChooseArea.svelte
@@ -106,110 +106,110 @@
   }
 </script>
 
-<div class="left pico">
-  <h2>Connected Neighbourhoods Tool</h2>
-
-  <fieldset>
-    <label>
-      <input type="radio" value="LAD" bind:group={kind} />
-      Local Authority Districts
-    </label>
-    <label>
-      <input type="radio" value="REGION" bind:group={kind} />
-      Regions
-    </label>
-  </fieldset>
-
-  <p>Choose a boundary below or on the map to begin sketching:</p>
-  <ul style="columns: 3">
-    {#if kind == "LAD"}
-      {#each ladNames as name}
-        <li><Link on:click={() => newFile(`LAD_${name}`)}>{name}</Link></li>
-      {/each}
-    {:else}
-      {#each regionNames as name}
-        <li><Link on:click={() => newFile(`REGION_${name}`)}>{name}</Link></li>
-      {/each}
-    {/if}
-  </ul>
-
-  <hr />
-
-  <p>Or continue with a previously opened file:</p>
-
-  <div style="columns: 2">
-    {#each listAllFiles() as [boundary, list]}
-      <div class="group">
-        <h2>{boundary}</h2>
-        {#each list as filename}
-          <p>
-            <a href={`index.html?project=ltn_cnt/${boundary}/${filename}`}>
-              {filename}
-            </a>
-          </p>
+<div style="display: flex">
+  <div class="pico left">
+    <h2>Connected Neighbourhoods Tool</h2>
+
+    <fieldset>
+      <label>
+        <input type="radio" value="LAD" bind:group={kind} />
+        Local Authority Districts
+      </label>
+      <label>
+        <input type="radio" value="REGION" bind:group={kind} />
+        Regions
+      </label>
+    </fieldset>
+
+    <p>Choose a boundary below or on the map to begin sketching:</p>
+    <ul style="columns: 3">
+      {#if kind == "LAD"}
+        {#each ladNames as name}
+          <li><Link on:click={() => newFile(`LAD_${name}`)}>{name}</Link></li>
+        {/each}
+      {:else}
+        {#each regionNames as name}
+          <li>
+            <Link on:click={() => newFile(`REGION_${name}`)}>{name}</Link>
+          </li>
         {/each}
-      </div>
-    {/each}
+      {/if}
+    </ul>
+
+    <hr />
+
+    <p>Or continue with a previously opened file:</p>
+
+    <div style="columns: 2">
+      {#each listAllFiles() as [boundary, list]}
+        <div class="group">
+          <h2>{boundary}</h2>
+          {#each list as filename}
+            <p>
+              <a href={`index.html?project=ltn_cnt/${boundary}/${filename}`}>
+                {filename}
+              </a>
+            </p>
+          {/each}
+        </div>
+      {/each}
+    </div>
+
+    <style>
+      .group {
+        border: 1px solid black;
+        padding: 4px;
+        margin-bottom: 8px;
+        break-inside: avoid-column;
+      }
+    </style>
   </div>
 
-  <style>
-    .group {
-      border: 1px solid black;
-      padding: 4px;
-      margin-bottom: 8px;
-      break-inside: avoid-column;
-    }
-  </style>
-</div>
-
-<div class="main">
-  <div style="position: relative; width: 100%; height: 100%;">
-    <MapLibre
-      style={`https://api.maptiler.com/maps/streets-v2/style.json?key=${maptilerApiKey}`}
-      standardControls
-      bounds={[-8.943, 54.631, -0.901, 59.489]}
-      on:error={(e) => {
-        // @ts-expect-error ErrorEvent isn't exported
-        console.log(e.detail.error);
-      }}
-    >
-      <GeoJSON data={gj} generateId>
-        <FillLayer
-          filter={["==", ["get", "kind"], kind]}
-          paint={{
-            "fill-color": "rgb(200, 100, 240)",
-            "fill-outline-color": "rgb(200, 100, 240)",
-            "fill-opacity": hoverStateFilter(0.0, 0.5),
-          }}
-          beforeId="Road labels"
-          manageHoverState
-          hoverCursor="pointer"
-          on:click={onClick}
-        >
-          <Popup openOn="hover" let:props>
-            <p>{props.name}</p>
-          </Popup>
-        </FillLayer>
-
-        <LineLayer
-          filter={["==", ["get", "kind"], kind]}
-          paint={{
-            "line-color": "rgb(200, 100, 240)",
-            "line-width": 2.5,
-          }}
-          beforeId="Road labels"
-          manageHoverState
-        />
-      </GeoJSON>
-    </MapLibre>
+  <div class="main">
+    <div style="position: relative; width: 100%; height: 100%;">
+      <MapLibre
+        style={`https://api.maptiler.com/maps/streets-v2/style.json?key=${maptilerApiKey}`}
+        standardControls
+        bounds={[-8.943, 54.631, -0.901, 59.489]}
+        on:error={(e) => {
+          // @ts-expect-error ErrorEvent isn't exported
+          console.log(e.detail.error);
+        }}
+      >
+        <GeoJSON data={gj} generateId>
+          <FillLayer
+            filter={["==", ["get", "kind"], kind]}
+            paint={{
+              "fill-color": "rgb(200, 100, 240)",
+              "fill-outline-color": "rgb(200, 100, 240)",
+              "fill-opacity": hoverStateFilter(0.0, 0.5),
+            }}
+            beforeId="Road labels"
+            manageHoverState
+            hoverCursor="pointer"
+            on:click={onClick}
+          >
+            <Popup openOn="hover" let:props>
+              <p>{props.name}</p>
+            </Popup>
+          </FillLayer>
+
+          <LineLayer
+            filter={["==", ["get", "kind"], kind]}
+            paint={{
+              "line-color": "rgb(200, 100, 240)",
+              "line-width": 2.5,
+            }}
+            beforeId="Road labels"
+            manageHoverState
+          />
+        </GeoJSON>
+      </MapLibre>
+    </div>
   </div>
 </div>
 
 <style>
-  div {
-    float: left;
-  }
-
   .left {
     width: 35%;
     height: 100vh;

diff --git a/web/src/common/HelpButton.svelte b/web/src/common/HelpButton.svelte
@@ -7,7 +7,7 @@
   let show = false;
 </script>
 
-<button on:click={() => (show = true)}>
+<button class="help" on:click={() => (show = true)}>
   <img src={icon} title="Help" alt="Help" />
 </button>
 
@@ -19,7 +19,7 @@
 {/if}
 
 <style>
-  button {
+  button.help {
     background: none;
     border: 1px solid rgba(0, 0, 0, 0);
   }