Adjust layout for critical entry

acteng · Sep 1, 2023 · 9141d64 · 9141d64
1 parent fe0fa68
commit 9141d64
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/src/lib/common/Layout.svelte b/src/lib/common/Layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  export let sidebarWidth = "25rem";
+
   let showSidebar = true;
 
   function toggleSidebar() {
@@ -7,7 +9,10 @@
 </script>
 
 <div class="overall-layout">
-  <aside class={showSidebar ? "" : "collapsed"}>
+  <aside
+    class={showSidebar ? "" : "collapsed"}
+    style="--sidebarWidth: {sidebarWidth}"
+  >
     <div class="sidebar-content content-container">
       <slot name="sidebar" />
     </div>
@@ -49,12 +54,16 @@
     position: relative; /* for children who want to position:absolute */
 
     flex: 0;
-    min-width: 25rem; /* use min/max-width because we're in a flex containter. */
-    max-width: 25rem;
+    min-width: var(
+      --sidebarWidth
+    ); /* use min/max-width because we're in a flex containter. */
+    max-width: var(--sidebarWidth);
   }
 
   .sidebar-content {
-    width: 25em; /* Keep the size constant, so the main panel overlaps it when it collapses. */
+    width: var(
+      --sidebarWidth
+    ); /* Keep the size constant, so the main panel overlaps it when it collapses. */
 
     min-height: 100%;
     max-height: 100%;

diff --git a/src/lib/critical_entry/Form.svelte b/src/lib/critical_entry/Form.svelte
@@ -141,17 +141,18 @@
   <ErrorMessage errorMessage={inspectorError} />
   <input
     type="text"
-    class="govuk-input govuk-input--width-10"
+    class="govuk-input"
     id="inspector"
     bind:value={inspector}
   />
 </FormElement>
 
 <FormElement label="Scheme reference" id="schemeReference">
+  <div class="govuk-hint">Example: ATF2_WLT_01</div>
   <ErrorMessage errorMessage={schemeReferenceError} />
   <input
     type="text"
-    class="govuk-input govuk-input--width-10"
+    class="govuk-input"
     id="schemeReference"
     bind:value={schemeReference}
   />

diff --git a/src/lib/critical_entry/LocationDescription.svelte b/src/lib/critical_entry/LocationDescription.svelte
@@ -12,7 +12,6 @@
     if (!lookupLocation) {
       return;
     }
-    // TODO Don't overwrite something the user entered
     let url = `https://nominatim.openstreetmap.org/reverse?lat=${pt.lat}&lon=${pt.lng}&format=json`;
     try {
       locationDescription = "Loading...";
@@ -35,7 +34,7 @@
   <ErrorMessage errorMessage={locationDescriptionError} />
   <input
     type="text"
-    class="govuk-input govuk-input--width-20"
+    class="govuk-input"
     id="locationDescription"
     bind:value={locationDescription}
     on:change={locationDescriptionChanged}

diff --git a/src/pages/BrowseSchemes.svelte b/src/pages/BrowseSchemes.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   // @ts-ignore no declarations
   import { initAll } from "govuk-frontend";
-  import "../style/main.css";
   import authorityNamesList from "../../assets/authority_names.json";
   import { processInput, type Scheme } from "../lib/browse/data";
   import Filters from "../lib/browse/Filters.svelte";

diff --git a/src/pages/CriticalIssueEntry.svelte b/src/pages/CriticalIssueEntry.svelte
@@ -27,7 +27,7 @@
   }
 </script>
 
-<Layout>
+<Layout sidebarWidth="35rem">
   <div slot="sidebar" class="govuk-prose">
     <h1>Critical issue entry</h1>
     {#if markerPosition}