diff --git a/static/img/mobile-contact-vector.svg b/static/img/mobile-contact-vector.svg
new file mode 100644
index 0000000..5dfc163
--- /dev/null
+++ b/static/img/mobile-contact-vector.svg
@@ -0,0 +1,3 @@
+
diff --git a/tests/mobile-homepage.spec.js b/tests/mobile-homepage.spec.js
index fba893a..a18fc36 100644
--- a/tests/mobile-homepage.spec.js
+++ b/tests/mobile-homepage.spec.js
@@ -350,7 +350,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
const heading = await getBox(cardLocator.locator(".contact-block__text"));
const cta = await getBox(cardLocator.locator(".contact-block__cta"));
const linework = await getBox(
- cardLocator.locator(".contact-block__linework"),
+ cardLocator.locator(".contact-block__linework--mobile"),
);
const backgroundImage = cardLocator.locator(".contact-block__bg-image");
const bandHeight = await cardLocator.evaluate((element) =>
@@ -366,9 +366,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
expectNear(cta.x - card.x, 33, 3);
expectNear(cta.y - card.y, 219, 5);
expectNear(cta.width, 173, 4);
- expectNear(linework.y - card.y, 300, 5);
- expectNear(linework.height, 186, 5);
- expect(linework.x).toBeLessThanOrEqual(card.x);
+ expectNear(linework.y - card.y, 299, 5);
+ expectNear(linework.height, 188, 5);
+ expectNear(linework.width, card.width, 3);
await expect(backgroundImage).toHaveCSS("object-fit", "cover");
const overlay = await cardLocator
.locator(".contact-block__media")
@@ -385,7 +385,9 @@ test("mobile contact card matches the 402px reference geometry", async ({
const media = clone.querySelector(".contact-block__media");
const content = clone.querySelector(".contact-block__content");
- const linework = clone.querySelector(".contact-block__linework");
+ const linework = clone.querySelector(
+ ".contact-block__linework--mobile",
+ );
const lineworkBox = linework.getBoundingClientRect();
const styles = {
borderRadius: getComputedStyle(clone).borderRadius,
@@ -401,7 +403,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px");
expect(reusableStyles.contentPaddingLeft).toBe("24px");
- expectNear(reusableStyles.lineworkRatio, 628 / 282, 0.03);
+ expectNear(reusableStyles.lineworkRatio, 342 / 187, 0.03);
expect(reusableStyles.maskImage).toContain("linear-gradient");
expect(reusableStyles.overlay).toBe("none");
});
@@ -471,30 +473,27 @@ test("mobile Our Work uses its dedicated linework composition", async ({
await page.goto(homepage);
const mobileVector = page.locator(".our-work__vector-mobile");
- const clip = mobileVector.locator(".our-work__vector-mobile-clip");
- const composition = await mobileVector.evaluate((element) => {
- const clipElement = element.querySelector(
- ".our-work__vector-mobile-clip",
- );
- const upper = getComputedStyle(clipElement, "::before");
- const lower = getComputedStyle(element, "::after");
-
- return {
- lowerBackground: lower.backgroundImage,
- lowerWidth: Number.parseFloat(lower.width),
- upperBackground: upper.backgroundImage,
- upperWidth: Number.parseFloat(upper.width),
- };
- });
+ const mobileImage = mobileVector.locator("img");
await expect(mobileVector).toBeVisible();
- await expect(clip).toBeVisible();
+ await expect(mobileImage).toBeVisible();
await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
- await expect(mobileVector.locator("img")).toHaveCount(0);
- expect(composition.upperBackground).toContain("our-work-vector.svg");
- expect(composition.lowerBackground).toContain("our-work-vector.svg");
- expectNear(composition.upperWidth, 960, 4);
- expectNear(composition.lowerWidth, 960, 4);
+ await mobileImage.evaluate(
+ (image) =>
+ /** @type {HTMLImageElement} */ (image).complete ||
+ new Promise((resolve) => {
+ /** @type {HTMLImageElement} */ (image).addEventListener(
+ "load",
+ () => resolve(undefined),
+ { once: true },
+ );
+ }),
+ );
+ expect(
+ await mobileImage.evaluate(
+ (image) => /** @type {HTMLImageElement} */ (image).currentSrc,
+ ),
+ ).toContain("mobile-work-vector.svg");
});
test("mobile Our Work reserves reference height only for both images", async ({
@@ -609,32 +608,19 @@ test("mobile Our Work remains contained at responsive endpoints", async ({
expectNear(primary.y, secondary.y, 2);
expect(left.y).toBeLessThan(bottom.y);
- const vectorScale = await page
- .locator(".our-work__vector-mobile")
- .evaluate((element) => {
- const clip = element.querySelector(
- ".our-work__vector-mobile-clip",
- );
- const upper = getComputedStyle(clip, "::before");
- const lower = getComputedStyle(element, "::after");
-
- return {
- lowerLeft: Number.parseFloat(lower.left),
- lowerTop: Number.parseFloat(lower.top),
- lowerWidth: Number.parseFloat(lower.width),
- upperLeft: Number.parseFloat(upper.left),
- upperTop: Number.parseFloat(upper.top),
- upperWidth: Number.parseFloat(upper.width),
- };
- });
- const scale = width / 402;
-
- expectNear(vectorScale.upperWidth, 960 * scale, 4);
- expectNear(vectorScale.lowerWidth, 960 * scale, 4);
- expectNear(vectorScale.upperLeft, 100 * scale, 3);
- expectNear(vectorScale.upperTop, 240 * scale, 3);
- expectNear(vectorScale.lowerLeft, -430 * scale, 4);
- expectNear(vectorScale.lowerTop, 490 * scale, 4);
+ const mobileImage = page.locator(".our-work__vector-mobile img");
+ await expect(mobileImage).toBeVisible();
+ await mobileImage.evaluate(
+ (image) =>
+ /** @type {HTMLImageElement} */ (image).complete ||
+ new Promise((resolve) => {
+ /** @type {HTMLImageElement} */ (image).addEventListener(
+ "load",
+ () => resolve(undefined),
+ { once: true },
+ );
+ }),
+ );
}
});
diff --git a/tests/mobile-homepage.spec.js-snapshots/contact-card-render-chromium.png b/tests/mobile-homepage.spec.js-snapshots/contact-card-render-chromium.png
index 955596f..3db68d5 100644
Binary files a/tests/mobile-homepage.spec.js-snapshots/contact-card-render-chromium.png and b/tests/mobile-homepage.spec.js-snapshots/contact-card-render-chromium.png differ
diff --git a/views/blocks/contact-block/contact-block.css b/views/blocks/contact-block/contact-block.css
index b8e9f89..4f6fcfd 100644
--- a/views/blocks/contact-block/contact-block.css
+++ b/views/blocks/contact-block/contact-block.css
@@ -37,6 +37,10 @@
width: auto;
}
+ .contact-block__linework--mobile {
+ display: none;
+ }
+
.contact-block__content {
padding-inline: 1rem;
}
@@ -75,7 +79,12 @@
}
.contact-block .contact-block__linework {
+ display: none;
+ }
+
+ .contact-block .contact-block__linework--mobile {
bottom: 0.75rem;
+ display: block;
height: auto;
max-width: 112%;
right: -32%;
@@ -141,13 +150,18 @@
}
.contact-block.home-contact .contact-block__linework {
+ display: none;
+ }
+
+ .contact-block.home-contact .contact-block__linework--mobile {
bottom: 0;
+ display: block;
height: auto;
- left: calc(100% * -113 / 343);
+ left: 0;
max-width: none;
overflow: visible;
right: auto;
- width: calc(100% * 414 / 343);
+ width: 100%;
z-index: 2;
}
diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php
index 566d9c2..e0c659e 100644
--- a/views/blocks/contact-block/contact-block.php
+++ b/views/blocks/contact-block/contact-block.php
@@ -31,6 +31,8 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
+
+  ); ?>)