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

table and classes in table

Browse Source
This commit is contained in:
wrzesinski-hubert 2020-11-20 15:58:51 +01:00
parent 96ed785c29
commit aa519c5e00
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Scheduler.tsx
View File

@ -74,7 +74,6 @@ export const Scheduler = () => {
setCellWidth(cellRef.current.getBoundingClientRect().width); setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top); setCellTop(cellRef.current.getBoundingClientRect().top);
setCellHeight(cellRef.current.getBoundingClientRect().height); setCellHeight(cellRef.current.getBoundingClientRect().height);
cellRef.current.style.backgroundColor = 'blue';
} }
}; };
handleResize(); handleResize();
@ -111,11 +110,13 @@ export const Scheduler = () => {
{value} {value}
</TableCell> </TableCell>
) : indexRow === 23 ? ( ) : indexRow === 23 ? (
<TableCell style={{ borderBottom: '2px soli rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexCell === 5 ? (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
) : indexRow % 2 !== 0 ? ( ) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value} {value}

12
src/components/SchedulerRow.tsx
View File

@ -29,7 +29,7 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
position: absolute; position: absolute;
display: flex; display: flex;
top: ${({ cellTop }) => cellTop}px; top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px; left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 5 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => cellWidth - 10}px; width: ${({ cellWidth }) => cellWidth - 10}px;
height: ${({ cellHeight }) => cellHeight * 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
z-index: 2; z-index: 2;
@ -37,22 +37,27 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
`; `;
interface ClassesProps { interface ClassesProps {
cellWidth: number;
cellHeight: number; cellHeight: number;
groupType: GroupType; groupType: GroupType;
} }
const Classes = styled.div<ClassesProps>` const Classes = styled.div<ClassesProps>`
display: flex; display: flex;
flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 2; z-index: 2;
font-size: 0.65vw;
line-height: normal;
border-radius: 10px; border-radius: 10px;
height: ${({ cellHeight }) => cellHeight * 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
width: ${({ cellWidth }) => cellWidth *3/4}px;
margin-right: 5px; margin-right: 5px;
text-align: left; padding: 5px 2px 2px 5px;
text-align: center;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`; `;
interface SchedulerRowProps { interface SchedulerRowProps {
@ -101,6 +106,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
console.log('group: ', group); console.log('group: ', group);
}} }}
groupType={group.type} groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}${index}`} id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
key={index} key={index}