shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve calculator progress tracking and responsive layout
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-29 11:19:11 +02:00
parent 3f86d863ac
commit 51853245ad
15 changed files with 329 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

22
e2e/style-layouts.spec.js
View file

@ -7,6 +7,24 @@ async function columns(locator, count) {
await expect.poll(async () => (await computed(locator, "grid-template-columns")).split(" ").length).toBe(count);
}
test("calculator layout follows the tool width rather than its location", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 900 });
await mountStyles(page, `<article class="module" data-module-type="calculator" style="width: 900px"><div class="calculator-module"><form class="calculator-form"><div class="calculator-card"><div class="calculator-field">Formula</div><div class="calculator-current-field">Current</div><div class="calculator-result">Result</div><label class="calculator-label-field">Label</label><button class="calculator-save-button">Save</button></div></form><div>Entries</div></div></article>`);
const tool = page.locator('[data-module-type="calculator"]');
const calculator = tool.locator(".calculator-module");
const card = tool.locator(".calculator-card");
await expect(tool).toHaveCSS("container-type", "inline-size");
await columns(calculator, 2);
await columns(card, 1);
await tool.evaluate((element) => { element.style.width = "700px"; });
await columns(calculator, 1);
await columns(card, 2);
await expect(tool.locator(".calculator-field")).toHaveCSS("grid-column-start", "1");
await expect(tool.locator(".calculator-result")).toHaveCSS("grid-column-start", "2");
await tool.evaluate((element) => { element.style.width = "480px"; });
await columns(card, 1);
});
for (const width of [1280, 900, 390]) {
test(`home, about and library retain their responsive layout at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
@ -66,7 +84,7 @@ for (const width of [1280, 390]) {
await mountStyles(page, `<main>
<div class="game-layout"><aside class="game-filters"><div class="filter-panel nds-filter-panel">Filter</div></aside><div class="game-grid"><article>Game</article><article>Game</article></div></div>
<div class="modules" data-layout-cols="2"><div class="module-column"><article class="module">A</article></div><div class="module-column"><article class="module">B</article></div></div>
<div class="calculator-module"><div>Formula</div><div class="calculator-result"><strong>12</strong></div></div>
<article class="module layout-calculator" data-module-type="calculator"><div class="calculator-module"><div>Formula</div><div class="calculator-result"><strong>12</strong></div></div></article>
<div class="task-planner-module"><div class="task-planner-settings"><label>Reset</label><label>Time</label></div></div>
<div class="equipment-planner-summary"><div class="equipment-planner-summary-source-grid"><div>Equipment</div><div>Materials</div></div></div>
<div class="toolbox-actions-row"><div>Actions</div><div>Preferences</div></div>
@ -75,7 +93,7 @@ for (const width of [1280, 390]) {
await expect(page.locator(".game-grid")).toHaveCSS("display", "grid");
await columns(page.locator(".modules"), width <= 760 ? 1 : 2);
await expect(page.locator(".module-column").first()).toHaveCSS("display", width <= 760 ? "contents" : "grid");
await columns(page.locator(".calculator-module"), width <= 760 ? 1 : 2);
await columns(page.locator(".layout-calculator .calculator-module"), width <= 820 ? 1 : 2);
await expect(page.locator(".calculator-result")).toHaveCSS("min-height", "72px");
await expect(page.locator(".task-planner-module")).toHaveCSS("display", "grid");
await columns(page.locator(".task-planner-settings"), width <= 760 ? 1 : 2);