Project-Pro/orderPRO
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Jacek Pyziak
2026-03-29 23:40:25 +02:00
parent 775ede52d3
commit 4b38f3e7a6
6 changed files with 279 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/views/orders/show.php
View File

@@ -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'; ?>