Keith Solomon
93b9ef68cd
Capture the per-block approach, what changed in each PHP/CSS file, and the test/geometry updates needed for the new mobile-*-vector.svg files. Mirror the structure used by the prior 2026-06-27 mobile-homepage-fidelity spec.
52 lines
2.9 KiB
Markdown
52 lines
2.9 KiB
Markdown
# Mobile Vector Replacement
|
||
|
||
## Goal
|
||
|
||
Swap the existing mobile vector sources in the homepage hero, pull quote, contact block, and our-work block for the artist-supplied `static/img/mobile-*-vector.svg` files. Each new SVG is drawn at the 402px mobile baseline so it doesn't need a desktop-vector clip-path trick to look right.
|
||
|
||
## Approach
|
||
|
||
- Treat each block separately. Same desktop element, an additional mobile element, CSS show/hide.
|
||
- Preserve all desktop and tablet-above-767 behavior.
|
||
- Lazy-load the new `<img>` elements the same way the desktop sources are loaded.
|
||
|
||
## Per Block
|
||
|
||
### Hero
|
||
|
||
- New partial `views/partials/hero-vector-mobile.php` renders an `<img class="hero-vector--mobile">` referencing `static/img/mobile-hero-vector.svg`.
|
||
- `homepage-hero.php` loads both partials inside the existing `.heroVector .vector` container.
|
||
- `homepage-hero.css` hides the desktop SVG and shows the mobile `<img>` below 768px. The existing vector positioning rules still apply to the wrapper.
|
||
|
||
### Pull Quote
|
||
|
||
- `pull-quote.php` swaps the existing PNG source for `static/img/mobile-pullquote-vector.svg` at the existing `.pull-quote__vector--mobile` slot.
|
||
- CSS unchanged. The element already had `display: none` at desktop and `object-fit: cover` at mobile.
|
||
|
||
### Contact Block
|
||
|
||
- `contact-block.php` adds an `<img class="contact-block__linework contact-block__linework--mobile">` next to the existing SVG partial.
|
||
- `contact-block.css` hides the desktop SVG and shows the mobile `<img>` at mobile. The mobile `<img>` fills the card width (the new SVG is 342×187, ratio matches the card).
|
||
- The reusable contact linework ratio assertion updates from `628/282` to `342/187`.
|
||
- The linework geometry assertion updates to expect `y ≈ 299`, `height ≈ 188`, `width = card.width`.
|
||
|
||
### Our Work
|
||
|
||
- `our-work.php` replaces the clip-path composition (CSS `--our-work-vector-image` + `::before`/`::after` background images) with a real `<img>` referencing `static/img/mobile-work-vector.svg`.
|
||
- `our-work.css` drops the `vector-mobile-clip` rules and the two `::before/::after` background layers. Mobile vector is now a single image covering the block.
|
||
- The linework composition test updates to assert against the `<img>` (visible, has the right `currentSrc`) instead of the CSS background-image layers.
|
||
|
||
## Verification
|
||
|
||
- `npm run build` then `npx playwright test --reporter=line` — 36/36 pass.
|
||
- The contact linework test waits for the lazy-loaded `<img>` to finish loading before measuring its bounding rect.
|
||
- PHPCS clean on changed files. Pre-existing `lib/activation.php` CRLF error is untouched.
|
||
- `git diff --check` clean.
|
||
- `composer validate --no-check-publish` passes.
|
||
|
||
## Acceptance Criteria
|
||
|
||
1. Below 768px the hero, pull quote, contact block, and our-work block render the artist-supplied mobile vectors.
|
||
2. At 768px and above the original desktop SVGs (or PNG for the original pullquote) render unchanged.
|
||
3. Existing responsive geometry tests pass with the updated ratios and positions.
|