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

table and classes in table

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

11
src/components/Scheduler.tsx
View File

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

12
src/components/SchedulerRow.tsx
View File

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