Marbes/Luncher
5
2
Fork 0
Code Issues 22 Pull Requests Packages Projects Releases Wiki Activity

fix: opravy a ladeni vzhledu a UX

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

86
client/src/App.scss
View File

@@ -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 {

50
client/src/App.tsx
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>
}

1
client/src/components/modals/SettingsModal.tsx
View File

@@ -37,6 +37,7 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
<h4>Obecné</h4>
<Form.Group className="mb-3">
<Form.Check
id="hideSoupsCheckbox"
ref={hideSoupsRef}
type="checkbox"
label="Skrýt polévky"