feat: UI tweaks (#193)

nornagon · Oct 26, 2023 · 46cfa7a · 46cfa7a
1 parent 73ebd74
commit 46cfa7a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/src/style.css b/src/style.css
@@ -119,7 +119,7 @@ path {
   flex: 0 0 var(--panel-width);
   width: var(--panel-width);
   background-color: white;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
 }
@@ -150,7 +150,7 @@ path {
 
 .section-header {
   margin-bottom: 1rem;
-  padding: 1rem 0;
+  padding: 0.5rem 0;
   border-bottom: 1px solid var(--purple-light);
   font-size: 18px;
   font-weight: 900;
@@ -164,6 +164,11 @@ path {
 
 /* INPUTS */
 
+form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
 label {
   font-size: 10px;
   text-align: center;
@@ -281,7 +286,6 @@ select[multiple]:focus option:checked {
 .flex-checkbox {
   display: flex;
   align-items: center;
-  justify-content: center;
   margin-bottom: 0.5rem;
 }
 
@@ -315,7 +319,7 @@ select[multiple]:focus option:checked {
 }
 
 .layer-select {
-  height: 50px;
+  height: 100px;
   background-color: white;
   border: 1px solid var(--purple);
   color: var(--purple);

diff --git a/src/ui.tsx b/src/ui.tsx
@@ -855,40 +855,42 @@ function ResetToDefaultsButton() {
 function PlanOptions({state}: {state: State}) {
   const dispatch = useContext(DispatchContext);
   return <div>
-    <label className="flex-checkbox" title="Re-order paths to minimize pen-up travel time">
-      <input
-        type="checkbox"
-        checked={state.planOptions.sortPaths}
-        onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {sortPaths: !!e.target.checked}})}
-      />
-      sort paths
-    </label>
-    <label className="flex-checkbox" title="Re-scale and position the image to fit on the page">
-      <input
-        type="checkbox"
-        checked={state.planOptions.fitPage}
-        onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {fitPage: !!e.target.checked}})}
-      />
-      fit page
-    </label>
-    {!state.planOptions.fitPage ?
-      <label className="flex-checkbox" title="Remove lines that fall outside the margins">
+    <form>
+      <label className="flex-checkbox" title="Re-order paths to minimize pen-up travel time">
         <input
           type="checkbox"
-          checked={state.planOptions.cropToMargins}
-          onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {cropToMargins: !!e.target.checked}})}
+          checked={state.planOptions.sortPaths}
+          onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {sortPaths: !!e.target.checked}})}
         />
-        crop to margins
+        sort paths
       </label>
-      : null}
-    <label className="flex-checkbox" title="Split into layers according to group ID, instead of stroke">
-      <input
-        type="checkbox"
-        checked={state.planOptions.layerMode === 'group'}
-        onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {layerMode: e.target.checked ? 'group' : 'stroke'}})}
-      />
-      layer by group
-    </label>
+      <label className="flex-checkbox" title="Split into layers according to group ID, instead of stroke">
+        <input
+          type="checkbox"
+          checked={state.planOptions.layerMode === 'group'}
+          onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {layerMode: e.target.checked ? 'group' : 'stroke'}})}
+        />
+        layer by group
+      </label>
+      <label className="flex-checkbox" title="Re-scale and position the image to fit on the page">
+        <input
+          type="checkbox"
+          checked={state.planOptions.fitPage}
+          onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {fitPage: !!e.target.checked}})}
+        />
+        fit page
+      </label>
+      {!state.planOptions.fitPage ?
+        <label className="flex-checkbox" title="Remove lines that fall outside the margins">
+          <input
+            type="checkbox"
+            checked={state.planOptions.cropToMargins}
+            onChange={(e) => dispatch({type: "SET_PLAN_OPTION", value: {cropToMargins: !!e.target.checked}})}
+          />
+          crop to margins
+        </label>
+        : null}
+    </form>
     <div className="horizontal-labels">
 
       <label title="point-joining radius (mm)" >