Basic responsivness for table
This commit is contained in:
parent
143a0cf051
commit
7aec9ff943
@ -2,10 +2,6 @@
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
.thead {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tbody {
|
.tbody {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
import React, { useEffect, useContext } from "react";
|
import React, { useEffect, useContext, useRef } from "react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { SchedulerEvent } from "./SchedulerEvent";
|
|
||||||
import { Column } from "./Column";
|
|
||||||
import { LecturesContext } from "../../businesslogic/LecturesProvider";
|
import { LecturesContext } from "../../businesslogic/LecturesProvider";
|
||||||
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
|
||||||
|
|
||||||
@ -19,8 +17,6 @@ const hours = [
|
|||||||
"17:00",
|
"17:00",
|
||||||
"18:00",
|
"18:00",
|
||||||
"19:00",
|
"19:00",
|
||||||
"20:00",
|
|
||||||
"21:00",
|
|
||||||
];
|
];
|
||||||
|
|
||||||
let events: Array<number> = [];
|
let events: Array<number> = [];
|
||||||
@ -31,15 +27,12 @@ for (let i = 0; i < hours.length / 2; i++) {
|
|||||||
let center: "center" = "center";
|
let center: "center" = "center";
|
||||||
let row: "row" = "row";
|
let row: "row" = "row";
|
||||||
let column: "column" = "column";
|
let column: "column" = "column";
|
||||||
let wrap: "wrap" = "wrap";
|
const collapse: "collapse" = "collapse";
|
||||||
const tbodyStyles = {
|
const tbodyStyles = {
|
||||||
width: 900,
|
width: "100%",
|
||||||
height: 560,
|
height: "100%",
|
||||||
backgroundColor: "blue",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: column,
|
flexDirection: column,
|
||||||
// flexWrap: wrap
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const rowStyles = {
|
const rowStyles = {
|
||||||
@ -54,13 +47,44 @@ const cellStyles = {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
}
|
}
|
||||||
|
|
||||||
let terms = ["Zawsze", "jest pora", "na kurde", "lody", "koral"];
|
const theadStyles = {
|
||||||
|
display: "flex",
|
||||||
|
width: "100%"
|
||||||
|
}
|
||||||
|
|
||||||
|
const scheduler = {
|
||||||
|
marginTop: "20px",
|
||||||
|
borderCollapse: collapse
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export const Scheduler = () => {
|
export const Scheduler = () => {
|
||||||
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
||||||
|
const cellRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [cellWidth, setCellWidth] = useState(0);
|
||||||
|
const [cellTop, setCellTop] = useState(0);
|
||||||
const { choosenGroups } = useContext(LecturesContext);
|
const { choosenGroups } = useContext(LecturesContext);
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
console.log(`cellref is:`);
|
||||||
|
console.log(cellRef);
|
||||||
|
if (cellRef.current) {
|
||||||
|
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||||
|
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||||
|
console.log(`cellwidth: ${cellWidth}`);
|
||||||
|
console.log("cell ref:");
|
||||||
|
console.log(cellRef.current.getBoundingClientRect());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleResize();
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const displayEvents = () => {
|
const displayEvents = () => {
|
||||||
currentEventsIds.map((eventId: string) => {
|
currentEventsIds.map((eventId: string) => {
|
||||||
@ -85,7 +109,7 @@ export const Scheduler = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="scheduler" >
|
<div className="scheduler" >
|
||||||
<div className="thead">
|
<div style={theadStyles}>
|
||||||
{days.map((day, index) => (
|
{days.map((day, index) => (
|
||||||
<div className="th" key={index}>
|
<div className="th" key={index}>
|
||||||
{day}
|
{day}
|
||||||
@ -93,66 +117,53 @@ export const Scheduler = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div style={tbodyStyles}>
|
<div style={tbodyStyles}>
|
||||||
{hours.map((hour, index) => (
|
{hours.map((hour, indexRow) => (
|
||||||
<div style={rowStyles}>{
|
<div style={rowStyles}>{
|
||||||
[hour, "", "", "", "", ""].map((value) => (
|
[hour, "", "", "", "", ""].map((value, indexCell) =>
|
||||||
<div style={cellStyles}>{value}</div>
|
indexRow === 0 && indexCell === 1 ? (<div ref={cellRef} style={cellStyles}></div>) : (<div style={cellStyles}>{value}</div>)
|
||||||
))}</div>
|
|
||||||
|
)}</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 10, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 10, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 80, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 80, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div> <div>
|
</div> <div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 150, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 150, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div> <div>
|
</div> <div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 230, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 230, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div> <div>
|
</div> <div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 300, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 300, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div> <div>
|
</div> <div>
|
||||||
{["", "", "", "", ""].map((value, index) => (
|
{[...Array(5)].map((value, index) => (
|
||||||
<div style={{ position: "absolute", top: 150 + 370, left: 155 + 150 * index, width: 100, height: 60, backgroundColor: "black", zIndex: 2 }}>
|
<div style={{ position: "absolute", top: cellTop + 370, left: cellWidth + 5 + cellWidth * index, width: cellWidth * 2 / 3, height: 60, backgroundColor: "lightblue", zIndex: 2 }}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* <div className="tbody">
|
|
||||||
<Column hours={hours} isEventable={false} />
|
|
||||||
{terms.map((_, colIndex) => (
|
|
||||||
<Column
|
|
||||||
hours={hours}
|
|
||||||
handleClick={handleClick}
|
|
||||||
colIndex={colIndex}
|
|
||||||
isEventable={true}
|
|
||||||
>
|
|
||||||
<SchedulerEvent events={events} colIndex={colIndex} />
|
|
||||||
</Column>
|
|
||||||
))}
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user