fix(14-mobile-modal-fix): Modal rezerwacji działa na mobile/tablet
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>
This commit is contained in:
95
.paul/phases/14-mobile-modal-fix/14-01-PLAN.md
Normal file
95
.paul/phases/14-mobile-modal-fix/14-01-PLAN.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
phase: 14-mobile-modal-fix
|
||||
plan: 01
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
|
||||
autonomous: true
|
||||
delegation: off
|
||||
---
|
||||
|
||||
<objective>
|
||||
## Goal
|
||||
Fix: modal rezerwacji nie otwiera się na mobile/tablet — przenieść overlay do document.body aby uniezależnić od ukrytych sekcji Elementor.
|
||||
|
||||
## Purpose
|
||||
Formularz rezerwacji był niefunkcjonalny na urządzeniach mobilnych i tabletach — klienci nie mogli złożyć rezerwacji z telefonu.
|
||||
|
||||
## Output
|
||||
- Modal otwiera się poprawnie na mobile i tablet
|
||||
- Brak regresji na desktop
|
||||
</objective>
|
||||
|
||||
<context>
|
||||
## Project Context
|
||||
@.paul/PROJECT.md
|
||||
|
||||
## Source Files
|
||||
@wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
|
||||
</context>
|
||||
|
||||
<acceptance_criteria>
|
||||
|
||||
## AC-1: Modal otwiera się na mobile
|
||||
```gherkin
|
||||
Given strona carei.pagedev.pl otwarta na urządzeniu mobilnym (375px)
|
||||
When użytkownik wypełni hero search form i kliknie "Złóż zapytanie o rezerwację"
|
||||
Then modal rezerwacji otwiera się na pełnym ekranie z pre-wypełnionymi danymi
|
||||
```
|
||||
|
||||
## AC-2: Brak regresji desktop
|
||||
```gherkin
|
||||
Given strona otwarta na desktopie
|
||||
When użytkownik kliknie przycisk otwarcia modala
|
||||
Then modal otwiera się jak dotychczas (centered overlay)
|
||||
```
|
||||
|
||||
</acceptance_criteria>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Przenieś overlay do document.body w initRefs()</name>
|
||||
<files>wp-content/plugins/carei-reservation/assets/js/carei-reservation.js</files>
|
||||
<action>
|
||||
W funkcji initRefs(), po querySelector overlay, dodać:
|
||||
if (overlay && overlay.parentElement !== document.body) {
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
Przyczyna: sekcja Elementor (elementor-element-a7629b1) ma klasy
|
||||
elementor-hidden-tablet elementor-hidden-mobile, co ustawia display:none
|
||||
na rodzicu. Modal position:fixed wewnątrz ukrytego rodzica ma zerowe wymiary.
|
||||
</action>
|
||||
<verify>Otworzyć stronę na mobile (375px), wypełnić formularz, kliknąć submit — modal się otwiera</verify>
|
||||
<done>AC-1, AC-2 satisfied</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<boundaries>
|
||||
## DO NOT CHANGE
|
||||
- CSS modala (carei-reservation.css)
|
||||
- Elementor widget PHP
|
||||
- Logika formularza i API
|
||||
|
||||
## SCOPE LIMITS
|
||||
- Tylko fix JS — jedna linijka appendChild
|
||||
</boundaries>
|
||||
|
||||
<verification>
|
||||
- [ ] Modal otwiera się na mobile (375px)
|
||||
- [ ] Modal otwiera się na tablet (768px)
|
||||
- [ ] Modal otwiera się na desktop (1440px)
|
||||
- [ ] Pre-fill z hero search form działa na mobile
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- Modal działa na wszystkich breakpointach
|
||||
- Brak regresji
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md`
|
||||
</output>
|
||||
108
.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md
Normal file
108
.paul/phases/14-mobile-modal-fix/14-01-SUMMARY.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
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*
|
||||
Reference in New Issue
Block a user