Skip to content
Snippets Groups Projects
Commit e3a62a51 authored by Sreeram, Sudarshan's avatar Sreeram, Sudarshan :carrot:
Browse files

Add the day indicator grid and column

parent 7eac593c
No related branches found
No related tags found
No related merge requests found
...@@ -121,6 +121,18 @@ class Timeline extends React.Component<TimelineProps, TimelineState> { ...@@ -121,6 +121,18 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
> >
{timelineBackgrounds} {timelineBackgrounds}
</div> </div>
<div
className={styles.dayIndicatorGrid}
style={{
gridTemplateColumns: `repeat(${numWeeks}, 3rem 3rem 3rem 3rem 3rem 0.625rem`
}}
>
<div
className={styles.dayIndicatorColumn}
>
&nbsp;
</div>
</div>
</div> </div>
</div> </div>
); );
......
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
display: grid; display: grid;
grid-template-areas: "switcher weeks" "modules background"; grid-template-areas: "switcher weeks" "modules background";
grid-template-rows: auto; grid-template-rows: auto;
row-gap: 0.625rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
margin-left: -0.625rem; margin-left: -0.625rem;
grid-template-columns: 16.875rem auto; grid-template-columns: 16.875rem auto;
...@@ -53,12 +52,12 @@ ...@@ -53,12 +52,12 @@
top: 0; top: 0;
left: 0; left: 0;
position: sticky; position: sticky;
z-index: 1; z-index: 3;
background: var(--background-color); background: var(--background-color);
padding-right: 1.25rem; padding-right: 1.25rem;
padding-left: 0.625rem; padding-left: 0.625rem;
box-sizing: border-box; height: 5.5rem !important;
height: 4.25rem !important; padding-bottom: 0.625rem;
} }
.timelineTermSwitcher > * { .timelineTermSwitcher > * {
...@@ -73,6 +72,10 @@ ...@@ -73,6 +72,10 @@
padding-right: 0.625rem; padding-right: 0.625rem;
top: 0; top: 0;
position: sticky; position: sticky;
background: var(--background-color);
padding-bottom: 0.625rem;
height: 5.5rem !important;
z-index: 2;
} }
.timelineModuleColumn { .timelineModuleColumn {
...@@ -86,6 +89,8 @@ ...@@ -86,6 +89,8 @@
padding-left: 0.625rem; padding-left: 0.625rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
background: var(--background-color); background: var(--background-color);
padding-top: 0.625rem;
z-index: 2;
} }
.weekHeading { .weekHeading {
...@@ -93,6 +98,7 @@ ...@@ -93,6 +98,7 @@
} }
.timelineWeekBackground { .timelineWeekBackground {
padding-top: 0.625rem;
display: grid; display: grid;
grid-area: background; grid-area: background;
grid-template-rows: auto; grid-template-rows: auto;
...@@ -118,3 +124,21 @@ ...@@ -118,3 +124,21 @@
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
} }
.dayIndicatorGrid {
grid-area: background;
padding-top: 0.625rem;
z-index: 1;
display: grid;
grid-template-rows: auto;
}
.dayIndicatorColumn {
grid-row: 1;
grid-column: 9 / 10;
margin-top: 0.5rem;
margin-bottom: 1.125rem;
border-radius: 0.5rem;
background-color: var(--background-color);
border: 1px solid var(--border-color);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment