Jacek Pyziak
775ede52d3
Native details/summary toggle — panel zwiniety domyslnie na mobile, rozwijany kliknieciem. Desktop: zawsze otwarty, bez zmian. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
206 lines
6.8 KiB
Markdown
206 lines
6.8 KiB
Markdown
---
|
|
phase: 53-mobile-status-panel-toggle
|
|
plan: 01
|
|
type: execute
|
|
wave: 1
|
|
depends_on: []
|
|
files_modified:
|
|
- resources/views/components/order-status-panel.php
|
|
- resources/scss/app.scss
|
|
- public/assets/css/app.css
|
|
autonomous: false
|
|
---
|
|
|
|
<objective>
|
|
## Goal
|
|
Na mobile (<=768px) panel statusow na stronie listy zamowien powinien byc domyslnie zwinity i rozwijany po kliknieciu w naglowek. Na desktop bez zmian.
|
|
|
|
## Purpose
|
|
Panel statusow zajmuje duzo miejsca na ekranie mobilnym, przesuwajac liste zamowien ponizej fold. Uzytkownik musi scrollowac, zeby zobaczyc zamowienia. Zwiniecie panelu daje natychmiastowy dostep do listy.
|
|
|
|
## Output
|
|
- Panel statusow zamkniety domyslnie na mobile
|
|
- Klikniecie w naglowek "Statusy" rozwija/zwija panel
|
|
- Strzalka wskazujaca stan (rozwiniety/zwiniety)
|
|
- Na desktop panel zawsze widoczny bez zmian
|
|
</objective>
|
|
|
|
<context>
|
|
## Project Context
|
|
@.paul/PROJECT.md
|
|
@.paul/STATE.md
|
|
|
|
## Source Files
|
|
@resources/views/components/order-status-panel.php
|
|
@resources/scss/app.scss
|
|
</context>
|
|
|
|
<acceptance_criteria>
|
|
|
|
## AC-1: Panel zwiniety domyslnie na mobile
|
|
```gherkin
|
|
Given urzadzenie z szerokosc viewportu <= 768px
|
|
When strona /orders/list sie laduje
|
|
Then panel statusow jest zwiniety (widoczny tylko naglowek "Statusy")
|
|
And lista zamowien jest widoczna bez scrollowania
|
|
```
|
|
|
|
## AC-2: Rozwijanie i zwijanie panelu
|
|
```gherkin
|
|
Given panel statusow na mobile
|
|
When uzytkownik klika naglowek "Statusy"
|
|
Then panel rozwija sie pokazujac drzewko statusow
|
|
And strzalka obraca sie wskazujac stan otwarty
|
|
When uzytkownik klika ponownie
|
|
Then panel zwija sie do samego naglowka
|
|
```
|
|
|
|
## AC-3: Desktop bez zmian
|
|
```gherkin
|
|
Given urzadzenie z szerokosc viewportu > 768px
|
|
When strona /orders/list sie laduje
|
|
Then panel statusow jest zawsze widoczny (jak dotychczas)
|
|
And naglowek nie reaguje na klikniecie jako toggle
|
|
```
|
|
|
|
</acceptance_criteria>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Zamiana order-status-panel na details/summary</name>
|
|
<files>resources/views/components/order-status-panel.php</files>
|
|
<action>
|
|
Zamien strukture HTML panelu na natywny element `<details>`:
|
|
|
|
1. Zamien `<aside class="card order-statuses-side">` na `<details class="card order-statuses-side" id="js-status-panel">`
|
|
2. Zamien `<div class="order-statuses-side__title">` na `<summary class="order-statuses-side__title">`
|
|
- Dodaj SVG strzalke (chevron down, 14x14) na koncu summary: `<svg class="order-statuses-side__arrow" ...>`
|
|
- Zamknij `</summary>` zamiast `</div>`
|
|
3. Opakuj cala zawartosc grup statusow (petla foreach) w `<div class="order-statuses-side__body">`
|
|
4. Zamknij `</details>` zamiast `</aside>`
|
|
|
|
Struktura wynikowa:
|
|
```
|
|
<details class="card order-statuses-side" id="js-status-panel">
|
|
<summary class="order-statuses-side__title">
|
|
Statusy
|
|
<svg class="order-statuses-side__arrow" ...chevron-down.../>
|
|
</summary>
|
|
<div class="order-statuses-side__body">
|
|
...grupy statusow...
|
|
</div>
|
|
</details>
|
|
```
|
|
|
|
Dodaj na koncu pliku maly blok `<script>` (inline):
|
|
- Na mobile (matchMedia 768px) panel domyslnie zamkniety (brak atrybutu open)
|
|
- Na desktop: dodaj atrybut `open` i zablokuj zamykanie (preventDefault na summary click)
|
|
- Listener na matchMedia change: reset stanu przy resize
|
|
|
|
Unikaj: zewnetrznych plikow JS, jQuery
|
|
</action>
|
|
<verify>Otworz /orders/list — panel renderuje sie jako details/summary z poprawna struktura HTML</verify>
|
|
<done>AC-1, AC-2, AC-3 satisfied (struktura HTML)</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: SCSS dla toggle panelu statusow</name>
|
|
<files>resources/scss/app.scss</files>
|
|
<action>
|
|
1. Dodaj style do istniejacego bloku `.order-statuses-side`:
|
|
|
|
`.order-statuses-side__title` (jako summary):
|
|
- cursor: pointer na mobile
|
|
- display: flex, align-items: center, justify-content: space-between
|
|
- list-style: none (usun domyslny marker details)
|
|
- &::-webkit-details-marker { display: none }
|
|
|
|
`.order-statuses-side__arrow`:
|
|
- width: 14px, height: 14px
|
|
- transition: transform 0.2s ease
|
|
- opacity: 0.5
|
|
- Ukryj na desktop (display: none)
|
|
- Pokaz na mobile (display: block w media query)
|
|
|
|
`details[open] .order-statuses-side__arrow`:
|
|
- transform: rotate(180deg)
|
|
|
|
`.order-statuses-side__body`:
|
|
- Brak dodatkowych stylow (flow domyslny)
|
|
|
|
2. W media query `@media (max-width: 768px)`:
|
|
Dodaj:
|
|
```scss
|
|
.order-statuses-side__arrow {
|
|
display: block;
|
|
}
|
|
```
|
|
|
|
Unikaj: zmian w istniejacych stylach desktop panelu
|
|
</action>
|
|
<verify>Na mobile strzalka widoczna, na desktop ukryta. Klikniecie toggle'uje panel.</verify>
|
|
<done>AC-1, AC-2, AC-3 satisfied (style)</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 3: Build CSS</name>
|
|
<files>public/assets/css/app.css</files>
|
|
<action>
|
|
Skompiluj SCSS do CSS: npx sass resources/scss/app.scss public/assets/css/app.css --no-source-map
|
|
</action>
|
|
<verify>Nowe klasy (order-statuses-side__arrow, order-statuses-side__body) obecne w wynikowym CSS</verify>
|
|
<done>Plik CSS aktualny</done>
|
|
</task>
|
|
|
|
<task type="checkpoint:human-verify" gate="blocking">
|
|
<what-built>Rozwijany/zwijany panel statusow na mobile</what-built>
|
|
<how-to-verify>
|
|
1. Otworz https://orderpro.projectpro.pl/orders/list (lub lokalnie)
|
|
2. Wlacz DevTools > Device Toolbar > 375px
|
|
3. Sprawdz: panel statusow zwiniety, widoczny tylko naglowek "Statusy" ze strzalka
|
|
4. Kliknij "Statusy" — panel rozwija sie, strzalka obraca sie
|
|
5. Kliknij ponownie — panel zwija sie
|
|
6. Przelacz na desktop (> 768px) — panel zawsze widoczny, bez strzalki
|
|
</how-to-verify>
|
|
<resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<boundaries>
|
|
|
|
## DO NOT CHANGE
|
|
- resources/views/orders/list.php (widok glowny nie wymaga zmian)
|
|
- resources/views/layouts/app.php (menu mobilne juz gotowe)
|
|
- Logika PHP generowania statusPanel (kontroler/repozytorium)
|
|
- Inne komponenty uzytkujace order-status-panel (sprawdzic czy jest reuse)
|
|
|
|
## SCOPE LIMITS
|
|
- Tylko panel statusow na mobile — zadne inne elementy listy zamowien
|
|
- Nie zmieniaj wygladu poszczegolnych statusow (kolory, badge, hover)
|
|
- Nie dodawaj nowych zaleznosci JS
|
|
|
|
</boundaries>
|
|
|
|
<verification>
|
|
Before declaring plan complete:
|
|
- [ ] Panel zwiniety domyslnie na mobile
|
|
- [ ] Klik na naglowek rozwija/zwija panel
|
|
- [ ] Strzalka obraca sie przy toggle
|
|
- [ ] Desktop: panel zawsze widoczny, strzalka ukryta
|
|
- [ ] Brak bledow JS w konsoli
|
|
- [ ] Inne strony uzywajace panelu statusow dzialaja poprawnie
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Wszystkie 3 acceptance criteria spelnione
|
|
- Panel nie zajmuje miejsca na mobile gdy zwiniety
|
|
- Plynna animacja strzalki (CSS transition)
|
|
- Zero regresji na desktop
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.paul/phases/53-mobile-status-panel-toggle/53-01-SUMMARY.md`
|
|
</output>
|