Skip to content

Commit 1d191fa

Browse files
ToolboxAidToolboxAid
committed
Add wide tool layout standard and Learn screen guidance - PR_26155_053-055-tool-layout-width
1 parent bf18946 commit 1d191fa

11 files changed

Lines changed: 309 additions & 5 deletions

File tree

‎assets/theme-v2/css/layout.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ div {
3737
margin: auto
3838
}
3939

40+
.container--tool-wide {
41+
width: var(--tool-wide-container-width);
42+
max-width: var(--tool-wide-container-max)
43+
}
44+
4045
.section {
4146
padding: var(--space-34) var(--space-0)
4247
}
@@ -123,18 +128,34 @@ div {
123128
align-items: start
124129
}
125130

131+
.tool-workspace--wide {
132+
grid-template-columns: var(--tool-wide-workspace-columns)
133+
}
134+
126135
.tool-workspace.is-left-collapsed {
127136
grid-template-columns: var(--tool-workspace-left-collapsed-columns)
128137
}
129138

139+
.tool-workspace--wide.is-left-collapsed {
140+
grid-template-columns: var(--tool-wide-workspace-left-collapsed-columns)
141+
}
142+
130143
.tool-workspace.is-right-collapsed {
131144
grid-template-columns: var(--tool-workspace-right-collapsed-columns)
132145
}
133146

147+
.tool-workspace--wide.is-right-collapsed {
148+
grid-template-columns: var(--tool-wide-workspace-right-collapsed-columns)
149+
}
150+
134151
.tool-workspace.is-left-collapsed.is-right-collapsed {
135152
grid-template-columns: var(--tool-workspace-both-collapsed-columns)
136153
}
137154

155+
.tool-workspace--wide.is-left-collapsed.is-right-collapsed {
156+
grid-template-columns: var(--tool-wide-workspace-both-collapsed-columns)
157+
}
158+
138159
.tool-column:first-of-type {
139160
grid-column: 1;
140161
grid-row: 1 / span 2

‎assets/theme-v2/css/spacing.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
--container-max: 1180px;
4040
--container-gutter: var(--space-36);
4141
--container-width: min(var(--container-max), calc(100% - var(--container-gutter)));
42+
--tool-wide-container-max: 1920px;
43+
--tool-wide-container-width: min(var(--tool-wide-container-max), calc(100% - var(--container-gutter)));
4244
--measure-md: 560px;
4345
--measure-lg: 760px;
4446
--measure-about-title: 720px;
@@ -56,6 +58,10 @@
5658
--tool-workspace-left-collapsed-columns: var(--tool-column-collapsed-width) minmax(0, 1fr) var(--tool-column-width);
5759
--tool-workspace-right-collapsed-columns: var(--tool-column-width) minmax(0, 1fr) var(--tool-column-collapsed-width);
5860
--tool-workspace-both-collapsed-columns: var(--tool-column-collapsed-width) minmax(0, 1fr) var(--tool-column-collapsed-width);
61+
--tool-wide-workspace-columns: minmax(16%, 20%) minmax(0, 1fr) minmax(16%, 20%);
62+
--tool-wide-workspace-left-collapsed-columns: var(--tool-column-collapsed-width) minmax(0, 1fr) minmax(16%, 20%);
63+
--tool-wide-workspace-right-collapsed-columns: minmax(16%, 20%) minmax(0, 1fr) var(--tool-column-collapsed-width);
64+
--tool-wide-workspace-both-collapsed-columns: var(--tool-column-collapsed-width) minmax(0, 1fr) var(--tool-column-collapsed-width);
5965
--tool-center-image-max: 260px;
6066
--tool-center-copy-max: 540px;
6167
--tool-display-media-size: 42px;

‎docs_build/dev/PROJECT_INSTRUCTIONS.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1547,6 +1547,29 @@ Rules:
15471547
- Reusable Theme V2 patterns must live under `assets/theme-v2/css/` and must not reintroduce legacy/V1 styling.
15481548
- Wireframe-only Toolbox rebuilds must not add implementation logic.
15491549

1550+
## Tool Layout Width Standard
1551+
1552+
Theme V2 tool pages are designed for 1440px and larger desktop workspaces.
1553+
1554+
Desktop targets:
1555+
- 1440px minimum comfortable desktop width.
1556+
- 1920px ideal desktop width.
1557+
1558+
Tool page layout is:
1559+
- left margin
1560+
- left panel
1561+
- center panel
1562+
- right panel
1563+
- right margin
1564+
1565+
Rules:
1566+
- Use percentage-based responsive layout for wide tool pages.
1567+
- Do not hardcode per-tool widths.
1568+
- Keep left and right panels balanced.
1569+
- Keep the center panel dominant.
1570+
- Use reusable Theme V2 layout tokens/classes before adding new layout behavior.
1571+
- If additional CSS is required, add only reusable Theme V2 layout patterns under `assets/theme-v2/css/` and document the design-system gap.
1572+
15501573
## Targeted Independent Validation Guidance
15511574

15521575
Tool, page, and `src/` changes must use the narrowest affected validation lane that proves the changed behavior.

‎docs_build/dev/reports/learn-getting-started-screen-guidance.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Learn Getting Started Screen Guidance
2+
3+
Stack item: PR_26155_055-learn-getting-started-screen-guidance
4+
5+
## Summary
6+
- Added `learn/getting-started/index.html` as a Theme V2 wireframe page.
7+
- Updated `learn/index.html` with a Getting Started card and link.
8+
- Updated Learn future-state Playwright coverage to include the new page.
9+
10+
## Guidance Added
11+
- Tools are built for 1440px and larger.
12+
- 1440px is the minimum comfortable desktop width.
13+
- 1920px is the ideal desktop width.
14+
- Smaller screens may use stacked or collapsed panels later.
15+
16+
## Validation Notes
17+
- Playwright impacted: Yes.
18+
- Impacted lane: `project-workspace` plus legacy workspace-contract coverage for Learn future-state assertions.
19+
- PASS: `npm run test:lane:project-workspace`.
20+
- PASS: `npm run test:workspace-v2`; command name is legacy, user-facing language remains Project Workspace.
21+
- PASS: `git diff --check`.
22+
- Full samples smoke test: skipped because no samples or sample runtime behavior changed.
23+
24+
## Manual Test Notes
25+
- Verified `learn/index.html` links to `learn/getting-started/index.html`.
26+
- Verified `learn/getting-started/index.html` loads with shared Theme V2 header/footer structure.
27+
- Verified the page includes the 1440px and 1920px guidance.
28+
- Verified no video embeds, inline scripts, inline styles, or page-local CSS were added.

‎docs_build/dev/reports/project-workspace-wide-layout.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Project Workspace Wide Layout
2+
3+
Stack item: PR_26155_054-project-workspace-wide-layout
4+
5+
## Summary
6+
- Applied `container--tool-wide` to the Project Workspace page container.
7+
- Applied `tool-workspace--wide` to the Project Workspace tool shell.
8+
- Preserved left, center, and right panels.
9+
- Kept the center panel dominant and the side panels balanced through reusable percentage-based Theme V2 columns.
10+
11+
## Validation Notes
12+
- Playwright impacted: Yes.
13+
- Impacted lane: `project-workspace`.
14+
- PASS: `npm run test:lane:project-workspace`.
15+
- PASS: `npm run test:workspace-v2`; command name is legacy, user-facing language remains Project Workspace.
16+
- PASS: `git diff --check`.
17+
18+
## Manual Test Notes
19+
- Verified at 1440px that the Project Workspace container uses more than 95% of viewport width.
20+
- Verified at 1920px that the Project Workspace container uses more than 95% of viewport width.
21+
- Verified left and right columns remain balanced.
22+
- Verified the center panel remains wider than either side panel.
23+
- Verified no console errors in targeted Playwright coverage.

‎docs_build/dev/reports/tool-layout-width-standard.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Tool Layout Width Standard
2+
3+
Stack item: PR_26155_053-tool-layout-width-standard
4+
5+
## Summary
6+
- Added `Tool Layout Width Standard` guidance to `docs_build/dev/PROJECT_INSTRUCTIONS.md`.
7+
- Documented that Theme V2 tool pages are designed for 1440px and larger.
8+
- Documented 1440px as the minimum comfortable desktop width and 1920px as the ideal desktop width.
9+
- Documented the tool page structure as left margin, left panel, center panel, right panel, and right margin.
10+
11+
## Theme V2 Gap Finding
12+
- Gap: existing `.container` is capped at the normal public-page max width, which is too narrow for first-class tool pages at 1440px and 1920px.
13+
- Resolution: added reusable Theme V2 layout tokens/classes in the active Theme V2 import path:
14+
- `--tool-wide-container-max`
15+
- `--tool-wide-container-width`
16+
- `--tool-wide-workspace-columns`
17+
- `--tool-wide-workspace-left-collapsed-columns`
18+
- `--tool-wide-workspace-right-collapsed-columns`
19+
- `--tool-wide-workspace-both-collapsed-columns`
20+
- `.container--tool-wide`
21+
- `.tool-workspace--wide`
22+
- No page-local CSS, tool-local CSS, inline styles, or per-tool width rules were added.
23+
24+
## Validation Notes
25+
- Playwright impacted: Yes.
26+
- Impacted lane: `project-workspace`.
27+
- PASS: `npm run test:lane:project-workspace`.
28+
- PASS: `npm run test:workspace-v2`; command name is legacy, user-facing language remains Project Workspace.
29+
- PASS: `git diff --check`.
30+
- Skipped lanes: `tool-runtime`, `game-runtime`, `integration`, `engine-src`, `samples`, and full samples smoke.
31+
- Skipped-lane rationale: this PR adds reusable public Theme V2 layout classes and validates the affected Project Workspace/Learn surfaces; it does not change engine runtime, games, samples, or cross-tool integration behavior.
32+
33+
## Manual Test Notes
34+
- Verified Project Workspace uses the reusable wide tool layout class.
35+
- Verified no inline styles or page-local CSS were introduced.
36+
- Verified no new DB, auth, cloud, or persistence behavior was added.

‎learn/getting-started/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Getting Started Learn - GameFoundryStudio</title>
8+
<meta name="description" content="GameFoundryStudio Learn wireframe for screen and layout guidance.">
9+
<link rel="icon" href="/favicon.svg">
10+
<link rel="stylesheet" href="../../assets/theme-v2/css/theme.css">
11+
</head>
12+
13+
<body>
14+
<div data-partial="header-nav"></div>
15+
<main>
16+
<section class="page-title">
17+
<div class="container">
18+
<div class="kicker">Learn / Getting Started</div>
19+
<h1>Getting Started</h1>
20+
<p class="lede">Screen and layout guidance for reviewing first-class Toolbox pages.</p>
21+
</div>
22+
</section>
23+
<section class="section">
24+
<div class="container">
25+
<div class="card-grid">
26+
<article class="control-card">
27+
<div class="card-body">
28+
<h2>Desktop Target</h2>
29+
<p>Tools are built for 1440px and larger desktop workspaces.</p>
30+
</div>
31+
</article>
32+
<article class="control-card">
33+
<div class="card-body">
34+
<h2>Ideal Width</h2>
35+
<p>1920px is the ideal desktop width for wide tool reviews with small margins and a dominant center panel.</p>
36+
</div>
37+
</article>
38+
<article class="control-card">
39+
<div class="card-body">
40+
<h2>Minimum Comfortable Width</h2>
41+
<p>1440px is the minimum comfortable desktop width for the left panel, center panel, and right panel tool layout.</p>
42+
</div>
43+
</article>
44+
<article class="control-card">
45+
<div class="card-body">
46+
<h2>Panel Layout</h2>
47+
<p>The desktop layout is left margin, left panel, center panel, right panel, and right margin.</p>
48+
</div>
49+
</article>
50+
<article class="control-card">
51+
<div class="card-body">
52+
<h2>Smaller Screens</h2>
53+
<p>Smaller screens may use stacked or collapsed panels later.</p>
54+
</div>
55+
</article>
56+
<article class="control-card">
57+
<div class="card-body">
58+
<h2>Wireframe Status</h2>
59+
<p>This Learn page is guidance-only and does not add responsive runtime behavior.</p>
60+
</div>
61+
</article>
62+
</div>
63+
</div>
64+
</section>
65+
<section class="section">
66+
<div class="container callout">
67+
<div class="kicker">Related</div>
68+
<h2>Continue learning</h2>
69+
<div class="content-cluster">
70+
<a class="btn" href="../index.html">All Learn</a>
71+
<a class="btn" href="../../toolbox/project-workspace/index.html">Open Project Workspace</a>
72+
</div>
73+
</div>
74+
</section>
75+
</main>
76+
<div data-partial="footer"></div>
77+
<script src="../../assets/theme-v2/js/gamefoundry-partials.js" defer></script>
78+
</body>
79+
80+
</html>

‎learn/index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ <h2>FAQ</h2>
4141
<p>Common questions and support topics for creators.</p>
4242
</div>
4343
</article>
44+
<article class="control-card">
45+
<div class="card-body">
46+
<h2>Getting Started</h2>
47+
<p>Screen and layout guidance for working with first-class Toolbox pages.</p>
48+
</div>
49+
</article>
4450
<article class="control-card">
4551
<div class="card-body">
4652
<h2>Search documentation</h2>
@@ -65,14 +71,15 @@ <h2>Videos</h2>
6571
<section class="section">
6672
<div class="container callout">
6773
<div class="kicker">Browse by tool</div>
68-
<h2>Tool learning paths</h2>
69-
<p>Static wireframe links for the first Learn tool pages.</p>
74+
<h2>Learning paths</h2>
75+
<p>Static wireframe links for Getting Started guidance and the first Learn tool pages.</p>
7076
<div class="content-cluster">
7177
<a class="btn" href="assets/index.html">Assets</a>
7278
<a class="btn" href="audio/index.html">Audio</a>
7379
<a class="btn" href="colors/index.html">Colors</a>
7480
<a class="btn" href="game-configuration/index.html">Game Configuration</a>
7581
<a class="btn" href="game-design/index.html">Game Design</a>
82+
<a class="btn" href="getting-started/index.html">Getting Started</a>
7683
<a class="btn" href="objects/index.html">Objects</a>
7784
<a class="btn" href="project-workspace/index.html">Project Workspace</a>
7885
<a class="btn" href="publish/index.html">Publish</a>

‎tests/playwright/tools/ProjectWorkspaceMockRepository.spec.mjs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,82 @@ test("Project Workspace progress panels update from mock project state", async (
136136
}
137137
});
138138

139+
test("Project Workspace uses the wide Theme V2 tool layout at desktop widths", async ({ page }) => {
140+
await page.setViewportSize({ width: 1440, height: 1100 });
141+
const failures = await openRepoPage(page, "/toolbox/project-workspace/index.html");
142+
143+
try {
144+
await expect(page.locator(".container--tool-wide")).toBeVisible();
145+
await expect(page.locator(".tool-workspace--wide")).toBeVisible();
146+
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
147+
const desktopLayout = await page.locator(".tool-workspace--wide").evaluate((workspace) => {
148+
const container = workspace.closest(".container--tool-wide");
149+
const columns = getComputedStyle(workspace).gridTemplateColumns
150+
.split(" ")
151+
.map((value) => Number.parseFloat(value));
152+
const [left, center, right] = columns;
153+
return {
154+
center,
155+
containerWidth: container.getBoundingClientRect().width,
156+
left,
157+
right,
158+
viewportWidth: window.innerWidth
159+
};
160+
});
161+
expect(desktopLayout.containerWidth).toBeGreaterThan(1300);
162+
expect(desktopLayout.containerWidth / desktopLayout.viewportWidth).toBeGreaterThan(0.95);
163+
expect(Math.abs(desktopLayout.left - desktopLayout.right)).toBeLessThan(2);
164+
expect(desktopLayout.center).toBeGreaterThan(desktopLayout.left);
165+
166+
await page.setViewportSize({ width: 1920, height: 1100 });
167+
await page.reload({ waitUntil: "networkidle" });
168+
const idealLayout = await page.locator(".tool-workspace--wide").evaluate((workspace) => {
169+
const container = workspace.closest(".container--tool-wide");
170+
const columns = getComputedStyle(workspace).gridTemplateColumns
171+
.split(" ")
172+
.map((value) => Number.parseFloat(value));
173+
const [left, center, right] = columns;
174+
return {
175+
center,
176+
containerWidth: container.getBoundingClientRect().width,
177+
left,
178+
right,
179+
viewportWidth: window.innerWidth
180+
};
181+
});
182+
expect(idealLayout.containerWidth).toBeGreaterThan(1800);
183+
expect(idealLayout.containerWidth / idealLayout.viewportWidth).toBeGreaterThan(0.95);
184+
expect(Math.abs(idealLayout.left - idealLayout.right)).toBeLessThan(2);
185+
expect(idealLayout.center).toBeGreaterThan(idealLayout.left);
186+
187+
await expectNoPageFailures(failures);
188+
} finally {
189+
await failures.server.close();
190+
}
191+
});
192+
193+
test("Learn Getting Started documents screen and layout guidance", async ({ page }) => {
194+
const failures = await openRepoPage(page, "/learn/index.html");
195+
196+
try {
197+
await expect(page.getByRole("heading", { name: "Getting Started" })).toBeVisible();
198+
await expect(page.getByRole("link", { name: "Getting Started" })).toHaveAttribute("href", "getting-started/index.html");
199+
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
200+
201+
await page.goto(`${failures.server.baseUrl}/learn/getting-started/index.html`, { waitUntil: "networkidle" });
202+
await expect(page.getByRole("heading", { name: "Getting Started" })).toBeVisible();
203+
await expect(page.getByText("Tools are built for 1440px and larger desktop workspaces.")).toBeVisible();
204+
await expect(page.getByText("1440px is the minimum comfortable desktop width")).toBeVisible();
205+
await expect(page.getByText("1920px is the ideal desktop width")).toBeVisible();
206+
await expect(page.getByText("Smaller screens may use stacked or collapsed panels later.")).toBeVisible();
207+
await expect(page.locator("style, [style], script:not([src])")).toHaveCount(0);
208+
209+
await expectNoPageFailures(failures);
210+
} finally {
211+
await failures.server.close();
212+
}
213+
});
214+
139215
test("Toolbox Project Data controls are admin-only and drive mock Progress and Build Path views", async ({ page }) => {
140216
const failures = await openRepoPage(page, "/toolbox/index.html?role=guest");
141217

‎tests/playwright/tools/RootToolsFutureState.spec.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,11 @@ test("learn wireframe pages load with shared Theme V2 structure", async ({ page
416416
const learnPages = [
417417
{
418418
path: "/learn/index.html",
419-
headings: ["Browse by tool", "Examples", "FAQ", "Search documentation", "Tutorials", "Videos"]
419+
headings: ["Browse by tool", "Examples", "FAQ", "Getting Started", "Search documentation", "Tutorials", "Videos"]
420+
},
421+
{
422+
path: "/learn/getting-started/index.html",
423+
headings: ["Desktop Target", "Ideal Width", "Minimum Comfortable Width", "Panel Layout", "Smaller Screens", "Wireframe Status"]
420424
},
421425
{
422426
path: "/learn/project-workspace/index.html",

0 commit comments

Comments
 (0)