y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Didn't convert to table but managed to change stylings accordingly

Browse Source
This commit is contained in:
Maciek Głowacki
2020-08-29 18:52:03 +02:00
parent d30852b97d
commit 9f531de1a5
6 changed files with 63 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/SchedulerRow.tsx
View File

@ -6,14 +6,15 @@ interface SchedulerEventProps {
eventIndex: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
}
const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute;
top: ${(props) => props.cellTop}px;
left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
width: ${(props) => (props.cellWidth * 2) / 3}px;
height: 69px;
top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => (cellWidth * 2) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
background-color: lightblue;
z-index: 2;
`;
@ -23,11 +24,10 @@ interface SchedulerRowProps {
indexRow: number;
cellTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
return (
<>
{[...Array(5)].map((_, eventIndex) => (
@ -35,12 +35,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
key={eventIndex}
id={`eventRow${indexRow}eventCol${eventIndex}`}
>
{groups.map((group, index) =>
group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
)}
{groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
</SchedulerEvent>
))}
</>