diff --git a/client/src/App.scss b/client/src/App.scss index 9bdabc3..c0049ff 100644 --- a/client/src/App.scss +++ b/client/src/App.scss @@ -372,6 +372,10 @@ body { &:hover { background: var(--luncher-bg-hover); + + .food-name { + color: var(--luncher-primary); + } } &:last-child td { @@ -384,20 +388,34 @@ body { border-color: var(--luncher-border-light); vertical-align: middle; color: var(--luncher-text); + } - &:first-child { - width: 60px; - text-align: center; - font-weight: 500; - color: var(--luncher-text-secondary); - } + .food-name { + font-weight: 500; + margin-bottom: 4px; + } - &:last-child { - width: 80px; - text-align: right; - font-weight: 600; - color: var(--luncher-primary); - } + .food-allergens { + white-space: nowrap; + } + + .food-meta { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 12px; + margin-top: 6px; + font-size: 0.75rem; + } + + .food-amount { + color: var(--luncher-text-muted); + font-weight: 400; + } + + .food-price { + font-weight: 600; + color: var(--luncher-primary); } .allergen-link { @@ -405,7 +423,7 @@ body { text-decoration: underline; text-decoration-style: dotted; color: var(--luncher-text-muted); - font-size: 0.85em; + font-size: 0.95em; &:hover { color: var(--luncher-primary); @@ -431,23 +449,24 @@ body { .choice-section { background: var(--luncher-bg-card); - border-radius: var(--luncher-radius-lg); - padding: 24px; - box-shadow: var(--luncher-shadow); - margin-bottom: 32px; + border-radius: var(--luncher-radius); + padding: 16px 20px; + box-shadow: var(--luncher-shadow-sm); + margin-bottom: 24px; border: 1px solid var(--luncher-border-light); p { - margin-bottom: 12px; + margin-bottom: 8px; font-weight: 500; color: var(--luncher-text); + font-size: 0.95rem; } small { display: block; - margin-top: 8px; + margin-top: 6px; color: var(--luncher-text-muted); - font-size: 0.85rem; + font-size: 0.8rem; } } @@ -578,7 +597,7 @@ input[type="text"], input[type="email"], input[type="password"] { > td { padding: 0; border-color: var(--luncher-border); - vertical-align: top; + vertical-align: middle; &:first-child { background: var(--luncher-primary-light); @@ -586,6 +605,7 @@ input[type="text"], input[type="email"], input[type="password"] { font-weight: 600; color: var(--luncher-primary); width: 180px; + white-space: nowrap; @media (max-width: 576px) { width: 120px; @@ -615,6 +635,8 @@ input[type="text"], input[type="email"], input[type="password"] { padding: 12px 16px; border-color: var(--luncher-border-light); color: var(--luncher-text); + white-space: nowrap; + vertical-align: middle; } } @@ -628,6 +650,28 @@ input[type="text"], input[type="email"], input[type="password"] { margin-bottom: 4px; } } + + .food-choices { + display: flex; + flex-direction: column; + gap: 6px; + } + + .food-choice-item { + background: var(--luncher-primary-light); + padding: 8px 12px; + border-radius: var(--luncher-radius-sm); + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.9rem; + border-left: 3px solid var(--luncher-primary); + } + + .food-choice-name { + color: var(--luncher-text); + font-weight: 500; + } } .no-votes { diff --git a/client/src/App.tsx b/client/src/App.tsx index 12d70b6..ae32097 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -352,24 +352,28 @@ function App() { {menu.food.map((f: Food, index: number) => (!hideSoups || !f.isSoup) && doAddClickFoodChoice(location, index)}> - {f.amount} - {f.name} - {f.allergens && f.allergens.length > 0 && ( - - ({f.allergens.map((a, idx) => ( - - { - e.stopPropagation(); - window.open(LINK_ALLERGENS, '_blank'); - }}>{a} - {idx < f.allergens!.length - 1 && ', '} - - ))}) - - )} +
+ {f.name} + {f.allergens && f.allergens.length > 0 && ( + + {' '}({f.allergens.map((a, idx) => ( + + { + e.stopPropagation(); + window.open(LINK_ALLERGENS, '_blank'); + }}>{a} + {idx < f.allergens!.length - 1 && ', '} + + ))}) + + )} +
+
+ {f.amount && f.amount !== '-' && {f.amount}} + {f.price} +
- {f.price} )} @@ -379,8 +383,8 @@ function App() { } return
-
-

doAddClickFoodChoice(location)}> +
doAddClickFoodChoice(location)}> +

{getLunchChoiceName(location)}

{menu?.lastUpdate && Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}} @@ -539,21 +543,21 @@ function App() { } {userChoices?.length && food ? -
    +
    {userChoices?.map(foodIndex => { const restaurantKey = key as Restaurant; const foodName = food[restaurantKey]?.food?.[foodIndex].name; - return
  • - {foodName} + return
    + {foodName} {login === auth.login && canChangeChoice && { doRemoveFoodChoice(restaurantKey, foodIndex); }} className='action-icon' icon={faTrashCan} /> } -
  • +
    })} -
+
: null} } diff --git a/client/src/components/modals/SettingsModal.tsx b/client/src/components/modals/SettingsModal.tsx index a1055f1..f0bdc4b 100644 --- a/client/src/components/modals/SettingsModal.tsx +++ b/client/src/components/modals/SettingsModal.tsx @@ -37,6 +37,7 @@ export default function SettingsModal({ isOpen, onClose, onSave }: ReadonlyObecné