From 63e9101d42eebee90f69e7e905e6e94b48d44299 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Mon, 29 Mar 2021 13:03:54 -0400
Subject: [PATCH] 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                    |  43 ++++++++++++++
 lib/color-widget.tsx          |   4 +-
 lib/numeric-slider.tsx        |  30 +++++-----
 lib/pages/mandala-page.tsx    | 106 +++++++++++++++++++---------------
 lib/symbol-context-widget.tsx |   7 +--
 5 files changed, 122 insertions(+), 68 deletions(-)

diff --git a/index.html b/index.html
index 621c6f3..460fff5 100644
--- a/index.html
+++ b/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>
diff --git a/lib/color-widget.tsx b/lib/color-widget.tsx
index d1d3901..c740818 100644
--- a/lib/color-widget.tsx
+++ b/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>
   );
 };
diff --git a/lib/numeric-slider.tsx b/lib/numeric-slider.tsx
index 98f8e89..2f0b24a 100644
--- a/lib/numeric-slider.tsx
+++ b/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>
   );
diff --git a/lib/pages/mandala-page.tsx b/lib/pages/mandala-page.tsx
index d5a9c74..5aa82e1 100644
--- a/lib/pages/mandala-page.tsx
+++ b/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>
     </>
   );
 };
diff --git a/lib/symbol-context-widget.tsx b/lib/symbol-context-widget.tsx
index 0cfc9de..0bb1fac 100644
--- a/lib/symbol-context-widget.tsx
+++ b/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>
   );