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

Merge pull request #276 from GRA0007/feat/sticky-hours

Browse source 
Stick hours to the left of the screen when scrolling
This commit is contained in:
Benji Grant 2023-06-18 09:59:19 +10:00 committed by GitHub
parent ba4cb919bd 8c8984e6b4
commit 7b41c6e2df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -89,6 +89,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
key={y} key={y}
className={makeClass(styles.time, selecting.length === 0 && styles.editable)} className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
style={{ style={{
touchAction: 'none',
backgroundColor: isSelected ? palette[1].string : palette[0].string, backgroundColor: isSelected ? palette[1].string : palette[0].string,
'--hover-color': isSelected ? palette[0].highlight : palette[1].highlight, '--hover-color': isSelected ? palette[0].highlight : palette[1].highlight,
...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' }, ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },

20
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 {
@ -97,7 +104,6 @@
height: 10px; height: 10px;
background-origin: border-box; background-origin: border-box;
transition: background-color .1s; transition: background-color .1s;
touch-action: none;
position: relative; position: relative;
border-top-width: 2px; border-top-width: 2px;