quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-24 17:51:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix alignment issues

Browse source
This commit is contained in:
Quantum 2022-02-12 23:15:15 -05:00
parent c85d00e1a3
commit ae8af17635
3 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/Calendar.scss
View file

@ -4,6 +4,7 @@
@import 'bootstrap/scss/forms'; @import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid'; @import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons'; @import 'bootstrap/scss/buttons';
@import './consts';
.Calendar { .Calendar {
@include make-container(); @include make-container();
@ -49,7 +50,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.Month-decade { .Month-decade {
@include make-row(); @include make-row($gutter: 0);
> * { > * {
@include make-col-ready(); @include make-col-ready();
@ -68,7 +69,7 @@
.Month-decadeHead { .Month-decadeHead {
display: block; display: block;
@include make-row(); @include make-row($gutter: 0);
} }
.Day-decade { .Day-decade {
@ -76,17 +77,22 @@
} }
} }
.Day, .DecadeName, .ComplementaryDay-fake {
margin: $calendar-gutter;
@include make-col($columns: 10);
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.ComplementaryDays { .ComplementaryDays {
@include make-row(); @include make-row($gutter: 0);
> * { > * {
@include make-col-ready(); @include make-col-ready();
} }
} }
.ComplementaryDay { .ComplementaryDay, .ComplementaryDay-fake {
@include make-col($columns: 2); @include make-col();
} }
.ComplementaryDays-splitter { .ComplementaryDays-splitter {
@ -94,9 +100,17 @@
} }
} }
.Day, .DecadeName { .Month, .ComplementaryDays {
margin: 0.5em; margin-left: -$calendar-gutter;
@include make-col($columns: 10); margin-right: -$calendar-gutter;
}
.ComplementaryDay {
margin-top: $calendar-gutter;
}
.ComplementaryDay-fake {
padding: 0.5em;
} }
.Day { .Day {

6
src/Calendar.tsx
View file

@ -68,9 +68,11 @@ function ComplementaryDay({year, month, day, todayJDN}: DateProps & { todayJDN:
} }
function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element { function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element {
const leap = frIsLeap(year);
return <div className="ComplementaryDays">{ return <div className="ComplementaryDays">{
Array.from(Array(frIsLeap(year) ? 6 : 5).keys()).map(i => <> Array.from(Array(6).keys()).map(i => <>
<ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/> {(i < 5 || leap) && <ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/>}
{i === 5 && !leap && <div className="ComplementaryDay-fake"/>}
{i % 2 === 1 && <div className="ComplementaryDays-splitter"/>} {i % 2 === 1 && <div className="ComplementaryDays-splitter"/>}
</>) </>)
}</div>; }</div>;

1
src/consts.scss
View file

@ -1 +1,2 @@
$calendar-width: 1600px; $calendar-width: 1600px;
$calendar-gutter: 0.5rem;