feat: redesign aplikace pomocí claude code #18
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user