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

feat(53-mobile-status-panel-toggle): zwijany panel statusow na mobile

Browse Source 
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>
This commit is contained in:
Jacek Pyziak
2026-03-29 23:32:07 +02:00
parent 1c87489824
commit 775ede52d3
8 changed files with 433 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
resources/views/components/order-status-panel.php
View File

@@ -3,34 +3,69 @@ $panelItems = is_array($statusPanelList ?? null) ? $statusPanelList : [];
$panelTitle = trim((string) ($statusPanelTitle ?? 'Statusy'));
?>
<aside class="card order-statuses-side">
<div class="order-statuses-side__title"><?= $e($panelTitle) ?></div>
<?php foreach ($panelItems as $group): ?>
<?php $groupItems = is_array($group['items'] ?? null) ? $group['items'] : []; ?>
<div class="order-status-group">
<?php if ((string) ($group['name'] ?? '') !== ''): ?>
<div class="order-status-group__name"><?= $e((string) ($group['name'] ?? '')) ?></div>
<?php endif; ?>
<?php foreach ($groupItems as $item): ?>
<?php
$tone = (string) ($item['tone'] ?? 'neutral');
$color = (string) ($item['color_hex'] ?? '#64748b');
$rowClass = 'order-status-row tone-' . $tone . (!empty($item['is_active']) ? ' is-active' : '');
$url = trim((string) ($item['url'] ?? ''));
?>
<?php if ($url !== ''): ?>
<a href="<?= $e($url) ?>" class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
<span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
<span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
</a>
<?php else: ?>
<div class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
<span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
<span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
</div>
<details class="card order-statuses-side" id="js-status-panel">
<summary class="order-statuses-side__title">
<?= $e($panelTitle) ?>
<svg class="order-statuses-side__arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<div class="order-statuses-side__body">
<?php foreach ($panelItems as $group): ?>
<?php $groupItems = is_array($group['items'] ?? null) ? $group['items'] : []; ?>
<div class="order-status-group">
<?php if ((string) ($group['name'] ?? '') !== ''): ?>
<div class="order-status-group__name"><?= $e((string) ($group['name'] ?? '')) ?></div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</aside>
<?php foreach ($groupItems as $item): ?>
<?php
$tone = (string) ($item['tone'] ?? 'neutral');
$color = (string) ($item['color_hex'] ?? '#64748b');
$rowClass = 'order-status-row tone-' . $tone . (!empty($item['is_active']) ? ' is-active' : '');
$url = trim((string) ($item['url'] ?? ''));
?>
<?php if ($url !== ''): ?>
<a href="<?= $e($url) ?>" class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
<span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
<span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
</a>
<?php else: ?>
<div class="<?= $e($rowClass) ?>" style="--status-color: <?= $e($color) ?>;">
<span class="order-status-row__label"><?= $e((string) ($item['label'] ?? '')) ?></span>
<span class="order-status-row__count"><?= $e((string) ((int) ($item['count'] ?? 0))) ?></span>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</details>
<script>
(function () {
var panel = document.getElementById('js-status-panel');
if (!panel) return;
var mq = window.matchMedia('(max-width: 768px)');
function applyMode(mobile) {
if (mobile) {
panel.removeAttribute('open');
} else {
panel.setAttribute('open', '');
}
}
applyMode(mq.matches);
panel.querySelector('summary').addEventListener('click', function (e) {
if (!mq.matches) {
e.preventDefault();
}
});
mq.addEventListener('change', function (e) {
applyMode(e.matches);
});
})();
</script>