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.
2021-04-02 19:00:29 -04:00 · 2021-04-02 19:00:29 -04:00 · 1cbe2b6d22
commit 1cbe2b6d22
--- a/index.html
+++ b/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 {
-  position: relative;
-}
-
-.mandala-container .canvas {
+.flex-widget {
+  display: flex;
+  flex-direction: column;
+}
+
+.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 {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  width: 20em;
-  background-color: rgba(255, 255, 255, 0.9);
+.canvas.scrollable {
+  display: block;
+  overflow: auto;
 }

-.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>
--- a/lib/browser-main.tsx
+++ b/lib/browser-main.tsx
@ -1,22 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { WavesPage } from "./pages/waves-page";
-import { VocabularyPage } from "./pages/vocabulary-page";
-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[];
+import { PageContext, PAGE_QUERY_ARG } from "./page";
+import { pageNames, Pages, toPageName, DEFAULT_PAGE } from "./pages";

 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 PageComponent = Pages[currPageName];
+  const currPage = toPageName(page.get(PAGE_QUERY_ARG) || "", DEFAULT_PAGE);
+  const PageComponent = Pages[currPage];
+  const ctx: PageContext = {
+    currPage,
+    allPages: pageNames,
+  };

  return (
-    <>
-      <header>
-        <Navbar currPageName={currPageName} />
-      </header>
-      <main>
+    <PageContext.Provider value={ctx}>
      <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>
-    </>
+    </PageContext.Provider>
  );
 };

 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;
-}
--- a/lib/page.tsx
+++ b/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>
+  );
+};
--- a/lib/pages/creature-page.tsx
+++ b/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,10 +191,9 @@ export const CreaturePage: React.FC<{}> = () => {
  });

  return (
-    <>
-      <h1>Creature!</h1>
+    <Page title="Creature!">
+      <div className="sidebar">
        <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
-      <div className="thingy"></div>
        <div className="thingy">
          <NumericSlider
            label="Random creature complexity"
@ -218,21 +218,27 @@ export const CreaturePage: React.FC<{}> = () => {
          <button accessKey="r" onClick={newRandomSeed}>
            <u>R</u>andomize!
          </button>{" "}
-        <button onClick={() => window.location.reload()}>Reset</button>{" "}
          <ExportWidget
            basename={getDownloadBasename(randomSeed)}
            svgRef={svgRef}
          />
        </div>
+      </div>
+      <div className="canvas" style={{ backgroundColor: compCtx.background }}>
        <CreatureContext.Provider value={ctx}>
          <HoverDebugHelper>
-          <AutoSizingSvg padding={20} ref={svgRef} bgColor={compCtx.background}>
+            <AutoSizingSvg
+              padding={20}
+              ref={svgRef}
+              bgColor={compCtx.background}
+            >
              <SvgTransform transform={svgScale(0.5)}>
                <CreatureSymbol {...creature} />
              </SvgTransform>
            </AutoSizingSvg>
          </HoverDebugHelper>
        </CreatureContext.Provider>
-    </>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/debug-page.tsx
+++ b/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,9 +61,11 @@ export const DebugPage: React.FC<{}> = () => {
  };

  return (
-    <>
-      <h1>Debug!</h1>
+    <Page title="Debug!">
+      <div className="sidebar">
        <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+      </div>
+      <div className="canvas">
        <CreatureContext.Provider value={ctx}>
          <HoverDebugHelper>
            <AutoSizingSvg padding={20}>
@ -72,6 +75,7 @@ export const DebugPage: React.FC<{}> = () => {
            </AutoSizingSvg>
          </HoverDebugHelper>
        </CreatureContext.Provider>
-    </>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/index.tsx
+++ b/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;
+}
--- a/lib/pages/mandala-page.tsx
+++ b/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,17 +282,9 @@ export const MandalaPage: React.FC<{}> = () => {
  }

  return (
-    <>
-      <h1>Mandala!</h1>
-      <div
-        className="mandala-container"
-        style={{ backgroundColor: baseCompCtx.background }}
-      >
+    <Page title="Mandala!">
      <div className="sidebar">
-          <CompositionContextWidget
-            ctx={baseCompCtx}
-            onChange={setBaseCompCtx}
-          />
+        <CompositionContextWidget ctx={baseCompCtx} onChange={setBaseCompCtx} />
        <fieldset>
          <legend>First circle</legend>
          <ExtendedMandalaCircleParamsWidget
@ -334,7 +327,10 @@ export const MandalaPage: React.FC<{}> = () => {
          <ExportWidget basename="mandala" svgRef={svgRef} />
        </div>
      </div>
-        <div className="canvas">
+      <div
+        className="canvas"
+        style={{ backgroundColor: baseCompCtx.background }}
+      >
        <HoverDebugHelper>
          <AutoSizingSvg
            padding={20}
@ -345,7 +341,6 @@ export const MandalaPage: React.FC<{}> = () => {
          </AutoSizingSvg>
        </HoverDebugHelper>
      </div>
-      </div>
-    </>
+    </Page>
  );
 };
--- a/lib/pages/vocabulary-page.tsx
+++ b/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,18 +50,21 @@ export const VocabularyPage: React.FC<{}> = () => {
  );

  return (
-    <>
-      <h1>Mystic Symbolic Vocabulary</h1>
-      <div className="thingy">
-        <label htmlFor="filter">Search: </label>
+    <Page title="Mystic Symbolic Vocabulary">
+      <div className="sidebar">
+        <div className="flex-widget">
+          <label htmlFor="filter">Search for symbols: </label>
          <input
            type="text"
            id="filter"
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
+            placeholder="🔎"
          />
        </div>
        <SymbolContextWidget ctx={ctx} onChange={setCtx} />
+      </div>
+      <div className="canvas scrollable">
        <HoverDebugHelper>
          {items.map((symbolData) => (
            <div
@ -86,6 +90,7 @@ export const VocabularyPage: React.FC<{}> = () => {
            </div>
          ))}
        </HoverDebugHelper>
-    </>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/waves-page.tsx
+++ b/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,13 +105,16 @@ const Waves: React.FC<{}> = () => {

  return (
    <>
+      <div className="canvas">
        <svg width="1280px" height="720px" viewBox="0 0 1280 720">
          {waves}
        </svg>
-      <p>
+      </div>
+      <div className="sidebar">
+        <div className="thingy">
          <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
          <ColorWidget value={fill} onChange={setFill} label="Fill" />
-      </p>
+        </div>
        <NumericSlider
          label="Number of waves"
          min={1}
@ -152,13 +156,13 @@ const Waves: React.FC<{}> = () => {
          step={0.025}
          onChange={setScaleVel}
        />
+      </div>
    </>
  );
 };

 export const WavesPage: React.FC<{}> = () => (
-  <>
-    <h1>Waves!</h1>
+  <Page title="Waves!">
    <Waves />
-  </>
+  </Page>
 );
--- a/lib/vocabulary-widget.tsx
+++ b/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>
  );
 }