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

Dedupe menu admin CSS/markup, restore Mark Sold Out/Available labels

Browse Source 
CSS redundancy cleanup on the online menu management feature:

- .menu-category was a byte-for-byte duplicate of the existing .panel
  class (background/border/border-radius/padding); folds it into
  .panel's shared selector group instead, keeping only what's not
  shared (no margin-bottom, since these sit in a grid whose own gap
  already spaces them)
- Several inline style="..." attributes were hand-copied verbatim
  between admin/menu.php's PHP template and admin/menu.js's client-
  side row/panel templates (price/sort/description cell formatting,
  category heading spacing, the empty-state row). Replaced with real
  CSS classes (.item-price-cell, .item-sort-cell, .item-desc-cell,
  .cat-name-heading, .cat-desc-text, .no-items-row td) so the styling
  lives in one place instead of two
- class="font-mono" was referenced four times but never defined
  anywhere in CSS (silently doing nothing); it's now a real one-line
  utility, which also fixes two previously-dead uses of it already
  sitting in admin/index.php
- .form-actions already existed as a class with its own margin-top,
  but every usage (two new modals here, plus a pre-existing one in
  admin/index.php) redundantly re-specified layout via inline style
  with a slightly different margin-top value each time; extended the
  shared class to own the whole pattern and dropped all three inline
  overrides
- Removed a no-op `justify-content: flex-start` (the default value)
  from the new .admin-toolbar

Caught and fixed a regression from the above before it shipped:
removing the inline margin-bottom override on the category heading
exposed that .panel h2's margin-bottom (from the existing panel
styles) has higher specificity than a bare .cat-name-heading class,
so the heading would have rendered with 5x the intended spacing.
Rescoped as .category-panel .cat-name-heading to reliably win.

Also restores the "Mark Sold Out" / "Mark Available" button wording
(both directions of the toggle, in both the PHP-rendered rows and
the two JS render paths) after it had been shortened to just "Sold
Out" / "Available".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
David DyerandClaude Sonnet 5 committed 2026-08-30 22:03:22 -04:00
1 parent f1bbf59548
commit 50eeb41375
4 files changed
+182 -128
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/menu.php
+123 -113
View File
@@ -11,124 +11,131 @@ $user = get_logged_in_user();
* Safely read a trimmed string from a POST payload, guarding against
* unexpected non-string input (e.g. a spoofed `name[]=` array field).
*/
function post_str(array $data, string $key, string $default = ''): string {
$value = $data[$key] ?? $default;
return is_string($value) ? trim($value) : $default;
function post_str(array $data, string $key, string $default = ''): string
{
$value = $data[$key] ?? $default;
return is_string($value) ? trim($value) : $default;
}
function handle_save_item(array $post): array {
$categoryId = (int)($post['category_id'] ?? 0);
if (!category_exists($categoryId)) {
return ['success' => false, 'error' => 'Please choose a valid menu category.'];
}
function handle_save_item(array $post): array
{
$categoryId = (int) ($post['category_id'] ?? 0);
if (!category_exists($categoryId)) {
return ['success' => false, 'error' => 'Please choose a valid menu category.'];
}
$name = post_str($post, 'name');
$price = post_str($post, 'price');
if ($name === '' || $price === '') {
return ['success' => false, 'error' => 'Item name and price are required.'];
}
$name = post_str($post, 'name');
$price = post_str($post, 'price');
if ($name === '' || $price === '') {
return ['success' => false, 'error' => 'Item name and price are required.'];
}
$itemId = !empty($post['item_id']) ? (int)$post['item_id'] : null;
if ($itemId !== null && ($itemId <= 0 || !get_menu_item_by_id($itemId))) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
$itemId = !empty($post['item_id']) ? (int) $post['item_id'] : null;
if ($itemId !== null && ($itemId <= 0 || !get_menu_item_by_id($itemId))) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
$savedId = save_menu_item([
'category_id' => $categoryId,
'name' => $name,
'description' => post_str($post, 'description'),
'price' => $price,
'badge' => post_str($post, 'badge'),
'is_available' => isset($post['is_available']) ? 1 : 0,
'sort_order' => (int)($post['sort_order'] ?? 0),
], $itemId);
$savedId = save_menu_item([
'category_id' => $categoryId,
'name' => $name,
'description' => post_str($post, 'description'),
'price' => $price,
'badge' => post_str($post, 'badge'),
'is_available' => isset($post['is_available']) ? 1 : 0,
'sort_order' => (int) ($post['sort_order'] ?? 0),
], $itemId);
return ['success' => true, 'item' => get_menu_item_by_id($savedId), 'is_new' => $itemId === null];
return ['success' => true, 'item' => get_menu_item_by_id($savedId), 'is_new' => $itemId === null];
}
function handle_toggle_item(array $post): array {
$itemId = (int)($post['item_id'] ?? 0);
if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
function handle_toggle_item(array $post): array
{
$itemId = (int) ($post['item_id'] ?? 0);
if ($itemId <= 0 || !get_menu_item_by_id($itemId)) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
toggle_menu_item_availability($itemId);
$item = get_menu_item_by_id($itemId);
toggle_menu_item_availability($itemId);
$item = get_menu_item_by_id($itemId);
return [
'success' => true,
'is_available' => (bool)$item['is_available'],
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
'status_class' => $item['is_available'] ? 'active' : 'inactive',
'btn_text' => $item['is_available'] ? 'Sold Out' : 'Available',
];
return [
'success' => true,
'is_available' => (bool) $item['is_available'],
'status_badge' => $item['is_available'] ? '● Available' : '○ Sold Out / Hidden',
'status_class' => $item['is_available'] ? 'active' : 'inactive',
'btn_text' => $item['is_available'] ? 'Mark Sold Out' : 'Mark Available',
];
}
function handle_delete_item(array $post): array {
$itemId = (int)($post['item_id'] ?? 0);
if ($itemId <= 0) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
function handle_delete_item(array $post): array
{
$itemId = (int) ($post['item_id'] ?? 0);
if ($itemId <= 0) {
return ['success' => false, 'error' => 'Menu item not found.'];
}
delete_menu_item($itemId);
return ['success' => true];
delete_menu_item($itemId);
return ['success' => true];
}
function handle_save_category(array $post): array {
$name = post_str($post, 'name');
if ($name === '') {
return ['success' => false, 'error' => 'Category name is required.'];
}
function handle_save_category(array $post): array
{
$name = post_str($post, 'name');
if ($name === '') {
return ['success' => false, 'error' => 'Category name is required.'];
}
$catId = !empty($post['category_id']) ? (int)$post['category_id'] : null;
if ($catId !== null && ($catId <= 0 || !get_category_by_id($catId))) {
return ['success' => false, 'error' => 'Category not found.'];
}
$catId = !empty($post['category_id']) ? (int) $post['category_id'] : null;
if ($catId !== null && ($catId <= 0 || !get_category_by_id($catId))) {
return ['success' => false, 'error' => 'Category not found.'];
}
$savedId = save_category([
'name' => $name,
'description' => post_str($post, 'description'),
'sort_order' => (int)($post['sort_order'] ?? 0),
], $catId);
$savedId = save_category([
'name' => $name,
'description' => post_str($post, 'description'),
'sort_order' => (int) ($post['sort_order'] ?? 0),
], $catId);
return ['success' => true, 'category' => get_category_by_id($savedId), 'is_new' => $catId === null];
return ['success' => true, 'category' => get_category_by_id($savedId), 'is_new' => $catId === null];
}
function handle_delete_category(array $post): array {
$catId = (int)($post['category_id'] ?? 0);
if ($catId <= 0) {
return ['success' => false, 'error' => 'Category not found.'];
}
function handle_delete_category(array $post): array
{
$catId = (int) ($post['category_id'] ?? 0);
if ($catId <= 0) {
return ['success' => false, 'error' => 'Category not found.'];
}
delete_category($catId);
return ['success' => true];
delete_category($catId);
return ['success' => true];
}
function handle_menu_action(string $action, array $post): array {
return match ($action) {
'save_item' => handle_save_item($post),
'toggle_item' => handle_toggle_item($post),
'delete_item' => handle_delete_item($post),
'save_category' => handle_save_category($post),
'delete_category' => handle_delete_category($post),
default => ['success' => false, 'error' => 'Unknown action'],
};
function handle_menu_action(string $action, array $post): array
{
return match ($action) {
'save_item' => handle_save_item($post),
'toggle_item' => handle_toggle_item($post),
'delete_item' => handle_delete_item($post),
'save_category' => handle_save_category($post),
'delete_category' => handle_delete_category($post),
default => ['success' => false, 'error' => 'Unknown action'],
};
}
// Handle AJAX actions (JSON response)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
header('Content-Type: application/json; charset=utf-8');
header('Content-Type: application/json; charset=utf-8');
$csrfToken = $_POST['csrf_token'] ?? null;
if (!verify_csrf_token(is_string($csrfToken) ? $csrfToken : null)) {
http_response_code(403);
echo json_encode(['success' => false, 'error' => 'Session expired or invalid security token. Please refresh.']);
exit;
}
$action = is_string($_POST['action'] ?? null) ? $_POST['action'] : '';
echo json_encode(handle_menu_action($action, $_POST));
$csrfToken = $_POST['csrf_token'] ?? null;
if (!verify_csrf_token(is_string($csrfToken) ? $csrfToken : null)) {
http_response_code(403);
echo json_encode(['success' => false, 'error' => 'Session expired or invalid security token. Please refresh.']);
exit;
}
$action = is_string($_POST['action'] ?? null) ? $_POST['action'] : '';
echo json_encode(handle_menu_action($action, $_POST));
exit;
}
$categories = get_all_categories();
@@ -136,6 +143,7 @@ $menuGrouped = get_full_menu(false);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -145,6 +153,7 @@ $menuGrouped = get_full_menu(false);
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles.css">
</head>
<body data-csrf-token="<?= htmlspecialchars(get_csrf_token(), ENT_QUOTES, 'UTF-8') ?>">
<nav class="admin-nav">
@@ -187,30 +196,30 @@ $menuGrouped = get_full_menu(false);
</div>
<?php else: ?>
<?php foreach ($menuGrouped as $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>
<h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
<h2 class="cat-name-heading">
<span><?= htmlspecialchars($category['name']) ?></span>
</h2>
<p class="muted cat-desc-text" style="font-size: 0.88rem;"><?= htmlspecialchars($category['description'] ?? '') ?></p>
<p class="muted cat-desc-text"><?= htmlspecialchars($category['description'] ?? '') ?></p>
</div>
<div class="admin-table-actions">
<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'] ?? '') ?>"
data-sort="<?= (int)$category['sort_order'] ?>">
<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'] ?? '') ?>"
data-sort="<?= (int) $category['sort_order'] ?>">
Edit Category
</button>
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int)$category['id'] ?>">
<button type="button" class="btn btn-danger btn-sm btn-delete-cat" data-id="<?= (int) $category['id'] ?>">
Delete Category
</button>
</div>
</div>
<div class="admin-table-wrap">
<table class="admin-table" id="cat-table-<?= (int)$category['id'] ?>">
<table class="admin-table" id="cat-table-<?= (int) $category['id'] ?>">
<thead>
<tr>
<th>Status</th>
@@ -224,11 +233,11 @@ $menuGrouped = get_full_menu(false);
<tbody class="items-tbody">
<?php if (empty($category['items'])): ?>
<tr class="no-items-row">
<td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
<td colspan="6" class="muted">No items in this category yet.</td>
</tr>
<?php else: ?>
<?php foreach ($category['items'] as $item): ?>
<tr id="item-row-<?= (int)$item['id'] ?>" data-item-id="<?= (int)$item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
<tr id="item-row-<?= (int) $item['id'] ?>" data-item-id="<?= (int) $item['id'] ?>" data-item='<?= htmlspecialchars(json_encode($item), ENT_QUOTES, 'UTF-8') ?>'>
<td>
<?php if ($item['is_available']): ?>
<span class="status-badge active">● Available</span>
@@ -238,30 +247,30 @@ $menuGrouped = get_full_menu(false);
</td>
<td>
<strong class="item-name-cell"><?= htmlspecialchars($item['name']) ?></strong>
<div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">
<div class="muted item-desc-cell">
<?= htmlspecialchars($item['description'] ?? '') ?>
</div>
</td>
<td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">
<td class="font-mono item-price-cell">
<?= htmlspecialchars($item['price']) ?>
</td>
<td class="item-badge-cell">
<?php if (!empty($item['badge'])): ?>
<span class="eyebrow" style="font-size: 0.68rem;"><?= htmlspecialchars($item['badge']) ?></span>
<span class="eyebrow"><?= htmlspecialchars($item['badge']) ?></span>
<?php else: ?>
<span class="muted">—</span>
<?php endif; ?>
</td>
<td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">
<?= (int)$item['sort_order'] ?>
<td class="font-mono item-sort-cell">
<?= (int) $item['sort_order'] ?>
</td>
<td>
<div class="admin-table-actions">
<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'] ? 'Sold Out' : 'Available' ?>
<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
</button>
</div>
@@ -303,7 +312,7 @@ $menuGrouped = get_full_menu(false);
<label for="item-field-cat">Menu Category</label>
<select id="item-field-cat" name="category_id" class="form-control" required>
<?php foreach ($categories as $cat): ?>
<option value="<?= (int)$cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
<option value="<?= (int) $cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
<?php endforeach; ?>
</select>
</div>
@@ -334,7 +343,7 @@ $menuGrouped = get_full_menu(false);
</div>
</div>
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="btn-save-item">Save Item</button>
<button type="button" class="btn btn-outline" id="btn-cancel-item">Cancel</button>
</div>
@@ -371,7 +380,7 @@ $menuGrouped = get_full_menu(false);
</div>
</div>
<div class="form-actions" style="display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;">
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="btn-save-cat">Save Category</button>
<button type="button" class="btn btn-outline" id="btn-cancel-cat">Cancel</button>
</div>
@@ -382,4 +391,5 @@ $menuGrouped = get_full_menu(false);
<script src="menu.js" defer></script>
</body>
</html>
</html>