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

Add responsive game filters and hybrid toolbox drawer
All checks were successful
Deploy Sokko G / deploy (push) Successful in 20s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-27 18:00:49 +02:00
parent 1ee460b94f
commit 00e73f0062
32 changed files with 1202 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,10 +19,34 @@ for (const width of [1280, 900, 390]) {
await expect(page.locator(".home-onboarding-slider img")).toHaveCSS("object-fit", "cover");
const side = page.locator(".sidebar");
await expect(side).toHaveCSS("display", width <= 760 ? "none" : "flex");
await expect(page.locator(".sidebar-mascot")).toHaveCSS("display", width <= 1024 ? "none" : "block");
for (const link of await page.locator(".sidebar-about-link").all()) {
await expect(link).toHaveCSS("align-items", "center");
if (width <= 1024) await expect(link).toHaveCSS("justify-content", "center");
if (width > 760) {
const responsiveCompact = width <= 1024;
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-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");
const brand = page.locator(".brand");
const brandMark = page.locator(".brand-mark");
await expect(brandMark).toHaveCSS("animation-name", "none");
await expect(brandMark).toHaveCSS("transform", "none");
await brand.hover();
await expect.poll(async () => brandMark.evaluate((element) => globalThis.getComputedStyle(element).transform)).not.toBe("none");
if (!responsiveCompact) {
const storageActions = await page.locator(".sidebar-action-button").evaluateAll((elements) => elements.map((element) => element.getBoundingClientRect()));
expect(storageActions[1].x).toBeGreaterThan(storageActions[0].x);
expect(storageActions[1].y).toBeCloseTo(storageActions[0].y, 0);
const secondaryBox = await secondaryLinks.boundingBox();
const storageBox = await page.locator(".sidebar-note").boundingBox();
expect(secondaryBox.y + secondaryBox.height).toBeLessThan(storageBox.y);
}
}
await page.goto("/#/about");
await expectFits(page.locator(".about-page"));
@ -47,7 +71,7 @@ for (const width of [1280, 390]) {
<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>
</main>`);
await columns(page.locator(".game-layout"), width <= 760 ? 1 : 2);
await columns(page.locator(".game-layout"), 1);
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");