quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-25 02:01:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

Support reflowing to 2 days per row

Browse source
This commit is contained in:
Quantum 2022-02-13 15:00:20 -05:00
parent 6f4751af2a
commit ab2bf71304
2 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/Calendar.scss
View file

@ -48,22 +48,34 @@
display: none;
}
@include media-breakpoint-up(md) {
.Month-decade {
@include make-row($gutter: 0);
.Month-decade {
@include make-row($gutter: 0);
> * {
@include make-col-ready();
}
> * {
@include make-col-ready();
}
}
.Month-decadeSplitter {
.Month-decadeSplitter-small, .Month-decadeSplitter-medium {
width: 100%;
}
.Month-decadeSplitter-medium {
display: none;
}
@include media-breakpoint-up(md) {
.Month-decadeSplitter-small {
display: none;
}
.Month-decadeSplitter-medium {
display: block;
}
}
@include media-breakpoint-up(xl) {
.Month-decadeSplitter {
.Month-decadeSplitter-medium {
display: none;
}

3
src/Calendar.tsx
View file

@ -54,7 +54,8 @@ function NormalMonth({year, month, todayJDN}: MonthProps & { todayJDN: number })
Array.from(Array(3).keys()).map(i => <div className="Month-decade">{
Array.from(Array(10).keys()).map(j => <>
<NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} todayJDN={todayJDN}/>
{j === 4 && <div className="Month-decadeSplitter"/>}
{j % 2 === 1 && <div className="Month-decadeSplitter-small"/>}
{j === 4 && <div className="Month-decadeSplitter-medium"/>}
</>)
}</div>)
}</div>