Skip to content

Commit

Permalink
refactor: keep modal header and footer always visible
Browse files Browse the repository at this point in the history
  • Loading branch information
@mario-zelger
mario-zelger committed Dec 3, 2024
1 parent c996731 commit 7a2defb
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 80 deletions.
23 changes: 12 additions & 11 deletions src/components/modal/modal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
transform: translateY(-50px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
display: flex;
flex-direction: column;
box-sizing: border-box;

&.wide {
max-width: 800px;
Expand All @@ -46,27 +49,25 @@
}

.md-header {
margin-bottom: 0.5em;

h3 {
margin: 0 0 0.5em 0;
margin: 0;
font-size: 1.5rem;
font-weight: normal;
}
}

.md-footer {
margin-top: 1em;
margin-top: 0.5em;
display: flex;
align-items: center;
gap: 0.5em;
}
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
border: none;
background: none;
font-size: 24px;
cursor: pointer;
.md-content {
flex: 1 1 auto;
overflow-y: auto;
box-sizing: border-box;
}
}
142 changes: 73 additions & 69 deletions src/pages/calendar/components/HolidaySelectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,77 +111,81 @@ function HolidaySelectModal() {
<div className="md-header">
<h3>{t('holidaysModal.title')}</h3>
</div>
<div className="holiday-selection">
<div>{t('holidaysModal.description')}</div>

<div className="filter">
<div className='form-entry'>
<label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
<select name="responsible" id="responsible"
value={selectedCanton?.code ?? "DEFAULT"}
onChange={onCantonChanged}>
<option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
{cantons.map(canton => (
<option key={canton.code}
value={canton.code}>
{canton.name} ({canton.shortName})
</option>
))}
</select>
<div className="md-content">
<div className="holiday-selection">
<div>{t('holidaysModal.description')}</div>

<div className="filter">
<div className='form-entry'>
<label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
<select name="responsible" id="responsible"
value={selectedCanton?.code ?? "DEFAULT"}
onChange={onCantonChanged}>
<option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
{cantons.map(canton => (
<option key={canton.code}
value={canton.code}>
{canton.name} ({canton.shortName})
</option>
))}
</select>
</div>
<div className='form-entry'>
<label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
<input type="number" id="year" name="year" value={selectedYear} min={minYear}
max={maxYear}
onChange={onYearChanged}/>
</div>
</div>
<div className='form-entry'>
<label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
<input type="number" id="year" name="year" value={selectedYear} min={minYear}
max={maxYear}
onChange={onYearChanged}/>
</div>
</div>

{selectedCanton && !isUpdatingHolidays && (
<table className="holidays">
<thead>
<tr>
<th className="date">{t('holidaysModal.from')}</th>
<th className="date">{t('holidaysModal.to')}</th>
<th>{t('holidaysModal.type')}</th>
</tr>
</thead>
<tbody>
{holidays.map(holiday => (
<tr key={holiday.id}>
<td>
<a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
{format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
</a>
</td>
<td>
<a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
{format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
</a>
</td>
<td className="type">
<span>{holiday.name}</span>
{holiday.comment.length > 0 &&
<>
<FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
<Tooltip id={holiday.id}>
{holiday.comment}
</Tooltip>
</>
}
</td>
</tr>
))}
{holidays.length === 0 && (
<tr>
<td colSpan={3}>{t('holidaysModal.noResults')}</td>
</tr>
)}
</tbody>
</table>
)}

{isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
{selectedCanton && !isUpdatingHolidays && (
<div className="table-overflow">
<table className="holidays">
<thead>
<tr>
<th className="date">{t('holidaysModal.from')}</th>
<th className="date">{t('holidaysModal.to')}</th>
<th>{t('holidaysModal.type')}</th>
</tr>
</thead>
<tbody>
{holidays.map(holiday => (
<tr key={holiday.id}>
<td>
<a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
{format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
</a>
</td>
<td>
<a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
{format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
</a>
</td>
<td className="type">
<span>{holiday.name}</span>
{holiday.comment.length > 0 &&
<span className="icon">
<FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
<Tooltip id={holiday.id}>
{holiday.comment}
</Tooltip>
</span>
}
</td>
</tr>
))}
{holidays.length === 0 && (
<tr>
<td colSpan={3}>{t('holidaysModal.noResults')}</td>
</tr>
)}
</tbody>
</table>
</div>
)}

{isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
</div>
</div>
<div className="md-footer">
<button className="btn" onClick={cancel}>{t('holidaysModal.close')}</button>
Expand Down

0 comments on commit 7a2defb

Please sign in to comment.