Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match mobile Our Work linework

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 22:24:38 -05:00
parent 6206761573
commit 79ff6a1408
4 changed files with 123 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+44 -4
View File
@@ -457,15 +457,49 @@ test("mobile Our Work contains both reference images", async ({ page }) => {
const block = await getBox(page.locator(".our-work"));
const left = await getBox(page.locator(".our-work__media--left"));
const bottom = await getBox(page.locator(".our-work__media--bottom"));
const vector = await getBox(page.locator(".our-work__vector img"));
expectNear(block.height, 888, 12);
expectNear(left.width, 189, 5);
expect(bottom.width).toBeGreaterThanOrEqual(335);
expect(bottom.x).toBeGreaterThanOrEqual(60);
expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
expectNear(vector.width, 474, 4);
expectNear(vector.y - block.y, 160, 3);
});
test("mobile Our Work uses its dedicated linework composition", async ({
page,
}) => {
await page.goto(homepage);
const block = await getBox(page.locator(".our-work"));
const mobileVector = page.locator(".our-work__vector-mobile");
const upper = await getBox(
mobileVector.locator(".our-work__vector-mobile-upper"),
);
const lower = await getBox(
mobileVector.locator(".our-work__vector-mobile-lower"),
);
await expect(mobileVector).toBeVisible();
await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
expectNear(upper.x - block.x, 100, 3);
expectNear(upper.y - block.y, 240, 3);
expectNear(upper.width, 960, 4);
expectNear(lower.x - block.x, -430, 3);
expectNear(lower.y - block.y, 490, 3);
expectNear(lower.width, 960, 4);
});
test("mobile Our Work linework render remains stable", async ({ page }) => {
await page.goto(homepage);
await expect(page.locator(".our-work")).toHaveScreenshot(
"our-work-linework-render.png",
{
animations: "disabled",
maxDiffPixelRatio: 0.025,
threshold: 0.08,
},
);
});
test("mobile Our Work follows the reference content and overlap order", async ({
@@ -528,12 +562,18 @@ test("Our Work restores its tablet layout at 768px", async ({ page }) => {
const block = page.locator(".our-work");
const inner = block.locator(".our-work__inner");
const vector = block.locator(".our-work__vector img");
const vector = block.locator(".our-work__vector-desktop img");
await expect(block).toHaveCSS("min-height", "0px");
await expect(block).toHaveCSS("padding-top", "64px");
await expect(inner).toHaveCSS("padding-left", "38.4px");
await expect(vector).toHaveCSS("width", "768px");
await expect(block.locator(".our-work__vector-mobile")).toBeHidden();
expect(
await vector.evaluate(
(image) => /** @type {HTMLImageElement} */ (image).currentSrc,
),
).toContain("our-work-vector.svg");
});
test("mobile recent posts exposes previous and next controls", async ({
tests/mobile-homepage.spec.js-snapshots/our-work-linework-render-chromium.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 KiB

views/blocks/our-work/our-work.css
+52 -6
View File
@@ -35,6 +35,16 @@
width: 100%;
}
.our-work__vector-desktop {
display: block;
height: 100%;
width: 100%;
}
.our-work__vector-mobile {
display: none;
}
.our-work__inner {
display: grid;
gap: clamp(2rem, 4vw, 4rem) 2.5rem;
@@ -196,13 +206,49 @@
padding-top: 4.25rem;
}
.our-work__vector img {
height: 118%;
.our-work__vector-desktop {
display: none;
}
.our-work__vector-mobile {
display: block;
inset: 0;
position: absolute;
}
.our-work__vector-mobile-clip {
clip-path: polygon(
74.63% 24.77%,
100% 24.77%,
100% 56.31%,
0 56.31%,
0 48.42%,
54.73% 48.42%,
54.73% 43.92%,
67.16% 43.92%,
67.16% 38.29%,
74.63% 38.29%
);
inset: 0;
position: absolute;
}
.our-work__vector-mobile img {
height: auto;
max-width: none;
object-fit: cover;
object-position: 85% center;
transform: translateY(clamp(8rem, 39.8vw, 10rem));
width: 118%;
object-fit: fill;
position: absolute;
width: min(238.806vw, 60rem);
}
.our-work__vector-mobile-upper {
left: min(24.876vw, 6.25rem);
top: min(59.701vw, 15rem);
}
.our-work__vector-mobile-lower {
left: max(-106.965vw, -26.875rem);
top: min(121.891vw, 30.625rem);
}
.our-work__inner {
views/blocks/our-work/our-work.php
+21
View File
@@ -31,6 +31,26 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="our-work__vector" aria-hidden="true">
<div class="our-work__vector-mobile">
<div class="our-work__vector-mobile-clip">
<img
class="our-work__vector-mobile-upper"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
</div>
<img
class="our-work__vector-mobile-lower"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
</div>
<div class="our-work__vector-desktop">
<img
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
@@ -38,6 +58,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
role="presentation"
/>
</div>
</div>
<div class="our-work__inner container">
<?php if ( ! empty( $left_image ) ) : ?>