scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Stick hours to the left of the screen when scrolling

Browse source
This commit is contained in:
Benji Grant 2023-06-18 09:37:26 +10:00
parent ba4cb919bd
commit 78eb51d735
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
View file

@ -15,14 +15,20 @@
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 40px;
padding-right: 6px; padding-right: 6px;
position: sticky;
left: 6px;
z-index: 5;
overflow: hidden;
padding-top: 1em;
pointer-events: none;
} }
.timeSpace { .timeSpace {
height: 10px; height: 10px;
position: relative; position: relative;
border-top: 2px solid transparent; border-top: 2px solid transparent;
text-align: right;
&.grey { &.grey {
background-origin: border-box; background-origin: border-box;
@ -37,13 +43,14 @@
} }
.timeLabel { .timeLabel {
display: block; display: inline-block;
position: absolute; transform: translateY(calc(-50% - 2px));
top: -.7em;
font-size: 12px; font-size: 12px;
text-align: right;
user-select: none; user-select: none;
width: 100%; background: var(--background);
border-radius: .3em;
padding: .1em .2em;
white-space: nowrap;
} }
.dateColumn { .dateColumn {