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>
96 lines
2.6 KiB
Markdown
96 lines
2.6 KiB
Markdown
---
|
|
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>
|