david/theoldfitz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild menu admin item/category rows on CSS Grid, refine actions UI

Browse Source 
- 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 2026-08-31 22:54:11 -04:00
1 parent 40f4c102b4
commit fd928a24cf
3 files changed
+292 -119
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/menu.js
+68 -69
View File
@@ -147,7 +147,7 @@ document.getElementById('categories-container').addEventListener('click', async
// Edit Item // Edit Item
if (target.classList.contains('btn-edit-item')) { if (target.classList.contains('btn-edit-item')) {
const row = target.closest('tr'); const row = target.closest('.item-row');
openItemModal(JSON.parse(row.dataset.item)); openItemModal(JSON.parse(row.dataset.item));
return; return;
} }
@@ -165,8 +165,8 @@ document.getElementById('categories-container').addEventListener('click', async
// Move Item Up/Down // Move Item Up/Down
if (target.classList.contains('btn-move-item')) { if (target.classList.contains('btn-move-item')) {
const direction = target.dataset.direction; const direction = target.dataset.direction;
const row = target.closest('tr'); const row = target.closest('.item-row');
const tbody = row.parentElement; const rowsContainer = row.parentElement;
const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling; const sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
if (!sibling) return; // already at this edge; button should be disabled anyway if (!sibling) return; // already at this edge; button should be disabled anyway
@@ -185,14 +185,14 @@ document.getElementById('categories-container').addEventListener('click', async
return; return;
} }
if (direction === 'up') { if (direction === 'up') {
tbody.insertBefore(row, sibling); rowsContainer.insertBefore(row, sibling);
} else { } else {
tbody.insertBefore(sibling, row); rowsContainer.insertBefore(sibling, row);
} }
// Re-derives disabled state from DOM position rather than re-enabling // Re-derives disabled state from DOM position rather than re-enabling
// `target` unconditionally, since the swap may have just moved it // `target` unconditionally, since the swap may have just moved it
// onto an edge (e.g. into the first/last slot) where it should stay disabled. // onto an edge (e.g. into the first/last slot) where it should stay disabled.
refreshMoveButtonStates(tbody); refreshMoveButtonStates(rowsContainer);
} catch { } catch {
alert('Network error. Please try again.'); alert('Network error. Please try again.');
target.disabled = false; target.disabled = false;
@@ -235,10 +235,10 @@ document.getElementById('categories-container').addEventListener('click', async
return; return;
} }
// Toggle Availability (Mark Sold Out / Mark Available) // Toggle Availability — the status badge itself is the button now, so
// `target` IS the badge; no separate "Mark Sold Out" control to sync.
if (target.classList.contains('btn-toggle-item')) { if (target.classList.contains('btn-toggle-item')) {
const row = target.closest('tr'); const row = target.closest('.item-row');
const statusBadge = row.querySelector('.status-badge');
target.disabled = true; target.disabled = true;
const fd = new FormData(); const fd = new FormData();
@@ -249,9 +249,9 @@ document.getElementById('categories-container').addEventListener('click', async
try { try {
const data = await postForm(fd); const data = await postForm(fd);
if (data.success) { if (data.success) {
statusBadge.className = `status-badge ${data.status_class}`; target.className = `status-badge btn-toggle-item ${data.status_class}`;
statusBadge.textContent = data.status_badge; target.textContent = data.status_badge;
target.textContent = data.btn_text; target.title = `Click to mark as ${data.is_available ? 'sold out' : 'available'}`;
const currentData = JSON.parse(row.dataset.item); const currentData = JSON.parse(row.dataset.item);
currentData.is_available = data.is_available ? 1 : 0; currentData.is_available = data.is_available ? 1 : 0;
@@ -268,8 +268,8 @@ document.getElementById('categories-container').addEventListener('click', async
// Delete Item // Delete Item
if (target.classList.contains('btn-delete-item')) { if (target.classList.contains('btn-delete-item')) {
if (!confirm('Are you sure you want to delete this menu item?')) return; if (!confirm('Are you sure you want to delete this menu item?')) return;
const row = target.closest('tr'); const row = target.closest('.item-row');
const tbody = row?.parentElement; const rowsContainer = row?.parentElement;
const fd = new FormData(); const fd = new FormData();
fd.append('action', 'delete_item'); fd.append('action', 'delete_item');
@@ -284,7 +284,7 @@ document.getElementById('categories-container').addEventListener('click', async
row.style.transform = 'translateX(-10px)'; row.style.transform = 'translateX(-10px)';
setTimeout(() => { setTimeout(() => {
row.remove(); row.remove();
refreshMoveButtonStates(tbody); refreshMoveButtonStates(rowsContainer);
}, 200); }, 200);
} }
} catch { } catch {
@@ -323,10 +323,10 @@ document.getElementById('categories-container').addEventListener('click', async
// Sets the up/down move buttons' disabled state from each row's actual DOM // Sets the up/down move buttons' disabled state from each row's actual DOM
// position, rather than tracking indices by hand — first row can't move up, // position, rather than tracking indices by hand — first row can't move up,
// last can't move down, everything in between can do either. Call this // last can't move down, everything in between can do either. Call this
// after any insert/remove/reorder in a category's tbody. // after any insert/remove/reorder in a category's item-rows container.
function refreshMoveButtonStates(tbody) { function refreshMoveButtonStates(rowsContainer) {
if (!tbody) return; if (!rowsContainer) return;
const rows = [...tbody.querySelectorAll('tr[data-item-id]')]; const rows = [...rowsContainer.querySelectorAll('.item-row[data-item-id]')];
rows.forEach((row, index) => { rows.forEach((row, index) => {
const upBtn = row.querySelector('.btn-move-item[data-direction="up"]'); const upBtn = row.querySelector('.btn-move-item[data-direction="up"]');
const downBtn = row.querySelector('.btn-move-item[data-direction="down"]'); const downBtn = row.querySelector('.btn-move-item[data-direction="down"]');
@@ -347,18 +347,21 @@ function refreshCategoryMoveButtonStates() {
} }
function itemRowHtml(item, isAvail) { function itemRowHtml(item, isAvail) {
const badgeHtml = item.badge ? `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>` : '';
return ` return `
<td data-label="Status"><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td> <div data-label="Status"><button type="button" class="status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}" data-id="${item.id}" title="Click to mark as ${isAvail ? 'sold out' : 'available'}">${isAvail ? '● Available' : '○ Sold Out'}</button></div>
<td data-label="Item"><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td> <div data-label="Item"><span class="item-name-row"><strong class="item-name-cell">${escapeHtml(item.name)}</strong>${badgeHtml}</span><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></div>
<td class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</td> <div class="font-mono item-price-cell" data-label="Price">${escapeHtml(item.price)}</div>
<td class="item-badge-cell" data-label="Tag">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td> <div data-label="Actions"><div class="admin-table-actions">
<td 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 ${escapeHtml(item.name)} up">↑</button> <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="up" aria-label="Move ${escapeHtml(item.name)} up">↑</button>
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</button> <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-item" data-direction="down" aria-label="Move ${escapeHtml(item.name)} down">↓</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-edit-item">Edit</button>
<button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Mark Sold Out' : 'Mark Available'}</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button> <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
</div></td> </div>
</div></div>
`; `;
} }
@@ -367,15 +370,15 @@ function updateOrInsertItemRow(item, isNew) {
let existingRow = document.getElementById(`item-row-${item.id}`); let existingRow = document.getElementById(`item-row-${item.id}`);
// An edit can reassign an item to a different category — when that // An edit can reassign an item to a different category — when that
// happens the row needs to move tables, not just update in place, so // happens the row needs to move grids, not just update in place, so
// detach it here and let it fall through to the insert path below. // detach it here and let it fall through to the insert path below.
if (existingRow && existingRow.closest('table')?.id !== `cat-table-${item.category_id}`) { if (existingRow && existingRow.closest('.item-rows')?.id !== `item-rows-${item.category_id}`) {
const oldTbody = existingRow.parentElement; const oldRowsContainer = existingRow.parentElement;
existingRow.remove(); existingRow.remove();
existingRow = null; existingRow = null;
refreshMoveButtonStates(oldTbody); refreshMoveButtonStates(oldRowsContainer);
if (oldTbody && !oldTbody.querySelector('tr[data-item-id]')) { if (oldRowsContainer && !oldRowsContainer.querySelector('.item-row[data-item-id]')) {
oldTbody.innerHTML = '<tr class="no-items-row"><td colspan="5" class="muted">No items in this category yet.</td></tr>'; oldRowsContainer.innerHTML = '<p class="muted item-grid-empty">No items in this category yet.</p>';
} }
} }
@@ -383,38 +386,39 @@ function updateOrInsertItemRow(item, isNew) {
// Update existing row // Update existing row
existingRow.dataset.item = JSON.stringify(item); existingRow.dataset.item = JSON.stringify(item);
const statusBadge = existingRow.querySelector('.status-badge'); const statusBadge = existingRow.querySelector('.status-badge');
statusBadge.className = `status-badge ${isAvail ? 'active' : 'inactive'}`; statusBadge.className = `status-badge btn-toggle-item ${isAvail ? 'active' : 'inactive'}`;
statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out / Hidden'; statusBadge.textContent = isAvail ? '● Available' : '○ Sold Out';
statusBadge.title = `Click to mark as ${isAvail ? 'sold out' : 'available'}`;
existingRow.querySelector('.item-name-cell').textContent = item.name; existingRow.querySelector('.item-name-cell').textContent = item.name;
existingRow.querySelector('.item-desc-cell').textContent = item.description || ''; existingRow.querySelector('.item-desc-cell').textContent = item.description || '';
existingRow.querySelector('.item-price-cell').textContent = item.price; existingRow.querySelector('.item-price-cell').textContent = item.price;
const badgeCell = existingRow.querySelector('.item-badge-cell'); const nameRow = existingRow.querySelector('.item-name-row');
badgeCell.innerHTML = item.badge nameRow.querySelector('.menu-item-badge')?.remove();
? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` if (item.badge) {
: '<span class="muted">—</span>'; nameRow.insertAdjacentHTML('beforeend', `<span class="menu-item-badge">${escapeHtml(item.badge)}</span>`);
}
existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Mark Sold Out' : 'Mark Available';
return; return;
} }
// Item was created or moved to this category — it always joins at the // Item was created or moved to this category — it always joins at the
// end (see next_item_sort_order() server-side), so just append it. // end (see next_item_sort_order() server-side), so just append it.
const catTable = document.getElementById(`cat-table-${item.category_id}`); const rowsContainer = document.getElementById(`item-rows-${item.category_id}`);
if (!catTable) return; if (!rowsContainer) return;
const tbody = catTable.querySelector('tbody'); rowsContainer.querySelector('.item-grid-empty')?.remove();
tbody.querySelector('.no-items-row')?.remove();
const tr = document.createElement('tr'); const row = document.createElement('div');
tr.id = `item-row-${item.id}`; row.className = 'item-row';
tr.dataset.itemId = item.id; row.id = `item-row-${item.id}`;
tr.dataset.item = JSON.stringify(item); row.dataset.itemId = item.id;
tr.innerHTML = itemRowHtml(item, isAvail); row.dataset.item = JSON.stringify(item);
row.innerHTML = itemRowHtml(item, isAvail);
tbody.appendChild(tr); rowsContainer.appendChild(row);
refreshMoveButtonStates(tbody); refreshMoveButtonStates(rowsContainer);
} }
// Static shell for a category panel. Only text-content positions use // Static shell for a category panel. Only text-content positions use
@@ -424,37 +428,32 @@ function updateOrInsertItemRow(item, isNew) {
function categoryPanelHtml(category) { function categoryPanelHtml(category) {
return ` return `
<div class="panel-head"> <div class="panel-head">
<div>
<h2 class="cat-name-heading"> <h2 class="cat-name-heading">
<span>${escapeHtml(category.name)}</span> <span>${escapeHtml(category.name)}</span>
</h2> </h2>
<p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p> <p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
</div>
<div class="admin-table-actions"> <div class="admin-table-actions">
<div class="action-stack">
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button> <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="up" data-id="${category.id}" aria-label="Move category up">↑</button>
<button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button> <button type="button" class="btn btn-outline btn-sm btn-icon btn-move-cat" data-direction="down" data-id="${category.id}" aria-label="Move category down">↓</button>
</div>
<div class="action-stack">
<button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button> <button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button> <button type="button" class="btn btn-danger btn-sm btn-delete-cat">Delete Category</button>
</div> </div>
</div> </div>
</div>
<div class="admin-table-wrap"> <div class="item-grid-wrap">
<table class="admin-table" id="cat-table-${category.id}"> <div class="item-grid-head" aria-hidden="true">
<thead> <span class="col-status">Status</span>
<tr> <span class="col-item">Item</span>
<th>Status</th> <span class="col-price">Price</span>
<th>Item</th> <span class="col-actions">Actions</span>
<th>Price</th> </div>
<th>Tag</th> <div class="item-rows" id="item-rows-${category.id}">
<th>Actions</th> <p class="muted item-grid-empty">No items in this category yet.</p>
</tr> </div>
</thead>
<tbody class="items-tbody">
<tr class="no-items-row">
<td colspan="5" class="muted">No items in this category yet.</td>
</tr>
</tbody>
</table>
</div> </div>
`; `;
} }
admin/menu.php
+37 -46
View File
@@ -60,9 +60,8 @@ function handle_toggle_item(array $post): array
return [ return [
'success' => true, 'success' => true,
'is_available' => (bool) $item['is_available'], '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', 'status_class' => $item['is_available'] ? 'active' : 'inactive',
'btn_text' => $item['is_available'] ? 'Mark Sold Out' : 'Mark Available',
]; ];
} }
@@ -228,15 +227,16 @@ $menuGrouped = get_full_menu(false);
<?php foreach ($menuGrouped as $catIndex => $category): ?> <?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 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 class="panel-head">
<div>
<h2 class="cat-name-heading"> <h2 class="cat-name-heading">
<span><?= htmlspecialchars($category['name']) ?></span> <span><?= htmlspecialchars($category['name']) ?></span>
</h2> </h2>
<p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p> <p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
</div>
<div class="admin-table-actions"> <div class="admin-table-actions">
<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="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-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" <button type="button" class="btn btn-outline btn-sm btn-edit-cat"
data-id="<?= (int) $category['id'] ?>" data-id="<?= (int) $category['id'] ?>"
data-name="<?= htmlspecialchars($category['name']) ?>" data-name="<?= htmlspecialchars($category['name']) ?>"
@@ -248,68 +248,59 @@ $menuGrouped = get_full_menu(false);
</button> </button>
</div> </div>
</div> </div>
</div>
<div class="admin-table-wrap"> <div class="item-grid-wrap">
<table class="admin-table" id="cat-table-<?= (int) $category['id'] ?>"> <div class="item-grid-head" aria-hidden="true">
<thead> <span class="col-status">Status</span>
<tr> <span class="col-item">Item</span>
<th>Status</th> <span class="col-price">Price</span>
<th>Item</th> <span class="col-actions">Actions</span>
<th>Price</th> </div>
<th>Tag</th> <div class="item-rows" id="item-rows-<?= (int) $category['id'] ?>">
<th>Actions</th>
</tr>
</thead>
<tbody class="items-tbody">
<?php if (empty($category['items'])): ?> <?php if (empty($category['items'])): ?>
<tr class="no-items-row"> <p class="muted item-grid-empty">No items in this category yet.</p>
<td colspan="5" class="muted">No items in this category yet.</td>
</tr>
<?php else: ?> <?php else: ?>
<?php $itemCount = count($category['items']); ?> <?php $itemCount = count($category['items']); ?>
<?php foreach ($category['items'] as $itemIndex => $item): ?> <?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') ?>'> <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') ?>'>
<td data-label="Status"> <div data-label="Status">
<?php if ($item['is_available']): ?> <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' ?>">
<span class="status-badge active">● Available</span> <?= $item['is_available'] ? '● Available' : '○ Sold Out' ?>
<?php else: ?> </button>
<span class="status-badge inactive">○ Sold Out / Hidden</span> </div>
<?php endif; ?> <div data-label="Item">
</td> <span class="item-name-row">
<td data-label="Item">
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong> <strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
<?php if (!empty($item['badge'])): ?>
<span class="menu-item-badge"><?= htmlspecialchars($item['badge']) ?></span>
<?php endif; ?>
</span>
<div class="muted item-desc-cell"> <div class="muted item-desc-cell">
<?= htmlspecialchars($item['description'] ?? '') ?> <?= htmlspecialchars($item['description'] ?? '') ?>
</div> </div>
</td> </div>
<td class="font-mono item-price-cell" data-label="Price"> <div class="font-mono item-price-cell" data-label="Price">
<?= htmlspecialchars($item['price']) ?> <?= htmlspecialchars($item['price']) ?>
</td> </div>
<td class="item-badge-cell" data-label="Tag"> <div data-label="Actions">
<?php if (!empty($item['badge'])): ?>
<span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
<?php else: ?>
<span class="muted">—</span>
<?php endif; ?>
</td>
<td data-label="Actions">
<div class="admin-table-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="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> <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-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'] ?>"> <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="<?= (int) $item['id'] ?>">
Delete Delete
</button> </button>
</div> </div>
</td> </div>
</tr> </div>
</div>
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
</tbody> </div>
</table>
</div> </div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
styles.css
+187 -4
View File
@@ -1320,6 +1320,32 @@
color: var(--ink-muted); color: var(--ink-muted);
} }
/* The menu admin's status badge doubles as its own availability toggle
(see .btn-toggle-item) — a plain <button> would otherwise pick up the
browser's default chrome underneath the badge's own background/border.
Scoped to the element type so the read-only status badges elsewhere
(e.g. the announcements table) aren't affected. */
/* Fixed to fit its longest possible label ("● Available", ~6.7rem
measured) so toggling doesn't change the badge's — and therefore the
Status column's — width and shove every other column sideways. */
button.status-badge {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
justify-content: center;
width: 7rem;
transition: opacity .15s ease;
}
button.status-badge:hover {
opacity: 0.8;
}
button.status-badge:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* admin table & list actions */ /* admin table & list actions */
.admin-table-wrap { .admin-table-wrap {
overflow-x: auto; overflow-x: auto;
@@ -1365,6 +1391,15 @@
white-space: nowrap; white-space: nowrap;
} }
/* Groups the item row's move (↑/↓) and edit/delete controls into two
narrow vertical stacks instead of four buttons side by side — keeps
the Actions column (and the table as a whole) from running wide. */
.action-stack {
display: inline-flex;
flex-direction: column;
gap: 0.35rem;
}
/* Below ~760px a plain <table> forces long text (item descriptions, /* Below ~760px a plain <table> forces long text (item descriptions,
headlines) into a column so narrow it wraps one word per line. Recast headlines) into a column so narrow it wraps one word per line. Recast
each row as a labeled card instead — the label comes from the td's each row as a labeled card instead — the label comes from the td's
@@ -1419,6 +1454,19 @@
flex-wrap: wrap; flex-wrap: wrap;
white-space: normal; white-space: normal;
} }
/* Right-align the action buttons instead of leaving them stranded at
the card's left edge — item rows (an inline-flex box in a
full-width block <td>, so text-align positions it) and category
headers (a flex item in .panel-head, so margin-left:auto pushes it
to the end of its line) need different techniques to get there. */
.admin-table td[data-label="Actions"] {
text-align: right;
}
.panel-head .admin-table-actions {
margin-left: auto;
}
} }
.btn-sm { .btn-sm {
@@ -1575,10 +1623,15 @@
font-weight: normal; font-weight: normal;
} }
/* admin menu table: category panel header + item cell formatting. /* admin menu grid: category panel header + item row formatting.
Shared between admin/menu.php's server render and admin/menu.js's Shared between admin/menu.php's server render and admin/menu.js's
client-side row/panel templates, so it lives here once instead of client-side row/panel templates, so it lives here once instead of
being duplicated as inline styles in both places. */ being duplicated as inline styles in both places.
This — not <table>/<tr>/<td> — is the item list's actual layout.
Desktop and mobile each get their own grid-template-areas map (see the
mobile override below), so the two can be redesigned independently
instead of one being a display:block hack forced onto the other. */
.font-mono { .font-mono {
font-family: var(--font-mono); font-family: var(--font-mono);
} }
@@ -1586,17 +1639,96 @@
/* two classes to reliably outrank .panel h2's margin-bottom above */ /* two classes to reliably outrank .panel h2's margin-bottom above */
.category-panel .cat-name-heading { .category-panel .cat-name-heading {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
grid-area: name;
} }
.cat-desc-text { .cat-desc-text {
font-size: 0.88rem; font-size: 0.88rem;
} }
.no-items-row td { .category-panel .cat-desc-text {
grid-area: desc;
}
/* Category panel-head as a grid: title on its own top row, description
and the move/edit/delete buttons sharing the row below with the
buttons pinned to the far end (matches the desktop arrangement this
replaced — see the mobile override for how that changes below 760px). */
.category-panel .panel-head {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"name actions"
"desc actions";
align-items: center;
column-gap: 0.75rem;
}
.category-panel .panel-head .admin-table-actions {
grid-area: actions;
}
/* Each category's item list: a header row of column labels (desktop
only — hidden on mobile below) plus one grid per item row, all
sharing the same column template so they line up. */
.item-grid-wrap {
margin-top: 1rem;
}
.item-grid-head,
.item-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas: "status item price actions";
column-gap: 0.75rem;
align-items: center;
}
.item-grid-head {
padding: 0 0.75rem 0.85rem;
border-bottom: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
}
.item-row {
padding: 0.85rem 0.75rem;
border-bottom: 1px solid var(--rule);
}
.item-rows .item-row:last-child {
border-bottom: none;
}
.col-status { grid-area: status; }
.col-item { grid-area: item; }
.col-price { grid-area: price; }
.col-actions { grid-area: actions; }
.item-row [data-label="Status"] { grid-area: status; }
.item-row [data-label="Item"] { grid-area: item; }
.item-row [data-label="Price"] { grid-area: price; }
.item-row [data-label="Actions"] { grid-area: actions; }
.item-grid-empty {
text-align: center; text-align: center;
padding: 1.5rem 0; padding: 1.5rem 0;
} }
/* Wraps the item name and its optional badge (reusing the public menu's
.menu-item-badge pill) so they sit on one inline-flowing line instead
of giving the badge its own column. */
.item-name-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.item-desc-cell { .item-desc-cell {
font-size: 0.82rem; font-size: 0.82rem;
margin-top: 0.2rem; margin-top: 0.2rem;
@@ -1612,8 +1744,59 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
.item-badge-cell .eyebrow { /* Menu admin grid: its own mobile arrangement, independent of the
desktop one above — this is the whole point of grid-template-areas
over the <table> hack. Same fields, different map. Placed after the
desktop rules above (rather than in the earlier shared .admin-table
mobile block) so it wins the cascade at equal specificity — a rule's
source position still matters once a media query lets both compete. */
@media (max-width: 47.5em) {
.item-grid-head {
display: none;
}
.item-row {
grid-template-columns: 1fr;
grid-template-areas:
"status"
"item"
"price"
"actions";
row-gap: 0.4rem;
border: 1px solid var(--rule);
border-radius: 0.25rem;
padding: 0.9rem 1rem;
margin-bottom: 0.85rem;
}
.item-rows .item-row:last-child {
border-bottom: none;
margin-bottom: 0;
}
.item-row [data-label]::before {
content: attr(data-label);
display: block;
font-family: var(--font-mono);
font-size: 0.68rem; font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.3rem;
}
.item-row [data-label="Actions"] {
justify-self: end;
}
.category-panel .panel-head {
grid-template-columns: 1fr;
grid-template-areas:
"name"
"desc"
"actions";
row-gap: 0.5rem;
}
} }
/* ---------- admin modal dialogs ---------- */ /* ---------- admin modal dialogs ---------- */