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

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>