fix: opravy zobrazeni sekce vybranych jidel #47
@@ -628,56 +628,77 @@ input[type="text"], input[type="email"], input[type="password"] {
|
||||
|
||||
tbody tr {
|
||||
transition: var(--luncher-transition);
|
||||
border-bottom: 1px solid var(--luncher-border-light);
|
||||
|
||||
&:hover {
|
||||
background: var(--luncher-bg-hover);
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
border-color: var(--luncher-border-light);
|
||||
border: none;
|
||||
color: var(--luncher-text);
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 8px 0 0 20px;
|
||||
.user-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--luncher-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 4px;
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.food-choices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.food-choice-item {
|
||||
background: var(--luncher-primary-light);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--luncher-radius-sm);
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.9rem;
|
||||
border-left: 3px solid var(--luncher-primary);
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--luncher-text-secondary);
|
||||
|
||||
.action-icon {
|
||||
opacity: 0;
|
||||
transition: var(--luncher-transition);
|
||||
}
|
||||
|
||||
&:hover .action-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.food-choice-name {
|
||||
color: var(--luncher-text);
|
||||
font-weight: 500;
|
||||
color: var(--luncher-text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -544,55 +544,61 @@ function App() {
|
||||
const isBuyer = userPayload?.isBuyer || false;
|
||||
return <tr key={entry[0]}>
|
||||
<td>
|
||||
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
|
||||
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
|
||||
</span>}
|
||||
<strong>{login}</strong>
|
||||
{userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
|
||||
{userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
|
||||
{login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
markAsBuyer();
|
||||
}} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
|
||||
</span>}
|
||||
{login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
copyNote(userPayload.note!);
|
||||
}} icon={faBasketShopping} className='buyer-icon' />
|
||||
</span>}
|
||||
{login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
copyNote(userPayload.note!);
|
||||
}} className='action-icon' icon={faComment} />
|
||||
</span>}
|
||||
{login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
setNoteModalOpen(true);
|
||||
}} className='action-icon' icon={faNoteSticky} />
|
||||
</span>}
|
||||
{login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
doRemoveChoices(key as LunchChoice);
|
||||
}} className='action-icon' icon={faTrashCan} />
|
||||
</span>}
|
||||
</td>
|
||||
{userChoices?.length && food ? <td>
|
||||
<div className="food-choices">
|
||||
{userChoices?.map(foodIndex => {
|
||||
const restaurantKey = key as Restaurant;
|
||||
const foodName = food[restaurantKey]?.food?.[foodIndex].name;
|
||||
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>}
|
||||
</div>
|
||||
})}
|
||||
<div className="user-row">
|
||||
<div className="user-info">
|
||||
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
|
||||
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
|
||||
</span>}
|
||||
<strong>{login}</strong>
|
||||
{userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
|
||||
{userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
|
||||
</div>
|
||||
<div className="user-actions">
|
||||
{login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
markAsBuyer();
|
||||
}} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
|
||||
</span>}
|
||||
{login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
copyNote(userPayload.note!);
|
||||
}} icon={faBasketShopping} className='buyer-icon' />
|
||||
</span>}
|
||||
{login !== auth.login && canChangeChoice && userPayload?.note?.length && <span title='Převzít poznámku'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
copyNote(userPayload.note!);
|
||||
}} className='action-icon' icon={faComment} />
|
||||
</span>}
|
||||
{login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
setNoteModalOpen(true);
|
||||
}} className='action-icon' icon={faNoteSticky} />
|
||||
</span>}
|
||||
{login === auth.login && canChangeChoice && <span title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`}>
|
||||
<FontAwesomeIcon onClick={() => {
|
||||
doRemoveChoices(key as LunchChoice);
|
||||
}} className='action-icon' icon={faTrashCan} />
|
||||
</span>}
|
||||
</div>
|
||||
</div>
|
||||
</td> : null}
|
||||
{userChoices && userChoices.length > 0 && food && (
|
||||
<div className="food-choices">
|
||||
{userChoices.map(foodIndex => {
|
||||
const restaurantKey = key as Restaurant;
|
||||
const foodName = food[restaurantKey]?.food?.[foodIndex].name;
|
||||
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>}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user