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

Refocus responsive layouts on compact desktop use
All checks were successful
Deploy Sokko G / deploy (push) Successful in 19s
Details

Browse source
This commit is contained in:
Shinuwa 2026-10-05 15:47:46 +02:00
parent 96d058293d
commit 0ac1a0974e
27 changed files with 610 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

2
e2e/deferred-media.spec.js
View file

@ -138,7 +138,7 @@ test("opening and editing one toolbox only reads its media and reuses it on retu
test("the game drawer loads only the linked toolbox media", async ({ page }) => {
const seeded = await setup(page);
await page.goto("/#/games/mhwilds");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
const drawer = page.locator("#toolbox-drawer .drawer-panel");
await expect(drawer.locator('.image-preview img')).toHaveAttribute("src", seeded.modules["a:images"].images[0].dataUrl);
await expect(drawer.locator(".annotation-marker")).toHaveCount(1);

10
e2e/guide-checklist.spec.js
View file

@ -89,7 +89,11 @@ async function copyVisibleResults(page) {
async function openDrawer(page) {
const drawer = page.locator("#toolbox-drawer");
if (!await drawer.locator(".drawer-panel").isVisible()) await page.locator(".topbar-actions button").click();
if (!await drawer.locator(".drawer-panel").isVisible()) {
const compactTrigger = page.getByRole("tab", { name: "Toolbox", exact: true });
if (await compactTrigger.isVisible()) await compactTrigger.click();
else await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
}
await expect(drawer.locator(".drawer-panel")).toBeVisible();
return drawer;
}
@ -190,7 +194,7 @@ test("filtered results create a checklist in the linked active space without rep
expect(await page.evaluate((key) => globalThis.localStorage.getItem(key), storageKey)).toBe(associationBefore);
});
for (const width of [1280, 390]) {
for (const width of [1280, 768]) {
test(`drawer linking, page controls and persistent restoration at ${width}px`, async ({ page }) => {
test.setTimeout(60000);
await page.setViewportSize({ width, height: 900 });
@ -241,7 +245,7 @@ for (const width of [1280, 390]) {
const headingActionsBounds = await page.locator(".game-heading-actions").boundingBox();
expect(pageControlsBounds.y).toBeGreaterThanOrEqual(pageHeadingBounds.y);
expect(pageControlsBounds.y + pageControlsBounds.height).toBeLessThanOrEqual(pageHeadingBounds.y + pageHeadingBounds.height);
if (width > 760) {
if (width > 1024) {
expect(headingActionsBounds.height).toBeCloseTo(pageHeadingBounds.height, 0);
expect(pageControlsBounds.y).toBeCloseTo(pageHeadingBounds.y, 0);
}

10
e2e/nds-patterns.spec.js
View file

@ -69,7 +69,7 @@ test("badges, notices, progress and chips expose meaningful visual states", asyn
await expect(chip.locator("img")).toHaveCSS("height", "16px");
});
for (const width of [1280, 390]) {
for (const width of [1440, 1280, 768]) {
test(`overlays fit, scroll internally and preserve stacking at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 800 });
await mountStyles(page, `<div class="confirm-modal-root">
@ -88,17 +88,17 @@ for (const width of [1280, 390]) {
await page.locator("body").evaluate((element) => element.classList.add("is-modal-open"));
await expect(page.locator("body")).toHaveCSS("overflow", "hidden");
await mountStyles(page, `<div class="drawer" aria-hidden="false">
await mountStyles(page, `<div class="drawer ${width < 1440 ? "is-compact" : ""}" aria-hidden="false">
<section class="drawer-panel nds-drawer-panel"><div style="height:1400px">Drawer</div></section>
<div class="drawer-resize-handle nds-drawer-resize-handle"></div></div>`);
const drawer = page.locator(".drawer-panel");
await expectFits(drawer);
await expect(drawer).toHaveCSS("top", width <= 760 ? "110px" : "68px");
await expect(drawer).toHaveCSS("top", "68px");
await expect(drawer).toHaveCSS("position", "fixed");
await expect(drawer).toHaveCSS("overflow-y", "auto");
await expect(drawer).toHaveCSS("backdrop-filter", "blur(10px)");
await expect(drawer).toHaveCSS("width", width < 700 ? `${width}px` : "700px");
await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 700 ? "none" : "block");
await expect(drawer).toHaveCSS("width", width < 1440 ? `${width - (width <= 1024 ? 72 : 248)}px` : "700px");
await expect(page.locator(".drawer-resize-handle")).toHaveCSS("display", width < 1440 ? "none" : "block");
await page.locator(".drawer").evaluate((element) => element.setAttribute("aria-hidden", "true"));
await expect(drawer).toBeHidden();

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

@ -35,29 +35,60 @@ test("calculator layout follows the tool width rather than its location", async
await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "72px");
});
for (const width of [1280, 900, 390]) {
test("toolbox columns follow the toolbox content width", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 720 });
await mountStyles(page, `<section class="toolbox-page" style="width: 920px">
<div class="modules-toolbar"><div class="layout-switch">Layout</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>
</section>`);
const toolbox = page.locator(".toolbox-page");
const modules = toolbox.locator(".modules");
await columns(modules, 2);
await expect(toolbox.locator(".modules-toolbar")).toBeVisible();
await toolbox.evaluate((element) => { element.style.width = "899px"; });
await columns(modules, 1);
await expect(toolbox.locator(".modules-toolbar")).toBeHidden();
await expect(toolbox.locator(".module-column").first()).toHaveCSS("display", "contents");
});
for (const width of [1920, 1280, 1025, 1024, 960, 768]) {
test(`home, about and library retain their responsive layout at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await page.goto("/");
const onboarding = page.locator(".home-onboarding");
await expectFits(onboarding);
await columns(page.locator(".home-onboarding-layout"), width <= 760 ? 1 : 2);
const hero = page.locator(".hero");
const heroContent = hero.locator(":scope > div").first();
const heroStats = hero.locator(".hero-stats");
await columns(hero, width <= 1024 ? 1 : 2);
const [heroContentBounds, heroStatsBounds] = await Promise.all([heroContent.boundingBox(), heroStats.boundingBox()]);
if (width <= 1024) {
expect(heroStatsBounds.y).toBeGreaterThanOrEqual(heroContentBounds.y + heroContentBounds.height);
expect(heroStatsBounds.x).toBeCloseTo(heroContentBounds.x, 0);
} else {
expect(heroStatsBounds.x).toBeGreaterThan(heroContentBounds.x + heroContentBounds.width);
}
await columns(page.locator(".home-onboarding-layout"), width <= 1024 ? 1 : 2);
await expect(page.locator(".home-onboarding-slider figcaption")).toHaveCSS("position", "absolute");
await expect(page.locator(".home-onboarding-dots")).toHaveCSS("display", "flex");
await expect(page.locator(".home-onboarding-slider img")).toHaveCSS("object-fit", "cover");
await expect(page.locator(".home-visual")).toHaveCSS("display", width <= 1024 ? "none" : "grid");
await expect(page.locator(".origin-copy")).toHaveCSS("border-right-width", width <= 1024 ? "0px" : "2px");
await columns(page.locator(".origin-section"), width <= 1024 ? 1 : 2);
const side = page.locator(".sidebar");
await expect(side).toHaveCSS("display", width <= 760 ? "none" : "flex");
if (width > 760) {
await expect(side).toHaveCSS("display", "flex");
{
const responsiveCompact = width <= 1024;
await expect(side).not.toHaveAttribute("data-variant");
if (responsiveCompact) await expect(side).toHaveAttribute("data-variant", "compact");
else await expect(side).not.toHaveAttribute("data-variant");
await expect(side).toHaveCSS("width", responsiveCompact ? "72px" : "248px");
await expect(page.locator(".sidebar-mascot")).toHaveCSS("display", responsiveCompact ? "none" : "block");
const secondaryLinks = page.locator(".sidebar-secondary-links");
await expect(secondaryLinks).toHaveCSS("display", "grid");
await expect(page.locator(".sidebar-about-link")).toHaveCount(3);
await expect(page.locator(".sidebar-about-link strong").first()).toHaveCSS("display", responsiveCompact ? "none" : "block");
await expect(page.locator(".sidebar-note")).toHaveCSS("display", responsiveCompact ? "none" : "block");
await expect(page.locator(".sidebar-storage-actions")).toHaveCSS("flex-direction", "row");
await expect(page.locator(".sidebar-note")).toHaveCSS("display", "block");
await expect(page.locator(".sidebar-storage-actions")).toHaveCSS("flex-direction", responsiveCompact ? "column" : "row");
await expect(page.locator(".sidebar-action-button")).toHaveCount(2);
await expect(page.locator(".nav-item")).toHaveCount(3);
await expect(page.locator(".nav-item strong").first()).toHaveCSS("display", responsiveCompact ? "none" : "block");
@ -83,12 +114,26 @@ for (const width of [1280, 900, 390]) {
await expect(page.locator(".about-tool-item .module-icon").first()).toHaveCSS("width", "34px");
await page.goto("/#/library");
await expectFits(page.locator(".library-page"));
await columns(page.locator(".library-doc-layout"), width <= 760 ? 1 : 2);
await columns(page.locator(".library-doc-layout"), width <= 1024 ? 1 : 2);
await columns(page.locator(".library-example-layout.has-legend").first(), width <= 1024 ? 1 : 2);
expect(await page.locator("body").evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(width);
});
}
for (const width of [1280, 390]) {
for (const width of [640, 390]) {
test(`below the validated width the compact sidebar remains available without phone navigation at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 720 });
await page.goto("/#/games/aniimo/catalog");
await expect(page.locator(".sidebar")).toBeVisible();
await expect(page.locator(".sidebar")).toHaveCSS("width", "72px");
await expect(page.locator(".mobile-nav")).toHaveCount(0);
await expect(page.locator(".route-content-view")).toBeVisible();
await expect(page.locator(".compact-game-view-switch")).toBeVisible();
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
});
}
for (const width of [1280, 768]) {
test(`game grids and toolbox columns adapt without horizontal overflow at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await mountStyles(page, `<main>

4
e2e/toolbox-cover.spec.js
View file

@ -97,7 +97,7 @@ test("cancelled and unreadable replacements preserve the cover and allow selecti
test("game association takes precedence without discarding the custom cover", async ({ page }) => {
await page.goto("/#/games/mhwilds");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
const drawer = page.locator("#toolbox-drawer .drawer-panel");
await importToolbox(page, "Linked cover", drawer);
await expect(drawer.getByRole("heading", { name: "Linked cover" })).toBeVisible();
@ -111,7 +111,7 @@ test("game association takes precedence without discarding the custom cover", as
await expect(page.locator(".toolbox-game-icon img")).toHaveAttribute("src", gameCover);
await expect(picker(page)).toHaveCount(0);
await page.goto("/#/games/mhwilds");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
await drawer.getByRole("button", { name: "Lier une toolbox", exact: true }).click();
const dialog = page.getByRole("dialog", { name: "Lier une toolbox", exact: true });
await dialog.getByLabel("Toolbox associée").selectOption("");

69
e2e/toolbox-drawer-layout.spec.js
View file

@ -1,11 +1,16 @@
// Rôle : vérifie la réservation hybride, le redimensionnement et le mode mobile du drawer toolbox.
// Rôle : vérifie le panneau large et la bascule guide/toolbox en fenêtre compacte.
import { test, expect } from "@playwright/test";
async function openDrawer(page) {
const trigger = page.getByRole("button", { name: "Afficher la toolbox", exact: true });
await page.locator(".topbar-actions").waitFor();
const compactTrigger = page.getByRole("tab", { name: "Toolbox", exact: true });
const trigger = await compactTrigger.isVisible()
? compactTrigger
: page.getByRole("button", { name: "Afficher la toolbox", exact: true });
await expect(trigger).toBeVisible();
await trigger.click();
await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true");
if (await compactTrigger.isVisible()) await expect(compactTrigger).toHaveAttribute("aria-selected", "true");
else await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toHaveAttribute("aria-pressed", "true");
const drawer = page.locator("#toolbox-drawer");
await expect(drawer.locator(".drawer-panel")).toBeVisible();
return drawer;
@ -20,8 +25,8 @@ async function resizeDrawer(page, deltaX) {
await page.mouse.up();
}
test("drawer reserves 700px while additional width overlays the page", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 900 });
test("wide drawer reserves 700px while additional width overlays the page", async ({ page }) => {
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto("/#/games/mhwilds/monsters");
const drawer = await openDrawer(page);
@ -41,7 +46,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({
const topbarBounds = await page.locator(".topbar").boundingBox();
expect(initialPanelBounds.width).toBeCloseTo(700, 0);
expect(initialPanelBounds.x).toBeCloseTo(contentBounds.x + contentBounds.width - 700, 0);
expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1280, 0);
expect(topbarBounds.x + topbarBounds.width).toBeCloseTo(1440, 0);
const search = page.locator(".nds-filter-search input").first();
await search.fill("rath");
@ -55,7 +60,7 @@ test("drawer reserves 700px while additional width overlays the page", async ({
expect(expandedPanelBounds.x).toBeCloseTo(initialPanelBounds.x - 100, 0);
expect(expandedMainBounds.x).toBeCloseTo(initialMainBounds.x, 0);
expect(expandedMainBounds.width).toBeCloseTo(initialMainBounds.width, 0);
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1280);
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(1440);
await resizeDrawer(page, 300);
await expect.poll(async () => (await panel.boundingBox()).width).toBeCloseTo(700, 0);
@ -71,15 +76,55 @@ test("drawer reserves 700px while additional width overlays the page", async ({
await expect.poll(async () => (await reopenedDrawer.locator(".drawer-panel").boundingBox()).width).toBeCloseTo(700, 0);
});
test("drawer becomes a non-resizable full-width overlay below 700px", async ({ page }) => {
await page.setViewportSize({ width: 390, height: 900 });
test("compact game view switches between mounted guide and toolbox", async ({ page }) => {
await page.setViewportSize({ width: 960, height: 720 });
await page.goto("/#/games/mhwilds/monsters");
const guide = page.locator(".route-content-view");
const search = page.locator(".nds-filter-search input").first();
await search.fill("rath");
await page.evaluate(() => globalThis.window.scrollTo(0, 240));
const guideScroll = await page.evaluate(() => globalThis.window.scrollY);
const viewSwitch = page.locator(".compact-game-view-switch");
const guideTab = page.getByRole("tab", { name: "Guide" });
const toolboxTab = page.getByRole("tab", { name: "Toolbox", exact: true });
await expect(guideTab).toHaveAttribute("aria-selected", "true");
await expect(viewSwitch).toHaveCSS("min-width", "184px");
await expect(guideTab).toHaveCSS("min-height", "34px");
await expect(toolboxTab).toHaveCSS("padding-left", "10px");
const [guideBounds, toolboxBounds] = await Promise.all([guideTab.boundingBox(), toolboxTab.boundingBox()]);
expect(guideBounds.width).toBeCloseTo(toolboxBounds.width, 0);
await expect(guide).toBeVisible();
const drawer = await openDrawer(page);
const panel = drawer.locator(".drawer-panel");
const bounds = await panel.boundingBox();
expect(bounds.x).toBeCloseTo(0, 0);
expect(bounds.width).toBeCloseTo(390, 0);
expect(bounds.x).toBeCloseTo(72, 0);
expect(bounds.width).toBeCloseTo(888, 0);
await expect(drawer.locator(".drawer-resize-handle")).toHaveCSS("display", "none");
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(390);
await expect(toolboxTab).toHaveAttribute("aria-selected", "true");
await expect(guide).toBeHidden();
await guideTab.click();
await expect(guide).toBeVisible();
await expect(drawer).toBeHidden();
await expect(drawer).toHaveCount(1);
await expect(search).toHaveValue("rath");
await expect.poll(() => page.evaluate(() => globalThis.window.scrollY)).toBe(guideScroll);
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth)).toBeLessThanOrEqual(960);
});
test("compact toolbox intent survives the 1440px transition", async ({ page }) => {
await page.setViewportSize({ width: 1439, height: 720 });
await page.goto("/#/games/mhwilds/monsters");
await openDrawer(page);
await page.setViewportSize({ width: 1440, height: 720 });
const drawer = page.locator("#toolbox-drawer");
await expect(drawer.locator(".drawer-panel")).toBeVisible();
await expect(drawer.locator(".drawer-panel")).toHaveCSS("width", "700px");
await expect(page.locator(".app-shell")).toHaveClass(/toolbox-drawer-open/);
await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toBeFocused();
await page.setViewportSize({ width: 1439, height: 720 });
await page.getByRole("tab", { name: "Guide" }).click();
await page.setViewportSize({ width: 1440, height: 720 });
await expect(drawer).toHaveCount(0);
});

4
e2e/toolbox-spaces.spec.js
View file

@ -193,13 +193,13 @@ test("the linked game drawer shares the persisted active space", async ({ page }
}, { mhwilds: "drawer-spaces" });
await page.goto("/#/games/mhwilds");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
const drawer = page.locator("#toolbox-drawer");
await expect(drawer.getByRole("tab", { name: "Boss" })).toHaveAttribute("aria-selected", "true");
await expect(drawer.locator("[data-module-id='a']")).toBeVisible();
await drawer.getByRole("tab", { name: "Défaut" }).click();
await expect(drawer.locator("[data-module-id='a']")).toHaveCount(0);
await page.reload();
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
await expect(page.locator("#toolbox-drawer").getByRole("tab", { name: "Défaut" })).toHaveAttribute("aria-selected", "true");
});

8
e2e/toolbox.spec.js
View file

@ -204,7 +204,7 @@ test("loads randomizer tabs after module split", async ({ page }) => {
test("creates a game-linked toolbox from the drawer", async ({ page }) => {
await page.goto("/#/games/mhwilds");
await expect(page.getByRole("heading", { name: /Monster Hunter.*Wilds/ })).toBeVisible();
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
const drawer = page.locator("#toolbox-drawer .drawer-panel");
await expect(drawer).toBeVisible();
@ -216,13 +216,13 @@ test("creates a game-linked toolbox from the drawer", async ({ page }) => {
await expect(drawer.getByRole("heading", { name: /Monster Hunter.*Wilds/ })).toBeVisible();
await expect(drawer.locator("[data-module-type='memos']")).toBeVisible();
await expect(drawer.locator("[data-module-type='links']")).toBeVisible();
await expect(page.getByRole("button", { name: "Masquer la toolbox", exact: true })).toBeVisible();
await expect(page.getByRole("tab", { name: "Toolbox", exact: true })).toHaveAttribute("aria-selected", "true");
});
test("links an available toolbox directly from the empty game drawer", async ({ page }) => {
await createToolbox(page, "Toolbox déjà liée");
await page.goto("/#/games/mhwilds");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
const drawer = page.locator("#toolbox-drawer .drawer-panel");
await expect(drawer.getByRole("heading", { name: "Ou associer une toolbox déjà existante" })).toBeVisible();
@ -232,7 +232,7 @@ test("links an available toolbox directly from the empty game drawer", async ({
await createToolbox(page, "Toolbox libre");
await page.goto("/#/games/diablo4");
await page.getByRole("button", { name: "Afficher la toolbox", exact: true }).click();
await page.getByRole("tab", { name: "Toolbox", exact: true }).click();
await expect(drawer.getByLabel("Toolbox disponible").getByRole("option", { name: "Toolbox déjà liée" })).toHaveCount(0);
await drawer.getByLabel("Toolbox disponible").selectOption({ label: "Toolbox libre" });