From 775ede52d389412e822887f337f12908d83a0cdb Mon Sep 17 00:00:00 2001 From: Jacek Pyziak Date: Sun, 29 Mar 2026 23:32:07 +0200 Subject: [PATCH] feat(53-mobile-status-panel-toggle): zwijany panel statusow na mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .paul/PROJECT.md | 1 + .paul/ROADMAP.md | 1 + .paul/STATE.md | 18 +- .../53-01-PLAN.md | 205 ++++++++++++++++++ .../53-01-SUMMARY.md | 100 +++++++++ public/assets/css/app.css | 22 ++ resources/scss/app.scss | 31 +++ .../views/components/order-status-panel.php | 93 +++++--- 8 files changed, 433 insertions(+), 38 deletions(-) create mode 100644 .paul/phases/53-mobile-status-panel-toggle/53-01-PLAN.md create mode 100644 .paul/phases/53-mobile-status-panel-toggle/53-01-SUMMARY.md diff --git a/.paul/PROJECT.md b/.paul/PROJECT.md index 956fa0b..3e2aa43 100644 --- a/.paul/PROJECT.md +++ b/.paul/PROJECT.md @@ -61,6 +61,7 @@ Sprzedawca moĹĽe obsĹ‚ugiwać zamĂłwienia ze wszystkich kanaĹ‚Ăłw - [x] Allegro: automatyczne przekazywanie numeru przesylki do checkout form po utworzeniu paczki (tylko source=allegro) - Phase 50 - [x] Email HTML Layout: header/footer HTML per skrzynka pocztowa, dual-mode edytor (Quill + HTML source), kompozycja header+body+footer, podglad — Phase 51 - [x] Mobile Main Menu: hamburger, slide-in overlay sidebar, backdrop na mobile <=768px — Phase 52 +- [x] Mobile Status Panel Toggle: zwijany/rozwijany panel statusow na /orders/list — Phase 53 ### Active (In Progress) diff --git a/.paul/ROADMAP.md b/.paul/ROADMAP.md index c7bd7c9..2e7023f 100644 --- a/.paul/ROADMAP.md +++ b/.paul/ROADMAP.md @@ -13,6 +13,7 @@ Wersja mobilna aplikacji, modul po module. Cel: pelna uzywalnosc orderPRO na tel | Phase | Name | Plans | Status | |-------|------|-------|--------| | 52 | Mobile Main Menu | 1/1 | Complete | +| 53 | Mobile Status Panel Toggle | 1/1 | Complete | | TBD | Mobile Orders List | - | Not started | | TBD | Mobile Order Details | - | Not started | | TBD | Mobile Settings | - | Not started | diff --git a/.paul/STATE.md b/.paul/STATE.md index e56d15a..3e8a8ec 100644 --- a/.paul/STATE.md +++ b/.paul/STATE.md @@ -10,14 +10,14 @@ See: .paul/PROJECT.md (updated 2026-03-28) ## Current Position Milestone: v3.0 Mobile Responsive — In progress -Phase: 1 of N (52 - Mobile Main Menu) — Complete -Plan: 52-01 complete -Status: Loop complete — phase 52 done, ready for next PLAN -Last activity: 2026-03-29 — UNIFY closed for 52-01 +Phase: 2 of N (53 - Mobile Status Panel Toggle) — Complete +Plan: 53-01 complete +Status: Loop complete — phase 53 done, ready for next PLAN +Last activity: 2026-03-29 — UNIFY closed for 53-01 Progress: -- Milestone: [#░░░░░░░░░] ~10% -- Phase 52: [##########] 100% +- Milestone: [##░░░░░░░░] ~20% +- Phase 53: [##########] 100% ## Loop Position @@ -30,9 +30,9 @@ PLAN ──▶ APPLY ──▶ UNIFY ## Session Continuity Last session: 2026-03-29 -Stopped at: Phase 52 complete -Next action: /paul:plan dla kolejnego modulu mobilnego (np. lista zamowien) -Resume file: .paul/phases/52-mobile-main-menu/52-01-SUMMARY.md +Stopped at: Phase 53 complete +Next action: /paul:plan dla kolejnego modulu mobilnego +Resume file: .paul/phases/53-mobile-status-panel-toggle/53-01-SUMMARY.md ## Accumulated Context diff --git a/.paul/phases/53-mobile-status-panel-toggle/53-01-PLAN.md b/.paul/phases/53-mobile-status-panel-toggle/53-01-PLAN.md new file mode 100644 index 0000000..d2ed83a --- /dev/null +++ b/.paul/phases/53-mobile-status-panel-toggle/53-01-PLAN.md @@ -0,0 +1,205 @@ +--- +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 +--- + + +## 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 + + + +## Project Context +@.paul/PROJECT.md +@.paul/STATE.md + +## Source Files +@resources/views/components/order-status-panel.php +@resources/scss/app.scss + + + + +## 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 +``` + + + + + + + Task 1: Zamiana order-status-panel na details/summary + resources/views/components/order-status-panel.php + + Zamien strukture HTML panelu na natywny element `
`: + + 1. Zamien `` + + Struktura wynikowa: + ``` +
+ + Statusy + + +
+ ...grupy statusow... +
+
+ ``` + + Dodaj na koncu pliku maly blok `