Jacek Pyziak
6f6c1fcf17
Sekcja Elementor zawierająca modal miała elementor-hidden-mobile/tablet, co powodowało display:none na rodzicu. Modal position:fixed wewnątrz ukrytego elementu miał zerowe wymiary. Fix: przeniesienie overlay do document.body w initRefs(). Plan Phase 13 (pakiety ochronne) utworzony, BLOCKED — czeka na klienta. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
109 lines
3.0 KiB
Markdown
109 lines
3.0 KiB
Markdown
---
|
||
phase: 14-mobile-modal-fix
|
||
plan: 01
|
||
subsystem: ui
|
||
tags: [mobile, elementor, modal, responsive]
|
||
|
||
requires:
|
||
- phase: none
|
||
provides: n/a
|
||
provides:
|
||
- Modal rezerwacji działa na mobile/tablet
|
||
affects: []
|
||
|
||
tech-stack:
|
||
added: []
|
||
patterns: [overlay-to-body pattern for Elementor hidden sections]
|
||
|
||
key-files:
|
||
created: []
|
||
modified:
|
||
- wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
|
||
|
||
key-decisions:
|
||
- "appendChild do body zamiast CSS override — niezależne od przyszłych zmian widoczności sekcji Elementor"
|
||
|
||
patterns-established:
|
||
- "Modal overlay musi być dzieckiem body, nie sekcji Elementor (unika problemów z hidden responsive)"
|
||
|
||
duration: 15min
|
||
started: 2026-04-09T21:50:00Z
|
||
completed: 2026-04-09T22:05:00Z
|
||
---
|
||
|
||
# Phase 14 Plan 01: Mobile Modal Fix Summary
|
||
|
||
**Fix: modal rezerwacji przeniesiony do document.body — działa na mobile/tablet niezależnie od widoczności sekcji Elementor.**
|
||
|
||
## Performance
|
||
|
||
| Metric | Value |
|
||
|--------|-------|
|
||
| Duration | ~15min |
|
||
| Started | 2026-04-09 |
|
||
| Completed | 2026-04-09 |
|
||
| Tasks | 1 completed |
|
||
| Files modified | 1 |
|
||
|
||
## Acceptance Criteria Results
|
||
|
||
| Criterion | Status | Notes |
|
||
|-----------|--------|-------|
|
||
| AC-1: Modal otwiera się na mobile | Pass | Zweryfikowane Playwright 375×812 |
|
||
| AC-2: Brak regresji desktop | Pass | Desktop bez zmian — overlay i tak jest position:fixed |
|
||
|
||
## Accomplishments
|
||
|
||
- Modal rezerwacji działa na mobile i tablet — klienci mogą składać rezerwacje z telefonu
|
||
- Pre-fill z hero search form działa poprawnie na mobile po fixie
|
||
|
||
## Root Cause
|
||
|
||
Sekcja Elementor (`elementor-element-a7629b1`, klasa `header-box`) miała ustawione `elementor-hidden-tablet elementor-hidden-mobile` w edytorze Elementor. To powodowało `display:none` na rodzicu modala. Modal `position:fixed` wewnątrz ukrytego elementu miał `width:0, height:0` — był w DOM, miał klasę `is-open`, ale był niewidoczny.
|
||
|
||
## Fix
|
||
|
||
Jedna linijka w `initRefs()` (carei-reservation.js:90):
|
||
```js
|
||
if (overlay && overlay.parentElement !== document.body) {
|
||
document.body.appendChild(overlay);
|
||
}
|
||
```
|
||
|
||
Przeniesienie overlay do `<body>` gwarantuje że `position:fixed` działa względem viewport, niezależnie od struktury Elementor.
|
||
|
||
## Files Created/Modified
|
||
|
||
| File | Change | Purpose |
|
||
|------|--------|---------|
|
||
| `wp-content/plugins/carei-reservation/assets/js/carei-reservation.js` | Modified | appendChild overlay do body w initRefs() |
|
||
|
||
## Decisions Made
|
||
|
||
| Decision | Rationale | Impact |
|
||
|----------|-----------|--------|
|
||
| appendChild do body (nie CSS override) | Niezależne od przyszłych zmian responsive w Elementor | Trwały fix, zero ryzyka regresji |
|
||
|
||
## Deviations from Plan
|
||
|
||
None — plan wykonany dokładnie jak opisany.
|
||
|
||
## Issues Encountered
|
||
|
||
None.
|
||
|
||
## Next Phase Readiness
|
||
|
||
**Ready:**
|
||
- Phase 13 (Pakiety ochronne) — BLOCKED, czeka na potwierdzenie klienta
|
||
|
||
**Concerns:**
|
||
- None
|
||
|
||
**Blockers:**
|
||
- Phase 13 zablokowana — potrzebna odpowiedź klienta o źródle danych cenowych
|
||
|
||
---
|
||
*Phase: 14-mobile-modal-fix, Plan: 01*
|
||
*Completed: 2026-04-09*
|