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

fix: scale mobile pull quote proportionally

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 18:37:18 -05:00
parent 97ebffb70d
commit 15e832645c
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+27 -4
View File
@@ -102,19 +102,42 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
const text = await getBox(page.locator(".pull-quote__text"));
const vectorImage = page.locator(".pull-quote__vector img");
const vector = await getBox(vectorImage);
const borderWidth = await page.locator(".pull-quote").evaluate((element) =>
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
);
expectNear(quote.height, 361, 6);
expectNear(borderWidth, 16, 1);
expectNear(text.x - quote.x, 32, 3);
expect(text.width).toBeGreaterThanOrEqual(330);
expectNear(text.height, 216, 6);
expectNear(
text.y + text.height / 2,
quote.y + (quote.height - 12) / 2,
quote.y + (quote.height - borderWidth) / 2,
8,
);
expectNear(vector.x, quote.x, 3);
expectNear(vector.width, quote.width, 3);
expectNear(vector.height, quote.height - borderWidth, 3);
});
test("mobile pull quote scales proportionally through 767px", async ({
page,
}) => {
await page.setViewportSize({ width: 767, height: 900 });
await page.goto(homepage);
const quote = await getBox(page.locator(".pull-quote"));
const text = await getBox(page.locator(".pull-quote__text"));
expectNear(quote.height, 767 * 0.898, 6);
expect(text.y).toBeGreaterThanOrEqual(quote.y);
expect(text.y + text.height).toBeLessThanOrEqual(quote.y + quote.height);
expectNear(
text.y + text.height / 2,
quote.y + (quote.height - 16) / 2,
8,
);
expect(vector.width).toBeGreaterThanOrEqual(470);
expect(vector.height).toBeGreaterThan(quote.height);
await expect(vectorImage).toHaveCSS("object-position", "3% 42%");
});
test("mobile recent posts exposes previous and next controls", async ({
views/blocks/pull-quote/pull-quote.css
+4 -8
View File
@@ -47,18 +47,14 @@
@media (max-width: 767px) {
.pull-quote {
background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
border-bottom-width: 0.75rem;
height: clamp(18rem, 89.8vw, 22.5625rem);
border-bottom-width: 1rem;
height: 89.8vw;
}
.pull-quote .pull-quote__vector img {
height: 118%;
left: -9%;
max-width: none;
height: 100%;
object-fit: fill;
object-position: 3% 42%;
position: relative;
width: 118%;
width: 100%;
}
.pull-quote .pull-quote__content {