refactor layout and styles in App, ColorListControl, and Options components; add responsive design adjustments

Author: Mtillmann

src/App.tsx

@@ -76,13 +76,13 @@ function App () {
   return (
     <>
       <div class='container'>
-        <div class='row'>
-          <div class='col-12'>
+        <div class='row mt-2 mt-lg-0'>
+          <div class='col-12 d-none d-lg-block'>
             <h1 class='display-5'>CirclePacker UI</h1>
           </div>
-          <div class='col-8'>
+          <div class='col-12 col-lg-8' id='canvas'>
             <div class='h-100 rounded bg-checkerboard d-flex justify-content-center align-items-center'>
-              {image() && <img src={image()} class='img-fluid' />}
+              {image() && <img src={image()} class='img-fluid mh-100' />}
               <Show when={!image()}>
                 <div class='alert alert-info' role='alert'>Drop or paste an image here &mdash; or
                   <label for='file' class='ms-1 accordiontext-decoration-underline'>click here select an image from your device
@@ -92,8 +92,10 @@ function App () {
             </div>
             <input type='file' class='d-none' id='file' />
           </div>
-          <div class='col-4 border border-1 border-1 py-2 rounded small'>
-            <Options />
+          <div class='col-12 col-lg-4'>
+            <div class='border border-1 border-1 py-2 rounded small mt-2 mt-lg-0 p-2'>
+              <Options />
+            </div>
           </div>
         </div>
 

src/ColorListControl.tsx

@@ -1,6 +1,6 @@
 import { createStore } from 'solid-js/store'
 import { state } from './store'
-import { For } from 'solid-js'
+import { For, Show } from 'solid-js'
 
 const [options, setOptions] = createStore(state.circlePackerOptions)
 
@@ -40,6 +40,9 @@ export default function () {
             </div>
           )}
         </For>
+        <Show when={options.colors.length === 0}>
+          <button class='btn btn-outline-secondary p-1 py-0 me-2 mb-2' disabled>using `auto` colors</button>
+        </Show>
       </div>
     </>
   )

src/Options.tsx

@@ -26,7 +26,7 @@ export default function () {
               value={circlePackerOptions.numCircles} onInput={(e) => setCirclePackerOptions('numCircles', parseInt(e.target.value))} type='range'
               class='d-flex me-2 form-range'
             />
-            <input class='form-control w-50' id='numberOfCircles' type='number' value={circlePackerOptions.numCircles} onInput={(e) => setCirclePackerOptions('numCircles', parseInt(e.target.value))} />
+            <input class='form-control w-33' id='numberOfCircles' type='number' value={circlePackerOptions.numCircles} onInput={(e) => setCirclePackerOptions('numCircles', parseInt(e.target.value))} />
           </div>
         </div>
       </div>
@@ -43,7 +43,7 @@ export default function () {
               value={circlePackerOptions.spacing} onInput={(e) => setCirclePackerOptions('spacing', parseFloat(e.target.value))} type='range'
               class='d-flex me-2 form-range' id='spacing'
             />
-            <input class='form-control w-25' type='number' value={circlePackerOptions.spacing} onInput={(e) => setCirclePackerOptions('spacing', parseInt(e.target.value))} />
+            <input class='form-control w-33' type='number' value={circlePackerOptions.spacing} onInput={(e) => setCirclePackerOptions('spacing', parseInt(e.target.value))} />
           </div>
         </div>
       </div>
@@ -64,7 +64,7 @@ export default function () {
               class='d-flex me-2 form-range' id='minRadius'
             />
 
-            <input class='form-control w-25' type='number' value={circlePackerOptions.minRadius} onInput={(e) => setCirclePackerOptions('minRadius', parseInt(e.target.value))} />
+            <input class='form-control w-33' type='number' value={circlePackerOptions.minRadius} onInput={(e) => setCirclePackerOptions('minRadius', parseInt(e.target.value))} />
           </div>
 
         </div>
@@ -86,7 +86,7 @@ export default function () {
               class='d-flex me-2 form-range' id='maxRadius'
             />
 
-            <input class='form-control w-25' type='number' value={circlePackerOptions.maxRadius} onInput={(e) => setCirclePackerOptions('maxRadius', parseInt(e.target.value))} />
+            <input class='form-control w-33' type='number' value={circlePackerOptions.maxRadius} onInput={(e) => setCirclePackerOptions('maxRadius', parseInt(e.target.value))} />
           </div>
 
         </div>
@@ -132,7 +132,7 @@ export default function () {
               value={circlePackerOptions.minAlpha} onInput={(e) => setCirclePackerOptions('minAlpha', parseFloat(e.target.value))} type='range'
               class='d-flex me-2 form-range' id='minAlpha'
             />
-            <input class='form-control w-25' type='number' value={circlePackerOptions.minAlpha} onInput={(e) => setCirclePackerOptions('minAlpha', parseInt(e.target.value))} />
+            <input class='form-control w-33' type='number' value={circlePackerOptions.minAlpha} onInput={(e) => setCirclePackerOptions('minAlpha', parseInt(e.target.value))} />
           </div>
         </div>
       </div>

src/index.css

@@ -2,4 +2,14 @@
     background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
     background-size: 20px 20px;
     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  }
+  }
+
+  @media screen and (max-width: 992px) {
+    #canvas{
+      height: 33dvh;
+    }
+  }
+
+.w-33{
+  width: 33%;
+}