mirror of
https://github.com/Sea-Haven-Industries/meal-order-manager.git
synced 2026-09-30 05:23:13 +00:00
fix(form): use single-column layout for meals without images on mobile
This commit is contained in:
parent
2a985c1940
commit
043eea1443
1 changed files with 2 additions and 1 deletions
|
|
@ -296,6 +296,7 @@ header p {{ font-size: 0.85rem; opacity: 0.8; }}
|
|||
.closed-banner {{ background: #fee2e2; color: #991b1b; padding: 16px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-weight: 600; font-size: 1rem; }}
|
||||
@media (max-width: 480px) {{
|
||||
.meal-card {{ display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; }}
|
||||
.meal-card.no-image {{ grid-template-columns: minmax(0, 1fr); }}
|
||||
.qty-control {{ grid-column: 1 / -1; justify-content: center; }}
|
||||
}}
|
||||
@media (pointer: coarse) {{
|
||||
|
|
@ -551,7 +552,7 @@ function renderMeals() {{
|
|||
|
||||
const qty = quantities[i] || 0;
|
||||
const card = document.createElement('div');
|
||||
card.className = 'meal-card' + (qty > 0 ? ' selected' : '');
|
||||
card.className = 'meal-card' + (qty > 0 ? ' selected' : '') + (meal.image_url ? '' : ' no-image');
|
||||
|
||||
let tagsHtml = '';
|
||||
if (meal.is_new) tagsHtml += '<span class="new">NEW</span>';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue