fix: opravy a ladeni vzhledu a UX

This commit was merged in pull request #18.
This commit is contained in:
Stánek Pavel
2026-02-04 12:06:17 +01:00
parent 37cacd895a
commit d85c764c88
3 changed files with 93 additions and 44 deletions

View File

@@ -352,24 +352,28 @@ function App() {
{menu.food.map((f: Food, index: number) =>
(!hideSoups || !f.isSoup) &&
<tr key={f.name} onClick={() => doAddClickFoodChoice(location, index)}>
<td>{f.amount}</td>
<td>
{f.name}
{f.allergens && f.allergens.length > 0 && (
<span className="ms-1">
({f.allergens.map((a, idx) => (
<span key={a}>
<span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
e.stopPropagation();
window.open(LINK_ALLERGENS, '_blank');
}}>{a}</span>
{idx < f.allergens!.length - 1 && ', '}
</span>
))})
</span>
)}
<div className="food-name">
{f.name}
{f.allergens && f.allergens.length > 0 && (
<span className="food-allergens">
{' '}({f.allergens.map((a, idx) => (
<span key={a}>
<span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
e.stopPropagation();
window.open(LINK_ALLERGENS, '_blank');
}}>{a}</span>
{idx < f.allergens!.length - 1 && ', '}
</span>
))})
</span>
)}
</div>
<div className="food-meta">
{f.amount && f.amount !== '-' && <span className="food-amount">{f.amount}</span>}
<span className="food-price">{f.price}</span>
</div>
</td>
<td>{f.price}</td>
</tr>
)}
</tbody>
@@ -379,8 +383,8 @@ function App() {
}
return <Col md={6} lg={3} className='mt-3'>
<div className="restaurant-card">
<div className="restaurant-header">
<h3 style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
<div className="restaurant-header" style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
<h3>
{getLunchChoiceName(location)}
</h3>
{menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
@@ -539,21 +543,21 @@ function App() {
</span>}
</td>
{userChoices?.length && food ? <td>
<ul>
<div className="food-choices">
{userChoices?.map(foodIndex => {
const restaurantKey = key as Restaurant;
const foodName = food[restaurantKey]?.food?.[foodIndex].name;
return <li key={foodIndex}>
{foodName}
return <div key={foodIndex} className="food-choice-item">
<span className="food-choice-name">{foodName}</span>
{login === auth.login && canChangeChoice &&
<span title={`Odstranit ${foodName}`}>
<FontAwesomeIcon onClick={() => {
doRemoveFoodChoice(restaurantKey, foodIndex);
}} className='action-icon' icon={faTrashCan} />
</span>}
</li>
</div>
})}
</ul>
</div>
</td> : null}
</tr>
}