m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-19 15:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix calendar CSS for Firefox.

Browse Source
This commit is contained in:
Mike Cao 2020-09-16 16:43:13 -07:00
parent 60b17363e1
commit 30bca80dac
2 changed files with 88 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
components/common/Calendar.js
View File

@ -70,34 +70,36 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
<Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" /> <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
</div> </div>
</div> </div>
{!selectMonth && !selectYear && ( <div className={styles.body}>
<DaySelector {!selectMonth && !selectYear && (
date={date} <DaySelector
minDate={minDate} date={date}
maxDate={maxDate} minDate={minDate}
locale={locale} maxDate={maxDate}
onSelect={handleChange} locale={locale}
/> onSelect={handleChange}
)} />
{selectMonth && ( )}
<MonthSelector {selectMonth && (
date={date} <MonthSelector
minDate={minDate} date={date}
maxDate={maxDate} minDate={minDate}
locale={locale} maxDate={maxDate}
onSelect={handleChange} locale={locale}
onClose={toggleMonthSelect} onSelect={handleChange}
/> onClose={toggleMonthSelect}
)} />
{selectYear && ( )}
<YearSelector {selectYear && (
date={date} <YearSelector
minDate={minDate} date={date}
maxDate={maxDate} minDate={minDate}
onSelect={handleChange} maxDate={maxDate}
onClose={toggleYearSelect} onSelect={handleChange}
/> onClose={toggleYearSelect}
)} />
)}
</div>
</div> </div>
); );
} }
@ -220,42 +222,46 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
return ( return (
<div className={styles.pager}> <div className={styles.pager}>
<Button <div className={styles.left}>
icon={<Chevron />} <Button
size="small" icon={<Chevron />}
className={styles.left} size="small"
onClick={handlePrevClick} onClick={handlePrevClick}
disabled={years[0] <= minYear} disabled={years[0] <= minYear}
variant="light" variant="light"
/> />
<table> </div>
<tbody> <div className={styles.middle}>
{chunk(years, 5).map((row, i) => ( <table>
<tr key={i}> <tbody>
{row.map((n, j) => ( {chunk(years, 5).map((row, i) => (
<td <tr key={i}>
key={j} {row.map((n, j) => (
className={classNames({ <td
[styles.selected]: n === year, key={j}
[styles.disabled]: n < minYear || n > maxYear, className={classNames({
})} [styles.selected]: n === year,
onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))} [styles.disabled]: n < minYear || n > maxYear,
> })}
{n} onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
</td> >
))} {n}
</tr> </td>
))} ))}
</tbody> </tr>
</table> ))}
<Button </tbody>
icon={<Chevron />} </table>
size="small" </div>
className={styles.right} <div className={styles.right}>
onClick={handleNextClick} <Button
disabled={years[years.length - 1] > maxYear} icon={<Chevron />}
variant="light" size="small"
/> onClick={handleNextClick}
disabled={years[years.length - 1] > maxYear}
variant="light"
/>
</div>
</div> </div>
); );
}; };

20
components/common/Calendar.module.css
View File

@ -3,11 +3,11 @@
flex-direction: column; flex-direction: column;
font-size: var(--font-size-small); font-size: var(--font-size-small);
flex: 1; flex: 1;
min-height: 285px; min-height: 306px;
} }
.calendar table { .calendar table {
flex: 1; width: 100%;
border-spacing: 5px; border-spacing: 5px;
} }
@ -64,18 +64,34 @@
font-size: var(--font-size-normal); font-size: var(--font-size-normal);
} }
.body {
display: flex;
}
.selector { .selector {
cursor: pointer; cursor: pointer;
} }
.pager { .pager {
display: flex; display: flex;
flex: 1;
} }
.pager button { .pager button {
align-self: center; align-self: center;
} }
.middle {
flex: 1;
}
.left,
.right {
display: flex;
justify-content: center;
align-items: center;
}
.left svg { .left svg {
transform: rotate(90deg); transform: rotate(90deg);
} }