Improve layout (#74)

This improves the layout of all our pages to look more like the mandala page.

Additionally, some form widgets now have better layout, and the header takes up less vertical space.

At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier.  Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).

I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.

It uses CSS grid, which should be pretty well-supported amongst recent browsers.

index.html

@@ -3,7 +3,44 @@
 <title>Mystic Symbolic</title>
 <style>
 html, body {
+  margin: 0;
+  padding: 0;
   font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
+  overflow: hidden;
+}
+
+.page {
+  display: grid;
+  column-gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+  grid-template-columns: auto 20em;
+  grid-template-rows: 3em auto 3em;
+  grid-template-areas:
+    "header header"
+    "canvas sidebar"
+    "footer footer";
+}
+
+header {
+  grid-area: header;
+  display: flex;
+}
+
+header h1 {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.sidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+}
+
+footer {
+  grid-area: footer;
 }
 
 select, input[type="text"] {
@@ -31,6 +68,10 @@ select, input[type="text"] {
   margin-bottom: 10px;
 }
 
+.thingy:first-child {
+  margin-top: 0;
+}
+
 ul.navbar {
   display: flex;
   list-style-type: none;
@@ -47,59 +88,61 @@ ul.navbar li {
 
 ul.navbar li:last-child {
   border-right: none;
+  padding-right: 0;
+  margin-right: 0;
 }
 
-.mandala-container {
+.flex-widget {
-  position: relative;
+  display: flex;
-}
+  flex-direction: column;
-
+}
-.mandala-container .canvas {
+
+.flex-widget label {
+  margin-bottom: 8px;
+}
+
+.canvas {
+  grid-area: canvas;
   display: flex;
-  width: 100%;
-  height: 85vh;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-.mandala-container .sidebar {
+.canvas.scrollable {
-  position: absolute;
+  display: block;
-  right: 0;
+  overflow: auto;
-  top: 0;
-  padding: 8px;
-  width: 20em;
-  background-color: rgba(255, 255, 255, 0.9);
 }
 
-.mandala-container label.checkbox {
+.sidebar label.checkbox {
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
-.mandala-container .color-widget {
+.sidebar .color-widget {
   display: flex;
 }
 
-.mandala-container .color-widget label {
+.sidebar .color-widget label {
   flex-grow: 1;
 }
 
-.mandala-container .numeric-slider {
+.sidebar .numeric-slider {
   display: flex;
   flex-direction: column;
 }
 
-.mandala-container .numeric-slider .slider {
+.sidebar .numeric-slider .slider {
   display: flex;
 }
 
-.mandala-container .numeric-slider .slider input {
+.sidebar .numeric-slider .slider input {
   flex-basis: 90%;
 }
 </style>
 <noscript>
   <p>Alas, you need JavaScript to peruse this page.</p>
 </noscript>
-<div id="app"></div>
+<div id="app" className="app"></div>
 <script src="lib/browser-main.tsx"></script>

lib/browser-main.tsx

@@ -1,22 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { WavesPage } from "./pages/waves-page";
+import { PageContext, PAGE_QUERY_ARG } from "./page";
-import { VocabularyPage } from "./pages/vocabulary-page";
+import { pageNames, Pages, toPageName, DEFAULT_PAGE } from "./pages";
-import { CreaturePage } from "./pages/creature-page";
-import { MandalaPage } from "./pages/mandala-page";
-import { DebugPage } from "./pages/debug-page";
-
-const Pages = {
-  vocabulary: VocabularyPage,
-  creature: CreaturePage,
-  waves: WavesPage,
-  mandala: MandalaPage,
-  debug: DebugPage,
-};
-
-type PageName = keyof typeof Pages;
-
-const pageNames = Object.keys(Pages) as PageName[];
 
 const APP_ID = "app";
 
@@ -26,53 +11,20 @@ if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }
 
-const Navbar: React.FC<{ currPageName: string }> = (props) => (
-  <ul className="navbar">
-    {pageNames.map((pageName) => (
-      <li key={pageName}>
-        {props.currPageName === pageName ? (
-          pageName
-        ) : (
-          <a href={`?p=${encodeURIComponent(pageName)}`}>{pageName}</a>
-        )}
-      </li>
-    ))}
-  </ul>
-);
-
 const App: React.FC<{}> = (props) => {
   const page = new URLSearchParams(window.location.search);
-  const currPageName = toPageName(page.get("p") || "", "vocabulary");
+  const currPage = toPageName(page.get(PAGE_QUERY_ARG) || "", DEFAULT_PAGE);
-  const PageComponent = Pages[currPageName];
+  const PageComponent = Pages[currPage];
+  const ctx: PageContext = {
+    currPage,
+    allPages: pageNames,
+  };
 
   return (
-    <>
+    <PageContext.Provider value={ctx}>
-      <header>
+      <PageComponent />
-        <Navbar currPageName={currPageName} />
+    </PageContext.Provider>
-      </header>
-      <main>
-        <PageComponent />
-      </main>
-      <footer>
-        <p>
-          For more details about this project, see its{" "}
-          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
-            GitHub repository
-          </a>
-          .
-        </p>
-      </footer>
-    </>
   );
 };
 
 ReactDOM.render(<App />, appEl);
-
-function isPageName(page: string): page is PageName {
-  return pageNames.includes(page as any);
-}
-
-function toPageName(page: string, defaultValue: PageName): PageName {
-  if (isPageName(page)) return page;
-  return defaultValue;
-}

lib/page.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from "react";
+import type { PageName } from "./pages";
+
+export type PageContext = {
+  currPage: PageName;
+  allPages: PageName[];
+};
+
+export const PageContext = React.createContext<PageContext>({
+  currPage: "vocabulary",
+  allPages: [],
+});
+
+export const PAGE_QUERY_ARG = "p";
+
+const PageLink: React.FC<{ page: PageName }> = ({ page }) => (
+  <a href={`?${PAGE_QUERY_ARG}=${encodeURIComponent(page)}`}>{page}</a>
+);
+
+const Navbar: React.FC<{}> = (props) => {
+  const pc = useContext(PageContext);
+
+  return (
+    <nav>
+      <ul className="navbar">
+        {pc.allPages.map((pageName) => (
+          <li key={pageName}>
+            {pc.currPage === pageName ? pageName : <PageLink page={pageName} />}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export type PageProps = {
+  title: string;
+  children?: any;
+};
+
+export const Page: React.FC<PageProps> = ({ title, children }) => {
+  return (
+    <div className="page">
+      <header>
+        <h1>{title}</h1>
+        <Navbar />
+      </header>
+      {children}
+      <footer>
+        <p>
+          For more details about this project, see its{" "}
+          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
+            GitHub repository
+          </a>
+          .
+        </p>
+      </footer>
+    </div>
+  );
+};

lib/pages/creature-page.tsx

@@ -25,6 +25,7 @@ import {
   CompositionContextWidget,
   createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";
 
 /** Symbols that can be the "root" (i.e., main body) of a creature. */
 const ROOT_SYMBOLS = SvgVocabulary.items.filter(
@@ -190,49 +191,54 @@ export const CreaturePage: React.FC<{}> = () => {
   });
 
   return (
-    <>
+    <Page title="Creature!">
-      <h1>Creature!</h1>
+      <div className="sidebar">
-      <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
+        <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
-      <div className="thingy"></div>
+        <div className="thingy">
-      <div className="thingy">
+          <NumericSlider
-        <NumericSlider
+            label="Random creature complexity"
-          label="Random creature complexity"
+            min={0}
-          min={0}
+            max={MAX_COMPLEXITY_LEVEL}
-          max={MAX_COMPLEXITY_LEVEL}
+            step={1}
-          step={1}
+            value={complexity}
-          value={complexity}
+            onChange={(value) => {
-          onChange={(value) => {
+              setComplexity(value);
-            setComplexity(value);
+              newRandomSeed();
-            newRandomSeed();
+            }}
-          }}
+          />
-        />
+        </div>
+        <div className="thingy">
+          <Checkbox
+            label="Randomly invert symbols"
+            value={randomlyInvert}
+            onChange={setRandomlyInvert}
+          />
+        </div>
+        <div className="thingy">
+          <button accessKey="r" onClick={newRandomSeed}>
+            <u>R</u>andomize!
+          </button>{" "}
+          <ExportWidget
+            basename={getDownloadBasename(randomSeed)}
+            svgRef={svgRef}
+          />
+        </div>
       </div>
-      <div className="thingy">
+      <div className="canvas" style={{ backgroundColor: compCtx.background }}>
-        <Checkbox
+        <CreatureContext.Provider value={ctx}>
-          label="Randomly invert symbols"
+          <HoverDebugHelper>
-          value={randomlyInvert}
+            <AutoSizingSvg
-          onChange={setRandomlyInvert}
+              padding={20}
-        />
+              ref={svgRef}
+              bgColor={compCtx.background}
+            >
+              <SvgTransform transform={svgScale(0.5)}>
+                <CreatureSymbol {...creature} />
+              </SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
       </div>
-      <div className="thingy">
+    </Page>
-        <button accessKey="r" onClick={newRandomSeed}>
-          <u>R</u>andomize!
-        </button>{" "}
-        <button onClick={() => window.location.reload()}>Reset</button>{" "}
-        <ExportWidget
-          basename={getDownloadBasename(randomSeed)}
-          svgRef={svgRef}
-        />
-      </div>
-      <CreatureContext.Provider value={ctx}>
-        <HoverDebugHelper>
-          <AutoSizingSvg padding={20} ref={svgRef} bgColor={compCtx.background}>
-            <SvgTransform transform={svgScale(0.5)}>
-              <CreatureSymbol {...creature} />
-            </SvgTransform>
-          </AutoSizingSvg>
-        </HoverDebugHelper>
-      </CreatureContext.Provider>
-    </>
   );
 };

lib/pages/debug-page.tsx

@@ -3,6 +3,7 @@ import { AutoSizingSvg } from "../auto-sizing-svg";
 import { CreatureContext, CreatureContextType } from "../creature-symbol";
 import { createCreatureSymbolFactory } from "../creature-symbol-factory";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";
 import { createSvgSymbolContext } from "../svg-symbol";
 import { svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
@@ -60,18 +61,21 @@ export const DebugPage: React.FC<{}> = () => {
   };
 
   return (
-    <>
+    <Page title="Debug!">
-      <h1>Debug!</h1>
+      <div className="sidebar">
-      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+        <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
-      <CreatureContext.Provider value={ctx}>
+      </div>
-        <HoverDebugHelper>
+      <div className="canvas">
-          <AutoSizingSvg padding={20}>
+        <CreatureContext.Provider value={ctx}>
-            <SvgTransform transform={svgScale(0.5)}>
+          <HoverDebugHelper>
-              {EYE_CREATURE}
+            <AutoSizingSvg padding={20}>
-            </SvgTransform>
+              <SvgTransform transform={svgScale(0.5)}>
-          </AutoSizingSvg>
+                {EYE_CREATURE}
-        </HoverDebugHelper>
+              </SvgTransform>
-      </CreatureContext.Provider>
+            </AutoSizingSvg>
-    </>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
+      </div>
+    </Page>
   );
 };

lib/pages/index.tsx

@@ -0,0 +1,28 @@
+import { WavesPage } from "./waves-page";
+import { VocabularyPage } from "./vocabulary-page";
+import { CreaturePage } from "./creature-page";
+import { MandalaPage } from "./mandala-page";
+import { DebugPage } from "./debug-page";
+
+export const Pages = {
+  vocabulary: VocabularyPage,
+  creature: CreaturePage,
+  waves: WavesPage,
+  mandala: MandalaPage,
+  debug: DebugPage,
+};
+
+export type PageName = keyof typeof Pages;
+
+export const pageNames = Object.keys(Pages) as PageName[];
+
+export const DEFAULT_PAGE: PageName = "vocabulary";
+
+export function isPageName(page: string): page is PageName {
+  return pageNames.includes(page as any);
+}
+
+export function toPageName(page: string, defaultValue: PageName): PageName {
+  if (isPageName(page)) return page;
+  return defaultValue;
+}

lib/pages/mandala-page.tsx

@@ -29,6 +29,7 @@ import {
   CompositionContextWidget,
   createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";
 
 type ExtendedMandalaCircleParams = MandalaCircleParams & {
   scaling: number;
@@ -281,71 +282,65 @@ export const MandalaPage: React.FC<{}> = () => {
   }
 
   return (
-    <>
+    <Page title="Mandala!">
-      <h1>Mandala!</h1>
+      <div className="sidebar">
-      <div
+        <CompositionContextWidget ctx={baseCompCtx} onChange={setBaseCompCtx} />
-        className="mandala-container"
+        <fieldset>
-        style={{ backgroundColor: baseCompCtx.background }}
+          <legend>First circle</legend>
-      >
+          <ExtendedMandalaCircleParamsWidget
-        <div className="sidebar">
+            idPrefix="c1"
-          <CompositionContextWidget
+            value={circle1}
-            ctx={baseCompCtx}
+            onChange={setCircle1}
-            onChange={setBaseCompCtx}
           />
+        </fieldset>
+        <div className="thingy">
+          <Checkbox
+            label="Add a second circle"
+            value={useTwoCircles}
+            onChange={setUseTwoCircles}
+          />
+        </div>
+        {useTwoCircles && (
           <fieldset>
-            <legend>First circle</legend>
+            <legend>Second circle</legend>
             <ExtendedMandalaCircleParamsWidget
-              idPrefix="c1"
+              idPrefix="c2"
-              value={circle1}
+              value={circle2}
-              onChange={setCircle1}
+              onChange={setCircle2}
+            />
+            <Checkbox
+              label="Invert colors"
+              value={invertCircle2}
+              onChange={setInvertCircle2}
+            />{" "}
+            <Checkbox
+              label="Place behind first circle"
+              value={firstBehindSecond}
+              onChange={setFirstBehindSecond}
             />
           </fieldset>
-          <div className="thingy">
+        )}
-            <Checkbox
+        <div className="thingy">
-              label="Add a second circle"
+          <button accessKey="r" onClick={randomize}>
-              value={useTwoCircles}
+            <u>R</u>andomize!
-              onChange={setUseTwoCircles}
+          </button>{" "}
-            />
+          <ExportWidget basename="mandala" svgRef={svgRef} />
-          </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={baseCompCtx.background}
-            >
-              <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
-            </AutoSizingSvg>
-          </HoverDebugHelper>
         </div>
       </div>
-    </>
+      <div
+        className="canvas"
+        style={{ backgroundColor: baseCompCtx.background }}
+      >
+        <HoverDebugHelper>
+          <AutoSizingSvg
+            padding={20}
+            ref={svgRef}
+            bgColor={baseCompCtx.background}
+          >
+            <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
+          </AutoSizingSvg>
+        </HoverDebugHelper>
+      </div>
+    </Page>
   );
 };

lib/pages/vocabulary-page.tsx

@@ -9,6 +9,7 @@ import { SvgVocabulary } from "../svg-vocabulary";
 import { SvgSymbolContext } from "../svg-symbol";
 import { SymbolContextWidget } from "../symbol-context-widget";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";
 
 type SvgSymbolProps = {
   data: SvgSymbolData;
@@ -49,43 +50,47 @@ export const VocabularyPage: React.FC<{}> = () => {
   );
 
   return (
-    <>
+    <Page title="Mystic Symbolic Vocabulary">
-      <h1>Mystic Symbolic Vocabulary</h1>
+      <div className="sidebar">
-      <div className="thingy">
+        <div className="flex-widget">
-        <label htmlFor="filter">Search: </label>
+          <label htmlFor="filter">Search for symbols: </label>
-        <input
+          <input
-          type="text"
+            type="text"
-          id="filter"
+            id="filter"
-          value={filter}
+            value={filter}
-          onChange={(e) => setFilter(e.target.value)}
+            onChange={(e) => setFilter(e.target.value)}
-        />
+            placeholder="🔎"
+          />
+        </div>
+        <SymbolContextWidget ctx={ctx} onChange={setCtx} />
       </div>
-      <SymbolContextWidget ctx={ctx} onChange={setCtx} />
+      <div className="canvas scrollable">
-      <HoverDebugHelper>
+        <HoverDebugHelper>
-        {items.map((symbolData) => (
+          {items.map((symbolData) => (
-          <div
-            key={symbolData.name}
-            style={{
-              display: "inline-block",
-              border: "1px solid black",
-              margin: "4px",
-            }}
-          >
             <div
+              key={symbolData.name}
               style={{
-                backgroundColor: "black",
+                display: "inline-block",
-                color: "white",
+                border: "1px solid black",
-                padding: "4px",
+                margin: "4px",
               }}
             >
-              {symbolData.name}
+              <div
+                style={{
+                  backgroundColor: "black",
+                  color: "white",
+                  padding: "4px",
+                }}
+              >
+                {symbolData.name}
+              </div>
+              <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
+                <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
+              </div>
             </div>
-            <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
+          ))}
-              <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
+        </HoverDebugHelper>
-            </div>
+      </div>
-          </div>
+    </Page>
-        ))}
-      </HoverDebugHelper>
-    </>
   );
 };

lib/pages/waves-page.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ColorWidget } from "../color-widget";
 import { NumericSlider } from "../numeric-slider";
+import { Page } from "../page";
 
 const WAVE_STROKE = "#79beda";
 const WAVE_FILL = "#2b7c9e";
@@ -104,61 +105,64 @@ const Waves: React.FC<{}> = () => {
 
   return (
     <>
-      <svg width="1280px" height="720px" viewBox="0 0 1280 720">
+      <div className="canvas">
-        {waves}
+        <svg width="1280px" height="720px" viewBox="0 0 1280 720">
-      </svg>
+          {waves}
-      <p>
+        </svg>
-        <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
+      </div>
-        <ColorWidget value={fill} onChange={setFill} label="Fill" />
+      <div className="sidebar">
-      </p>
+        <div className="thingy">
-      <NumericSlider
+          <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
-        label="Number of waves"
+          <ColorWidget value={fill} onChange={setFill} label="Fill" />
-        min={1}
+        </div>
-        max={NUM_WAVES * 2}
+        <NumericSlider
-        value={numWaves}
+          label="Number of waves"
-        step={1}
+          min={1}
-        onChange={setNumWaves}
+          max={NUM_WAVES * 2}
-      />
+          value={numWaves}
-      <NumericSlider
+          step={1}
-        label="Cycle duration"
+          onChange={setNumWaves}
-        min={0.1}
+        />
-        max={3}
+        <NumericSlider
-        value={duration}
+          label="Cycle duration"
-        step={0.1}
+          min={0.1}
-        onChange={setDuration}
+          max={3}
-        valueSuffix="s"
+          value={duration}
-      />
+          step={0.1}
-      <NumericSlider
+          onChange={setDuration}
-        label="Initial y-velocity"
+          valueSuffix="s"
-        min={1}
+        />
-        max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
+        <NumericSlider
-        value={initialYVel}
+          label="Initial y-velocity"
-        step={1}
+          min={1}
-        onChange={setInitialYVel}
+          max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
-      />
+          value={initialYVel}
-      <NumericSlider
+          step={1}
-        label="Y-acceleration"
+          onChange={setInitialYVel}
-        min={1}
+        />
-        max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
+        <NumericSlider
-        value={yAccel}
+          label="Y-acceleration"
-        step={1}
+          min={1}
-        onChange={setYAccel}
+          max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
-      />
+          value={yAccel}
-      <NumericSlider
+          step={1}
-        label="Scale velocity"
+          onChange={setYAccel}
-        min={1.0}
+        />
-        max={2}
+        <NumericSlider
-        value={scaleVel}
+          label="Scale velocity"
-        step={0.025}
+          min={1.0}
-        onChange={setScaleVel}
+          max={2}
-      />
+          value={scaleVel}
+          step={0.025}
+          onChange={setScaleVel}
+        />
+      </div>
     </>
   );
 };
 
 export const WavesPage: React.FC<{}> = () => (
-  <>
+  <Page title="Waves!">
-    <h1>Waves!</h1>
     <Waves />
-  </>
+  </Page>
 );

lib/vocabulary-widget.tsx

@@ -20,7 +20,7 @@ export function VocabularyWidget<T extends VocabularyType>({
   id = id || slugify(label);
 
   return (
-    <>
+    <div className="flex-widget">
       <label htmlFor={id}>{label}: </label>
       <select
         id={id}
@@ -33,6 +33,6 @@ export function VocabularyWidget<T extends VocabularyType>({
           </option>
         ))}
       </select>
-    </>
+    </div>
   );
 }