WIP layout

mathesar-foundation · Nov 22, 2023 · 4f01514 · 4f01514
1 parent 58533d2
commit 4f01514
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/mathesar_ui/src/component-library/labeled-input/LabeledInput.svelte b/mathesar_ui/src/component-library/labeled-input/LabeledInput.svelte
@@ -20,8 +20,8 @@
         CSS that uses the `:empty` pseudo-class which does not work if there is
         white space.
       -->
-      <span class="label"><slot name="label">{label}</slot></span>
-      <span class="help"><slot name="help">{help}</slot></span>
+      <span class="label">{label}<slot name="label" /></span>
+      <span class="help">{help}<slot name="help" /></span>
       <span class="input"><slot /></span>
     </span>
   </Label>

diff --git a/mathesar_ui/src/pages/database-connection/GridForm.svelte b/mathesar_ui/src/pages/database-connection/GridForm.svelte
@@ -2,18 +2,42 @@
   TODO_3311: re-organize this component and resolve naming conflict with other
   GridForm component
  -->
-<div class="grid-form">
+<script lang="ts">
+  /** When the form is wider than this, it will display in a grid. When it's
+   * narrower, it will display vertically */
+  export let breakpointPx = 400;
+
+  let width: number;
+</script>
+
+<div
+  class="grid-form"
+  bind:clientWidth={width}
+  class:grid={width > breakpointPx}
+>
   <slot />
 </div>
 
 <style>
-  .grid-form {
+  .grid-form:not(.grid) > :global(* + *) {
+    margin-top: 1rem;
+  }
+  .grid-form:not(.grid) > :global(.divider + .divider) {
+    display: none;
+  }
+
+  .grid-form:not(.grid) > :global(:nth-child(even)) {
+    margin-left: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .grid-form.grid {
     display: grid;
     grid-template-columns: fit-content(30%) 1fr;
     gap: 1.5rem 0;
   }
 
-  .grid-form > :global(:nth-child(odd)) {
+  .grid-form.grid > :global(:nth-child(odd)) {
     text-align: right;
     padding-right: 1rem;
   }