m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-26 03:06:24 +02: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" />
</div>
</div>
{!selectMonth && !selectYear && (
<DaySelector
date={date}
minDate={minDate}
maxDate={maxDate}
locale={locale}
onSelect={handleChange}
/>
)}
{selectMonth && (
<MonthSelector
date={date}
minDate={minDate}
maxDate={maxDate}
locale={locale}
onSelect={handleChange}
onClose={toggleMonthSelect}
/>
)}
{selectYear && (
<YearSelector
date={date}
minDate={minDate}
maxDate={maxDate}
onSelect={handleChange}
onClose={toggleYearSelect}
/>
)}
<div className={styles.body}>
{!selectMonth && !selectYear && (
<DaySelector
date={date}
minDate={minDate}
maxDate={maxDate}
locale={locale}
onSelect={handleChange}
/>
)}
{selectMonth && (
<MonthSelector
date={date}
minDate={minDate}
maxDate={maxDate}
locale={locale}
onSelect={handleChange}
onClose={toggleMonthSelect}
/>
)}
{selectYear && (
<YearSelector
date={date}
minDate={minDate}
maxDate={maxDate}
onSelect={handleChange}
onClose={toggleYearSelect}
/>
)}
</div>
</div>
);
}
@ -220,42 +222,46 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
return (
<div className={styles.pager}>
<Button
icon={<Chevron />}
size="small"
className={styles.left}
onClick={handlePrevClick}
disabled={years[0] <= minYear}
variant="light"
/>
<table>
<tbody>
{chunk(years, 5).map((row, i) => (
<tr key={i}>
{row.map((n, j) => (
<td
key={j}
className={classNames({
[styles.selected]: n === year,
[styles.disabled]: n < minYear || n > maxYear,
})}
onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
>
{n}
</td>
))}
</tr>
))}
</tbody>
</table>
<Button
icon={<Chevron />}
size="small"
className={styles.right}
onClick={handleNextClick}
disabled={years[years.length - 1] > maxYear}
variant="light"
/>
<div className={styles.left}>
<Button
icon={<Chevron />}
size="small"
onClick={handlePrevClick}
disabled={years[0] <= minYear}
variant="light"
/>
</div>
<div className={styles.middle}>
<table>
<tbody>
{chunk(years, 5).map((row, i) => (
<tr key={i}>
{row.map((n, j) => (
<td
key={j}
className={classNames({
[styles.selected]: n === year,
[styles.disabled]: n < minYear || n > maxYear,
})}
onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
>
{n}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className={styles.right}>
<Button
icon={<Chevron />}
size="small"
onClick={handleNextClick}
disabled={years[years.length - 1] > maxYear}
variant="light"
/>
</div>
</div>
);
};

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

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