Skip to content

Commit 7a2defb

Browse files
mario-zelgermario-zelger
committed
refactor: keep modal header and footer always visible
1 parent c996731 commit 7a2defb

File tree

2 files changed

+85
-80
lines changed

2 files changed

+85
-80
lines changed

‎src/components/modal/modal.less

+12-11
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
transform: translateY(-50px);
3232
opacity: 0;
3333
transition: transform 0.3s ease, opacity 0.3s ease;
34+
display: flex;
35+
flex-direction: column;
36+
box-sizing: border-box;
3437

3538
&.wide {
3639
max-width: 800px;
@@ -46,27 +49,25 @@
4649
}
4750

4851
.md-header {
52+
margin-bottom: 0.5em;
53+
4954
h3 {
50-
margin: 0 0 0.5em 0;
55+
margin: 0;
5156
font-size: 1.5rem;
5257
font-weight: normal;
5358
}
5459
}
5560

5661
.md-footer {
57-
margin-top: 1em;
62+
margin-top: 0.5em;
5863
display: flex;
5964
align-items: center;
6065
gap: 0.5em;
6166
}
62-
}
6367

64-
.modal-close {
65-
position: absolute;
66-
top: 10px;
67-
right: 10px;
68-
border: none;
69-
background: none;
70-
font-size: 24px;
71-
cursor: pointer;
68+
.md-content {
69+
flex: 1 1 auto;
70+
overflow-y: auto;
71+
box-sizing: border-box;
72+
}
7273
}

‎src/pages/calendar/components/HolidaySelectModal.tsx

+73-69
Original file line numberDiff line numberDiff line change
@@ -111,77 +111,81 @@ function HolidaySelectModal() {
111111
<div className="md-header">
112112
<h3>{t('holidaysModal.title')}</h3>
113113
</div>
114-
<div className="holiday-selection">
115-
<div>{t('holidaysModal.description')}</div>
116-
117-
<div className="filter">
118-
<div className='form-entry'>
119-
<label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
120-
<select name="responsible" id="responsible"
121-
value={selectedCanton?.code ?? "DEFAULT"}
122-
onChange={onCantonChanged}>
123-
<option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
124-
{cantons.map(canton => (
125-
<option key={canton.code}
126-
value={canton.code}>
127-
{canton.name} ({canton.shortName})
128-
</option>
129-
))}
130-
</select>
114+
<div className="md-content">
115+
<div className="holiday-selection">
116+
<div>{t('holidaysModal.description')}</div>
117+
118+
<div className="filter">
119+
<div className='form-entry'>
120+
<label htmlFor={"responsible"}>{t('holidaysModal.canton')}</label>
121+
<select name="responsible" id="responsible"
122+
value={selectedCanton?.code ?? "DEFAULT"}
123+
onChange={onCantonChanged}>
124+
<option disabled value="DEFAULT">{t('holidaysModal.selectCanton')}</option>
125+
{cantons.map(canton => (
126+
<option key={canton.code}
127+
value={canton.code}>
128+
{canton.name} ({canton.shortName})
129+
</option>
130+
))}
131+
</select>
132+
</div>
133+
<div className='form-entry'>
134+
<label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
135+
<input type="number" id="year" name="year" value={selectedYear} min={minYear}
136+
max={maxYear}
137+
onChange={onYearChanged}/>
138+
</div>
131139
</div>
132-
<div className='form-entry'>
133-
<label htmlFor={"responsible"}>{t('holidaysModal.year')}</label>
134-
<input type="number" id="year" name="year" value={selectedYear} min={minYear}
135-
max={maxYear}
136-
onChange={onYearChanged}/>
137-
</div>
138-
</div>
139140

140-
{selectedCanton && !isUpdatingHolidays && (
141-
<table className="holidays">
142-
<thead>
143-
<tr>
144-
<th className="date">{t('holidaysModal.from')}</th>
145-
<th className="date">{t('holidaysModal.to')}</th>
146-
<th>{t('holidaysModal.type')}</th>
147-
</tr>
148-
</thead>
149-
<tbody>
150-
{holidays.map(holiday => (
151-
<tr key={holiday.id}>
152-
<td>
153-
<a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
154-
{format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
155-
</a>
156-
</td>
157-
<td>
158-
<a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
159-
{format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
160-
</a>
161-
</td>
162-
<td className="type">
163-
<span>{holiday.name}</span>
164-
{holiday.comment.length > 0 &&
165-
<>
166-
<FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
167-
<Tooltip id={holiday.id}>
168-
{holiday.comment}
169-
</Tooltip>
170-
</>
171-
}
172-
</td>
173-
</tr>
174-
))}
175-
{holidays.length === 0 && (
176-
<tr>
177-
<td colSpan={3}>{t('holidaysModal.noResults')}</td>
178-
</tr>
179-
)}
180-
</tbody>
181-
</table>
182-
)}
183-
184-
{isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
141+
{selectedCanton && !isUpdatingHolidays && (
142+
<div className="table-overflow">
143+
<table className="holidays">
144+
<thead>
145+
<tr>
146+
<th className="date">{t('holidaysModal.from')}</th>
147+
<th className="date">{t('holidaysModal.to')}</th>
148+
<th>{t('holidaysModal.type')}</th>
149+
</tr>
150+
</thead>
151+
<tbody>
152+
{holidays.map(holiday => (
153+
<tr key={holiday.id}>
154+
<td>
155+
<a className="cursor-pointer" onClick={() => selectDate(holiday.startDate)}>
156+
{format(holiday.startDate, 'EEEEEE, dd.MM.yyyy')}
157+
</a>
158+
</td>
159+
<td>
160+
<a className="cursor-pointer" onClick={() => selectDate(holiday.endDate)}>
161+
{format(holiday.endDate, 'EEEEEE, dd.MM.yyyy')}
162+
</a>
163+
</td>
164+
<td className="type">
165+
<span>{holiday.name}</span>
166+
{holiday.comment.length > 0 &&
167+
<span className="icon">
168+
<FontAwesomeIcon icon={faCircleInfo} data-tooltip-id={holiday.id}/>
169+
<Tooltip id={holiday.id}>
170+
{holiday.comment}
171+
</Tooltip>
172+
</span>
173+
}
174+
</td>
175+
</tr>
176+
))}
177+
{holidays.length === 0 && (
178+
<tr>
179+
<td colSpan={3}>{t('holidaysModal.noResults')}</td>
180+
</tr>
181+
)}
182+
</tbody>
183+
</table>
184+
</div>
185+
)}
186+
187+
{isUpdatingHolidays && <Loading subtext="Ferien werden geladen..."/>}
188+
</div>
185189
</div>
186190
<div className="md-footer">
187191
<button className="btn" onClick={cancel}>{t('holidaysModal.close')}</button>

0 commit comments

Comments
 (0)