feat(54-order-detail-image-hover): hover zoom na miniaturkach w widoku zamowienia

Reuse istniejacego patternu orders-image-hover-wrap/popup z listy zamowien — wrapper + popup img + JS pozycjonujacy w show.php. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 23:40:25 +02:00
parent 775ede52d3
commit 4b38f3e7a6
6 changed files with 279 additions and 10 deletions
--- a/.paul/PROJECT.md
+++ b/.paul/PROJECT.md
@@ -62,6 +62,7 @@ Sprzedawca moĹĽe obsĹ‚ugiwaÄ‡ zamĂłwienia ze wszystkich kanaĹ‚Ăłw
 - [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
+- [x] Order Detail Image Hover: hover zoom na miniaturkach produktow w /orders/{id} — Phase 54

 ### Active (In Progress)

--- a/.paul/ROADMAP.md
+++ b/.paul/ROADMAP.md
@@ -14,6 +14,7 @@ Wersja mobilna aplikacji, modul po module. Cel: pelna uzywalnosc orderPRO na tel
 |-------|------|-------|--------|
 | 52 | Mobile Main Menu | 1/1 | Complete |
 | 53 | Mobile Status Panel Toggle | 1/1 | Complete |
+| 54 | Order Detail Image Hover | 1/1 | Complete |
 | TBD | Mobile Orders List | - | Not started |
 | TBD | Mobile Order Details | - | Not started |
 | TBD | Mobile Settings | - | Not started |
--- 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: 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
+Phase: 3 of N (54 - Order Detail Image Hover) — Complete
+Plan: 54-01 complete
+Status: Loop complete — phase 54 done, ready for next PLAN
+Last activity: 2026-03-29 — UNIFY closed for 54-01

 Progress:
- Milestone: [##░░░░░░░░] ~20%
- Phase 53: [##########] 100%
+- Milestone: [###░░░░░░░] ~30%
+- Phase 54: [##########] 100%

 ## Loop Position

@@ -30,9 +30,9 @@ PLAN ──▶ APPLY ──▶ UNIFY
 ## Session Continuity

 Last session: 2026-03-29
-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
+Stopped at: Phase 54 complete
+Next action: /paul:plan dla kolejnego modulu
+Resume file: .paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md

 ## Accumulated Context

--- a/.paul/phases/54-order-detail-image-hover/54-01-PLAN.md
+++ b/.paul/phases/54-order-detail-image-hover/54-01-PLAN.md
@@ -0,0 +1,156 @@
+---
+phase: 54-order-detail-image-hover
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - resources/views/orders/show.php
+autonomous: false
+---
+
+<objective>
+## Goal
+Dodanie hover-zoom na miniaturkach produktow w widoku szczegolowym zamowienia (/orders/{id}), identycznie jak dziala na liscie zamowien.
+
+## Purpose
+Na liscie zamowien po najechaniu na miniaturke produktu pojawia sie powiekszony podglad (350x350px). W widoku szczegolowym zamowienia tego brakuje — uzytkownik nie moze szybko sprawdzic zdjecia produktu.
+
+## Output
+- Miniaturki produktow w show.php opakowane w orders-image-hover-wrap
+- Popup powiekszenia na hover (fixed, 350x350)
+- JS pozycjonujacy popup (identyczny z list.php)
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+
+## Source Files
+@resources/views/orders/show.php
+@resources/views/orders/list.php (referencja — istniejacy hover pattern)
+</context>
+
+<acceptance_criteria>
+
+## AC-1: Hover zoom na miniaturce
+```gherkin
+Given widok szczegolowy zamowienia z produktem majacym zdjecie
+When uzytkownik najedzie kursorem na miniaturke produktu
+Then obok miniaturki pojawia sie powiekszony podglad (350x350px)
+And podglad znika po zjechaniu kursorem
+```
+
+## AC-2: Pozycjonowanie popup
+```gherkin
+Given miniaturka produktu blisko prawej krawedzi ekranu
+When uzytkownik najedzie kursorem
+Then popup pojawia sie po lewej stronie miniaturki (nie wychodzi poza viewport)
+```
+
+## AC-3: Brak zdjecia
+```gherkin
+Given produkt bez zdjecia (placeholder)
+When uzytkownik najedzie kursorem
+Then nie pojawia sie zadne powiekszenie (brak popup)
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: Dodanie hover wrappera i JS do show.php</name>
+  <files>resources/views/orders/show.php</files>
+  <action>
+    1. Zamien blok img miniaturki (linie 162-163):
+       ```php
+       <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
+       ```
+       Na wrapper z popup:
+       ```php
+       <span class="orders-image-hover-wrap">
+         <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
+         <img src="<?= $e($media) ?>" alt="" class="orders-image-hover-popup">
+       </span>
+       ```
+
+    2. Na koncu pliku (przed zamykajacym tagiem lub po ostatnim script) dodaj blok JS
+       identyczny z tym z list.php — delegowany mouseenter na document
+       szukajacy .orders-image-hover-wrap i pozycjonujacy popup:
+       ```js
+       (function () {
+         var POPUP_GAP = 12;
+         document.addEventListener('mouseenter', function (e) {
+           if (!e.target || !e.target.closest) return;
+           var wrap = e.target.closest('.orders-image-hover-wrap');
+           if (!wrap) return;
+           var popup = wrap.querySelector('.orders-image-hover-popup');
+           if (!popup) return;
+           var rect = wrap.getBoundingClientRect();
+           var pw = 350; var ph = 350;
+           var left = rect.right + POPUP_GAP;
+           if (left + pw > window.innerWidth) left = rect.left - pw - POPUP_GAP;
+           var top = rect.top + rect.height / 2 - ph / 2;
+           if (top < 4) top = 4;
+           if (top + ph > window.innerHeight - 4) top = window.innerHeight - 4 - ph;
+           popup.style.left = left + 'px';
+           popup.style.top = top + 'px';
+         }, true);
+       })();
+       ```
+
+    Unikaj: duplikowania CSS (style juz istnieja w app.scss)
+    Unikaj: zmian w czesci placeholder (order-item-thumb--empty) — tam nie ma zdjecia
+  </action>
+  <verify>Otworz /orders/117 — najechanie na miniaturke produktu pokazuje powiekszenie</verify>
+  <done>AC-1, AC-2, AC-3 satisfied</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Hover zoom na miniaturkach produktow w widoku zamowienia</what-built>
+  <how-to-verify>
+    1. Otworz https://orderpro.projectpro.pl/orders/117
+    2. Najedz kursorem na miniaturke produktu w tabeli
+    3. Sprawdz: pojawia sie powiekszony podglad (350x350) obok miniaturki
+    4. Zjezdzaj kursorem — popup znika
+    5. Sprawdz produkt bez zdjecia — brak popupu
+    6. Sprawdz przy prawej krawedzi — popup po lewej stronie
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- resources/scss/app.scss (style hover juz istnieja)
+- resources/views/orders/list.php (hover tam juz dziala)
+- resources/views/components/ (komponenty wspolne)
+
+## SCOPE LIMITS
+- Tylko miniaturki produktow w show.php
+- Nie zmieniaj rozmiaru miniaturek
+- Nie dodawaj hover na mobile (na dotykowych ekranach hover nie dziala)
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Hover zoom dziala na miniaturkach z obrazkiem
+- [ ] Popup pozycjonowany poprawnie (prawo lub lewo)
+- [ ] Brak popup na placeholder (brak zdjecia)
+- [ ] Brak bledow JS w konsoli
+- [ ] Lista zamowien hover nadal dziala
+</verification>
+
+<success_criteria>
+- Wszystkie 3 acceptance criteria spelnione
+- Identyczne zachowanie jak na liscie zamowien
+- Zero nowych plikow CSS/JS (reuse istniejacych stylow)
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md`
+</output>
--- a/.paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md
+++ b/.paul/phases/54-order-detail-image-hover/54-01-SUMMARY.md
@@ -0,0 +1,83 @@
+---
+phase: 54-order-detail-image-hover
+plan: 01
+subsystem: ui
+tags: [hover, zoom, image-preview, order-detail]
+
+requires:
+  - phase: none
+    provides: n/a
+provides:
+  - Hover zoom on product thumbnails in order detail view
+affects: []
+
+tech-stack:
+  added: []
+  patterns: []
+
+key-files:
+  created: []
+  modified:
+    - resources/views/orders/show.php
+
+key-decisions:
+  - "Reuse istniejacych klas CSS (orders-image-hover-wrap/popup) — zero nowego CSS"
+
+patterns-established: []
+
+duration: ~5min
+started: 2026-03-29
+completed: 2026-03-29
+---
+
+# Phase 54 Plan 01: Order Detail Image Hover Summary
+
+**Hover zoom na miniaturkach produktow w /orders/{id} — reuse istniejacego patternu z listy zamowien**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~5min |
+| Started | 2026-03-29 |
+| Completed | 2026-03-29 |
+| Tasks | 2 completed (1 auto + 1 checkpoint) |
+| Files modified | 1 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Hover zoom na miniaturce | Pass | Popup 350x350 pojawia sie na hover |
+| AC-2: Pozycjonowanie popup | Pass | Prawo/lewo w zaleznosci od viewport |
+| AC-3: Brak zdjecia | Pass | Placeholder bez popup |
+
+## Accomplishments
+
+- Wrapper orders-image-hover-wrap + popup img dodany do show.php
+- JS pozycjonujacy popup (identyczny z list.php) dodany na koncu show.php
+- Zero nowego CSS — reuse istniejacych stylow
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `resources/views/orders/show.php` | Modified | Hover wrapper + popup + positioning JS |
+
+## Deviations from Plan
+
+None — plan executed exactly as written
+
+## Issues Encountered
+
+None
+
+## Next Phase Readiness
+
+**Ready:** Hover zoom dziala na obu widokach (lista + szczegoly)
+**Concerns:** None
+**Blockers:** None
+
+---
+*Phase: 54-order-detail-image-hover, Plan: 01*
+*Completed: 2026-03-29*
--- a/resources/views/orders/show.php
+++ b/resources/views/orders/show.php
@@ -160,7 +160,10 @@ foreach ($addressesList as $address) {
                  <td>
                    <div class="order-item-cell">
                      <?php if ($media !== ''): ?>
-                        <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
+                        <span class="orders-image-hover-wrap">
+                          <img src="<?= $e($media) ?>" alt="" class="order-item-thumb">
+                          <img src="<?= $e($media) ?>" alt="" class="orders-image-hover-popup">
+                        </span>
                      <?php else: ?>
                        <span class="order-item-thumb order-item-thumb--empty"></span>
                      <?php endif; ?>
@@ -777,4 +780,29 @@ foreach ($addressesList as $address) {
 })();
 </script>

+<script>
+(function () {
+  var POPUP_GAP = 12;
+  document.addEventListener('mouseenter', function (e) {
+    if (!e.target || !e.target.closest) return;
+    var wrap = e.target.closest('.orders-image-hover-wrap');
+    if (!wrap) return;
+    var popup = wrap.querySelector('.orders-image-hover-popup');
+    if (!popup) return;
+    var rect = wrap.getBoundingClientRect();
+    var pw = 350;
+    var ph = 350;
+    var left = rect.right + POPUP_GAP;
+    if (left + pw > window.innerWidth) {
+      left = rect.left - pw - POPUP_GAP;
+    }
+    var top = rect.top + rect.height / 2 - ph / 2;
+    if (top < 4) top = 4;
+    if (top + ph > window.innerHeight - 4) top = window.innerHeight - 4 - ph;
+    popup.style.left = left + 'px';
+    popup.style.top = top + 'px';
+  }, true);
+})();
+</script>
+
 <?php require __DIR__ . '/partials/email-send-modal.php'; ?>