Astrian/datenel-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: enhance SingleDatePicker layout with grid styling and update component description

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-20 15:47:05 +11:00
parent d7feff5e37
commit ef0b2e03c3
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/SingleDatePicker.tsx
View File

@ -74,6 +74,7 @@ export interface SingleDatePickerProps {
} }
/** /**
* SingleDatePicker
* A panel that allows users to select a date. * A panel that allows users to select a date.
* *
* @component * @component
@ -205,7 +206,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
</button> </button>
<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button> <button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
</div> </div>
<div className='calendar-view-body' aria-live="polite"> <div className='calendar-view-body grid' aria-live="polite">
{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)} {l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
{dates.map(date => <button {dates.map(date => <button

6
src/style.scss
View File

@ -66,10 +66,12 @@
} }
.calendar-view-body { .calendar-view-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 0.75rem; padding: 0.75rem;
gap: 0.125rem; gap: 0.125rem;
&.grid{
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.item { .item {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;