Merge pull request #6 from twm/layout

Vastly improved layout

README.md

@@ -48,3 +48,9 @@ To update screenshots, run:
 ```bash
 npx playwright test -u
 ```
+
+If the screenshots taken in CI don't match you can download the report by running:
+
+```bash
+just pr-playwright-report
+```

justfile

@@ -7,3 +7,22 @@ dev:
     nvm use || { exit 1; }
     set -euxo pipefail
     exec npm run dev
+
+pr-playwright-report:
+    #!/usr/bin/env bash
+    set -euxo pipefail
+    commit=$(git rev-parse HEAD)
+    run_id=$(gh run list --commit "$commit" --limit 1 --json databaseId --jq '.[] | .databaseId')
+    if [[ -z $run_id ]]; then
+        printf "Commit %s not found upstream\n" "$commit"
+        branch=$(git branch --show-current)
+        run_id=$(gh run list --branch "$branch" --limit 1 --json databaseId --jq '.[] | .databaseId')
+    fi
+    if [[ -z $run_id ]]; then
+        printf "Run for branch %s not found upstream\n" "$branch"
+        exit 1
+    fi
+    printf "Downloading playwright-report for run %s...\n" "$run_id"
+    target=$(mktemp -d)
+    gh run download "$run_id" --name playwright-report --dir "$target"
+    x-www-browser "$target/index.html"

src/lib/Form.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import {
+        artX,
+        artY,
+        frameWidth,
+        stockLength,
+        material,
+        MATERIALS,
+    } from "$lib/stores"
+    import { frac } from "$lib/frac"
+</script>
+
+<h2>Inputs</h2>
+
+<form action="#" method="GET">
+    <label>
+        Art width
+        <input type="number" bind:value={$artX} min="1" step="0.25" required />
+    </label>
+    <label>
+        Art height
+        <input type="number" bind:value={$artY} min="1" step="0.25" required />
+    </label>
+
+    <label>
+        Frame width
+        <input
+            type="number"
+            bind:value={$frameWidth}
+            min="0.25"
+            step="0.125"
+            required
+        />
+    </label>
+
+    <label>
+        Material
+        <select bind:value={$material}>
+            {#each MATERIALS as material}
+                <option value={material}>{material.name}</option>
+            {/each}
+        </select>
+    </label>
+</form>
+
+<h2>Outputs</h2>
+
+<div class="outputs">
+    <p class="label">Linear stock <span>{frac($stockLength)}"</span></p>
+</div>
+
+<style>
+    form,
+    .outputs {
+        display: grid;
+        grid-template-columns: 1fr 8rem;
+        gap: 0.5rem;
+    }
+    label,
+    .label {
+        display: contents;
+    }
+
+    input,
+    select {
+        background: inherit;
+        color: inherit;
+        border: 1px solid currentColor;
+        padding: 1px 4px;
+        line-height: 1;
+    }
+</style>

src/lib/Layout.svelte

@@ -0,0 +1,32 @@
+<div class="wrapper">
+    <header>
+        <h1>Picture Frame Cutlist Calculator</h1>
+    </header>
+
+    <slot></slot>
+
+    <footer>
+        <p>
+            <!-- TODO a href="/about">About</a> ☙ -->
+            © 2024 Tom Most ❧
+            <a href="https://github.com/twm/halo/issues">Report an issue</a>
+        </p>
+    </footer>
+</div>
+
+<style>
+    .wrapper {
+        margin: 0 auto;
+        padding: 0 0.5rem;
+        max-width: 80rem;
+    }
+
+    footer {
+        color: #aaa;
+        text-align: center;
+    }
+
+    footer :is(:link, :visited) {
+        color: inherit;
+    }
+</style>

src/routes/+layout.svelte

@@ -6,15 +6,8 @@
     <link rel="stylesheet" type="text/css" href={normalizeCss} />
 </svelte:head>
 
-<h1>Picture Frame Calculator</h1>
-
 <slot></slot>
 
-<p>
-    © 2024 Tom Most ☙
-    <a href="https://github.com/twm/halo/issues">Report an issue</a>
-</p>
-
 <style>
     @font-face {
         font-family: "Zilla Slab";
@@ -35,6 +28,5 @@
             400 1rem / 1.2 "Zilla Slab",
             "URW Bookman",
             serif;
-        padding: 0 0.5rem; /* TODO: extract layout as a component.*/
     }
 </style>

src/routes/+page.svelte

@@ -1,82 +1,64 @@
 <script lang="ts">
-    import {
-        artX,
-        artY,
-        frameWidth,
-        stockLength,
-        material,
-        MATERIALS,
-    } from "$lib/stores"
+    import Layout from "$lib/Layout.svelte"
     import Frame from "$lib/Frame.svelte"
+    import Form from "$lib/Form.svelte"
     import PartList from "$lib/PartList.svelte"
     import TextureDefs from "$lib/textures/TextureDefs.svelte"
-
-    import { frac } from "$lib/frac"
 </script>
 
 <svelte:head>
-    <title>Picture Frame Calculator</title>
+    <title>Picture Frame Cutlist Calculator</title>
 </svelte:head>
 
 <TextureDefs />
 
-<div class="layout">
-    <Frame />
-    <div class="right">
-        <form action="#" method="GET">
-            <label>
-                Art width
-                <input type="number" bind:value={$artX} min="1" step="0.25" required />
-            </label>
-            <label>
-                Art height
-                <input type="number" bind:value={$artY} min="1" step="0.25" required />
-            </label>
-
-            <label>
-                Frame width
-                <input
-                    type="number"
-                    bind:value={$frameWidth}
-                    min="0.25"
-                    step="0.125"
-                    required
-                />
-            </label>
-
-            <label>
-                Material
-                <select bind:value={$material}>
-                    {#each MATERIALS as material}
-                        <option value={material}>{material.name}</option>
-                    {/each}
-                </select>
-            </label>
-        </form>
-
-        <div class="results">
-            <h2>Materials</h2>
-
-            <p>Stock required: {frac($stockLength)}"</p>
-
-            <PartList />
-        </div>
+<Layout>
+    <div class="container">
+        <main>
+            <div class="form">
+                <Form />
+            </div>
+            <div class="frame">
+                <Frame />
+            </div>
+            <div class="parts">
+                <PartList />
+            </div>
+        </main>
     </div>
-</div>
+</Layout>
 
 <style>
-    .layout {
+    .container {
+        container-type: inline-size;
+    }
+    main {
         display: grid;
-        grid-template-columns: 1fr 20rem;
-        gap: 1rem;
+        column-gap: 1rem;
+        grid-template-areas: "form frame parts";
+        grid-template-columns: 20rem 1fr 20rem;
+    }
+    @container (width < 50rem) and (width >= 40rem) {
+        main {
+            grid-template-areas: "form frame" "parts frame";
+            grid-template-columns: 20rem 1fr;
+        }
+    }
+    @container (width < 40rem) {
+        main {
+            grid-template-areas: "form" "frame" "parts";
+            grid-template-columns: 1fr;
+            grid-template-rows: min-content 70vh min-content;
+        }
     }
 
-    form {
-        display: grid;
-        grid-template-columns: 1fr 8rem;
-        gap: 0.5rem;
+    .form {
+        grid-area: form;
+    }
+    .frame {
+        grid-area: frame;
     }
-    label {
-        display: contents;
+    .parts {
+        grid-area: parts;
     }
 </style>

tests/test.ts

@@ -2,8 +2,12 @@ import { expect, test } from "@playwright/test"
 
 test("calculator layout", async ({ page }) => {
     await page.goto("/")
-    const title = "Picture Frame Calculator"
+    const title = "Picture Frame Cutlist Calculator"
     await expect(page.locator("h1")).toHaveText(title)
     await expect(page).toHaveTitle(title)
-    await expect(page).toHaveScreenshot()
+    await expect(page).toHaveScreenshot({
+        scale: "device",
+        // The <select> tag doesn't render consistently locally versus on GHA, so mask it away.
+        mask: [page.locator("select")],
+    })
 })