Rebuild menu admin item/category rows on CSS Grid, refine actions UI
- Replace the <table>-based item and category-header rows with CSS Grid containers using named grid-template-areas, so desktop and mobile each get their own independent arrangement of the same fields instead of mobile being a display:block hack forced onto table markup - Make the status badge itself the availability toggle (no separate "Mark Sold Out" button), fixed-width so toggling never shifts the Status column, and shorten its label to "Sold Out" - Merge the item Tag into the name line as an inline badge instead of giving it its own column - Group the move/edit/delete controls into two stacked button columns (was 4-5 buttons wide) and right-align them on mobile Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
David DyerandClaude Sonnet 5 committed
1 parent
40f4c102b4
commit
fd928a24cf
3 files changed
+329
-156
No files matched your search
+61
-70
@@ -60,9 +60,8 @@ function handle_toggle_item(array $post): array
|
||||
return [
|
||||
'success' => true,
|
||||
'is_available' => (bool) $item['is_available'],
|
||||
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
|
||||
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out',
|
||||
'status_class' => $item['is_available'] ? 'active' : 'inactive',
|
||||
'btn_text' => $item['is_available'] ? 'Mark Sold Out' : 'Mark Available',
|
||||
];
|
||||
}
|
||||
|
||||
@@ -228,88 +227,80 @@ $menuGrouped = get_full_menu(false);
|
||||
<?php foreach ($menuGrouped as $catIndex => $category): ?>
|
||||
<div class="panel category-panel" id="cat-panel-<?= (int) $category['id'] ?>" data-cat-id="<?= (int) $category['id'] ?>" data-sort-order="<?= (int) $category['sort_order'] ?>">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<h2 class="cat-name-heading">
|
||||
<span><?= htmlspecialchars($category['name']) ?></span>
|
||||
</h2>
|
||||
<p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
|
||||
</div>
|
||||
<h2 class="cat-name-heading">
|
||||
<span><?= htmlspecialchars($category['name']) ?></span>
|
||||
</h2>
|
||||
<p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
|
||||
<div class="admin-table-actions">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category up" <?= $catIndex === 0 ? 'disabled' : '' ?>>↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category down" <?= $catIndex === $catCount - 1 ? 'disabled' : '' ?>>↓</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-cat"
|
||||
data-id="<?= (int) $category['id'] ?>"
|
||||
data-name="<?= htmlspecialchars($category['name']) ?>"
|
||||
data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>">
|
||||
Edit Category
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int) $category['id'] ?>">
|
||||
Delete Category
|
||||
</button>
|
||||
<div class="action-stack">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category up" <?= $catIndex === 0 ? 'disabled' : '' ?>>↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="<?= (int) $category['id'] ?>" aria-label="Move <?= htmlspecialchars($category['name']) ?> category down" <?= $catIndex === $catCount - 1 ? 'disabled' : '' ?>>↓</button>
|
||||
</div>
|
||||
<div class="action-stack">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-cat"
|
||||
data-id="<?= (int) $category['id'] ?>"
|
||||
data-name="<?= htmlspecialchars($category['name']) ?>"
|
||||
data-desc="<?= htmlspecialchars($category['description'] ?? '') ?>">
|
||||
Edit Category
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int) $category['id'] ?>">
|
||||
Delete Category
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table class="admin-table" id="cat-table-<?= (int) $category['id'] ?>">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Item</th>
|
||||
<th>Price</th>
|
||||
<th>Tag</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="items-tbody">
|
||||
<?php if (empty($category['items'])): ?>
|
||||
<tr class="no-items-row">
|
||||
<td colspan="5" class="muted">No items in this category yet.</td>
|
||||
</tr>
|
||||
<?php else: ?>
|
||||
<?php $itemCount = count($category['items']); ?>
|
||||
<?php foreach ($category['items'] as $itemIndex => $item): ?>
|
||||
<tr id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
|
||||
<td data-label="Status">
|
||||
<?php if ($item['is_available']): ?>
|
||||
<span class="status-badge active">● Available</span>
|
||||
<?php else: ?>
|
||||
<span class="status-badge inactive">○ Sold Out / Hidden</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td data-label="Item">
|
||||
<div class="item-grid-wrap">
|
||||
<div class="item-grid-head" aria-hidden="true">
|
||||
<span class="col-status">Status</span>
|
||||
<span class="col-item">Item</span>
|
||||
<span class="col-price">Price</span>
|
||||
<span class="col-actions">Actions</span>
|
||||
</div>
|
||||
<div class="item-rows" id="item-rows-<?= (int) $category['id'] ?>">
|
||||
<?php if (empty($category['items'])): ?>
|
||||
<p class="muted item-grid-empty">No items in this category yet.</p>
|
||||
<?php else: ?>
|
||||
<?php $itemCount = count($category['items']); ?>
|
||||
<?php foreach ($category['items'] as $itemIndex => $item): ?>
|
||||
<div class="item-row" id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
|
||||
<div data-label="Status">
|
||||
<button type="button" class="status-badge btn-toggle-item <?= $item['is_available'] ? 'active' : 'inactive' ?>" data-id="<?= (int) $item['id'] ?>" title="Click to mark as <?= $item['is_available'] ? 'sold out' : 'available' ?>">
|
||||
<?= $item['is_available'] ? '● Available' : '○ Sold Out' ?>
|
||||
</button>
|
||||
</div>
|
||||
<div data-label="Item">
|
||||
<span class="item-name-row">
|
||||
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
|
||||
<div class="muted item-desc-cell">
|
||||
<?= htmlspecialchars($item['description'] ?? '') ?>
|
||||
</div>
|
||||
</td>
|
||||
<td class="font-mono item-price-cell" data-label="Price">
|
||||
<?= htmlspecialchars($item['price']) ?>
|
||||
</td>
|
||||
<td class="item-badge-cell" data-label="Tag">
|
||||
<?php if (!empty($item['badge'])): ?>
|
||||
<span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<?php else: ?>
|
||||
<span class="muted">—</span>
|
||||
<span class="menu-item-badge"><?= htmlspecialchars($item['badge']) ?></span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td data-label="Actions">
|
||||
<div class="admin-table-actions">
|
||||
</span>
|
||||
<div class="muted item-desc-cell">
|
||||
<?= htmlspecialchars($item['description'] ?? '') ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-mono item-price-cell" data-label="Price">
|
||||
<?= htmlspecialchars($item['price']) ?>
|
||||
</div>
|
||||
<div data-label="Actions">
|
||||
<div class="admin-table-actions">
|
||||
<div class="action-stack">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move <?= htmlspecialchars($item['name']) ?> up" <?= $itemIndex === 0 ? 'disabled' : '' ?>>↑</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move <?= htmlspecialchars($item['name']) ?> down" <?= $itemIndex === $itemCount - 1 ? 'disabled' : '' ?>>↓</button>
|
||||
</div>
|
||||
<div class="action-stack">
|
||||
<button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
|
||||
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="<?= (int) $item['id'] ?>">
|
||||
<?= $item['is_available'] ? 'Mark Sold Out' : 'Mark Available' ?>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="<?= (int) $item['id'] ?>">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
Reference in new issue
Block a user