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

working on table borders

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-08 15:49:10 +01:00
parent 7f019483cf
commit 26d6056a2b
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Scheduler.tsx
View File

@ -6,7 +6,7 @@ import styled from 'styled-components/macro';
const SchedulerWrapper = styled.div` const SchedulerWrapper = styled.div`
border-collapse: collapse; border-collapse: collapse;
flex-grow: 1; flex: 1;
`; `;
const TableBody = styled.div` const TableBody = styled.div`
@ -26,22 +26,26 @@ const TableHead = styled.div`
interface TableCellProps { interface TableCellProps {
height: number; height: number;
isHourColumn?: boolean;
} }
const TableCell = styled.div<TableCellProps>` const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px; height: ${({ height }) => height}px;
border: 1px solid #ddd; /* border: ${({ isHourColumn }) => !isHourColumn && '1px solid #ddd'}; */
border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
border-style: ${({ isHourColumn }) => !isHourColumn && 'solid dotted dotted dotted'};
/* border-bottom: ${({ isHourColumn }) => !isHourColumn && '1px dotted #ddd'}; */
margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'};
flex: 1; flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'};
font-size: 1.25vw; margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'};
font-size: 0.75vw;
user-select: none;
border-collapse:collapse;
`; `;
const T = styled.table`
width: 100%;
height: 100%;
`;
export const Scheduler = () => { export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
@ -69,14 +73,14 @@ export const Scheduler = () => {
<TableHead> <TableHead>
{days.map((day, indexCell) => {days.map((day, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}> <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} ref={cellRef}>
{day} {day}
</TableCell> </TableCell>
) : ( ) : (
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}> <TableCell height={wrapperHeight / 26} key={indexCell} ref={cellRef}>
{day} {day}
</TableCell> </TableCell>
), ),
)} )}
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -84,19 +88,19 @@ export const Scheduler = () => {
<TableRow key={indexRow}> <TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) => {[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}> <TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : ( ) : (
<TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}> <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
), ),
)} )}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} /> <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 26} />
</SchedulerWrapper> </SchedulerWrapper>
</> </>
); );

12
src/constants/index.ts
View File

@ -8,17 +8,29 @@ export const days = [
]; ];
export const hours = [ export const hours = [
"8:00", "8:00",
"8:30",
"9:00", "9:00",
"9:30",
"10:00", "10:00",
"10:30",
"11:00", "11:00",
"11:30",
"12:00", "12:00",
"12:30",
"13:00", "13:00",
"13:30",
"14:00", "14:00",
"14:30",
"15:00", "15:00",
"15:30",
"16:00", "16:00",
"16:30",
"17:00", "17:00",
"17:30",
"18:00", "18:00",
"18:30",
"19:00", "19:00",
"19:30",
]; ];