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>
72 lines
2.6 KiB
PHP
72 lines
2.6 KiB
PHP
<?php
|
|
$panelItems = is_array($statusPanelList ?? null) ? $statusPanelList : [];
|
|
$panelTitle = trim((string) ($statusPanelTitle ?? 'Statusy'));
|
|
?>
|
|
|
|
<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 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>
|
|
|