Make mandala UI layout a bit less terrible (#65)

The key phrase here is **less terrible**, as opposed to **good**.

Right now if the mandala gets too big for the page, it will just overflow and the remainder won't be visible (not even via scrolling).  This is intentional, though, as per @ninapaley's suggestion:

> I'm hoping you can change the way the image keeps resizing its canvas, and keeps justifying left.
> Maybe have an oversize canvas with the ring pinned to the center, and all the adjustment sliders
> on the right? Then they won't disappear if the canvas is too big. Also! I have an idea for an
> animated cycle that would require the symbols to eventually outgrow the canvas area and disappear.

I'm not super happy with this CSS, it doesn't feel terribly maintainable.  Ah well, maybe we can improve it later.

index.html

@@ -48,6 +48,49 @@ ul.navbar li {
 ul.navbar li:last-child {
   border-right: none;
 }
+
+.mandala-container {
+  position: relative;
+}
+
+.mandala-container .canvas {
+  display: flex;
+  width: 100%;
+  height: 85vh;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.mandala-container .sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  width: 20em;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.mandala-container .color-widget {
+  display: flex;
+}
+
+.mandala-container .color-widget label {
+  flex-grow: 1;
+}
+
+.mandala-container .numeric-slider {
+  display: flex;
+  flex-direction: column;
+}
+
+.mandala-container .numeric-slider .slider {
+  display: flex;
+}
+
+.mandala-container .numeric-slider .slider input {
+  flex-basis: 90%;
+}
 </style>
 <noscript>
   <p>Alas, you need JavaScript to peruse this page.</p>

lib/color-widget.tsx

@@ -12,7 +12,7 @@ export const ColorWidget: React.FC<ColorWidgetProps> = (props) => {
   const id = props.id || slugify(props.label);
 
   return (
-    <>
+    <span className="color-widget">
       <label htmlFor={id}>{props.label}: </label>
       <input
         id={id}
@@ -20,6 +20,6 @@ export const ColorWidget: React.FC<ColorWidgetProps> = (props) => {
         value={props.value}
         onChange={(e) => props.onChange(e.target.value)}
       />
-    </>
+    </span>
   );
 };

lib/numeric-slider.tsx

@@ -13,21 +13,23 @@ export const NumericSlider: React.FC<NumericSliderProps> = (props) => {
   const id = props.id || slugify(props.label);
 
   return (
-    <div className="thingy">
+    <div className="thingy numeric-slider">
       <label htmlFor={id}>{props.label}: </label>
-      <input
-        type="range"
-        id={id}
-        min={props.min}
-        max={props.max}
-        value={props.value}
-        step={props.step}
-        onChange={(e) => props.onChange(float(e.target.value))}
-      />
-      <span>
-        {" "}
-        {props.value}
-        {props.valueSuffix}
+      <span className="slider">
+        <input
+          type="range"
+          id={id}
+          min={props.min}
+          max={props.max}
+          value={props.value}
+          step={props.step}
+          onChange={(e) => props.onChange(float(e.target.value))}
+        />
+        <span>
+          {" "}
+          {props.value}
+          {props.valueSuffix}
+        </span>
       </span>
     </div>
   );

lib/pages/mandala-page.tsx

@@ -268,55 +268,65 @@ export const MandalaPage: React.FC<{}> = () => {
   return (
     <>
       <h1>Mandala!</h1>
-      <SymbolContextWidget ctx={baseSymbolCtx} onChange={setBaseSymbolCtx}>
-        <ColorWidget label="Background" value={bgColor} onChange={setBgColor} />{" "}
-      </SymbolContextWidget>
-      <fieldset>
-        <legend>First circle</legend>
-        <ExtendedMandalaCircleParamsWidget
-          idPrefix="c1"
-          value={circle1}
-          onChange={setCircle1}
-        />
-      </fieldset>
-      <div className="thingy">
-        <Checkbox
-          label="Add a second circle"
-          value={useTwoCircles}
-          onChange={setUseTwoCircles}
-        />
+      <div className="mandala-container" style={{ backgroundColor: bgColor }}>
+        <div className="sidebar">
+          <SymbolContextWidget ctx={baseSymbolCtx} onChange={setBaseSymbolCtx}>
+            <ColorWidget
+              label="Background"
+              value={bgColor}
+              onChange={setBgColor}
+            />{" "}
+          </SymbolContextWidget>
+          <fieldset>
+            <legend>First circle</legend>
+            <ExtendedMandalaCircleParamsWidget
+              idPrefix="c1"
+              value={circle1}
+              onChange={setCircle1}
+            />
+          </fieldset>
+          <div className="thingy">
+            <Checkbox
+              label="Add a second circle"
+              value={useTwoCircles}
+              onChange={setUseTwoCircles}
+            />
+          </div>
+          {useTwoCircles && (
+            <fieldset>
+              <legend>Second circle</legend>
+              <ExtendedMandalaCircleParamsWidget
+                idPrefix="c2"
+                value={circle2}
+                onChange={setCircle2}
+              />
+              <Checkbox
+                label="Invert colors"
+                value={invertCircle2}
+                onChange={setInvertCircle2}
+              />{" "}
+              <Checkbox
+                label="Place behind first circle"
+                value={firstBehindSecond}
+                onChange={setFirstBehindSecond}
+              />
+            </fieldset>
+          )}
+          <div className="thingy">
+            <button accessKey="r" onClick={randomize}>
+              <u>R</u>andomize!
+            </button>{" "}
+            <ExportWidget basename="mandala" svgRef={svgRef} />
+          </div>
+        </div>
+        <div className="canvas">
+          <HoverDebugHelper>
+            <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
+              <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </div>
       </div>
-      {useTwoCircles && (
-        <fieldset>
-          <legend>Second circle</legend>
-          <ExtendedMandalaCircleParamsWidget
-            idPrefix="c2"
-            value={circle2}
-            onChange={setCircle2}
-          />
-          <Checkbox
-            label="Invert colors"
-            value={invertCircle2}
-            onChange={setInvertCircle2}
-          />{" "}
-          <Checkbox
-            label="Place behind first circle"
-            value={firstBehindSecond}
-            onChange={setFirstBehindSecond}
-          />
-        </fieldset>
-      )}
-      <div className="thingy">
-        <button accessKey="r" onClick={randomize}>
-          <u>R</u>andomize!
-        </button>{" "}
-        <ExportWidget basename="mandala" svgRef={svgRef} />
-      </div>
-      <HoverDebugHelper>
-        <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
-          <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
-        </AutoSizingSvg>
-      </HoverDebugHelper>
     </>
   );
 };

lib/symbol-context-widget.tsx

@@ -35,8 +35,7 @@ export const SymbolContextWidget: React.FC<{
         onChange={(showSpecs) => updateCtx({ showSpecs })}
       />
       {ctx.uniformStrokeWidth !== undefined && (
-        <>
-          <br />
+        <div className="thingy">
           <NumericSlider
             label="Stroke width"
             min={0}
@@ -44,8 +43,8 @@ export const SymbolContextWidget: React.FC<{
             step={0.1}
             value={ctx.uniformStrokeWidth}
             onChange={(uniformStrokeWidth) => updateCtx({ uniformStrokeWidth })}
-          />{" "}
-        </>
+          />
+        </div>
       )}
     </div>
   );