jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Calender Correct Scaling XD

Browse Source
This commit is contained in:
brausjonas
2023-05-05 21:26:12 +02:00
parent bd6d279919
commit 4a4601d175
2 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+20 -18
View File
@@ -11,6 +11,8 @@ let selectedOffsetTop = 0;
let selectedOffsetBottom = 0;
let selectedListID = "";
const cellHeight = 25;
export default function CalenderView(p) {
const [t, setT] = useState(false)
@@ -23,7 +25,7 @@ export default function CalenderView(p) {
let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let id = e.currentTarget.id;
let row = Math.floor((y_window - y_target_offset) / 10) + 1
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1
if (grabbed != null) {
@@ -68,7 +70,7 @@ export default function CalenderView(p) {
mouseDown = false;
let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let row = Math.floor((y_window - y_target_offset) / 10) + 1
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1
let current_list = entries[e.currentTarget.id];
if (grabbed != null) {
@@ -85,7 +87,7 @@ export default function CalenderView(p) {
let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let row = Math.floor((y_window - y_target_offset) / 10) + 1;
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
let current_list = entries[e.currentTarget.id];
if (e.button === 2) {
@@ -186,15 +188,15 @@ export default function CalenderView(p) {
}
return (
<div id={t} style={{border: "2px solid #363636", borderRadius: 5}}>
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
<div style={{backgroundColor: "#363636"}}>
<div className={"wochen-tag-container"}>
<div className={"wochen-tag font-small"}>Montag</div>
<div className={"wochen-tag font-small"}>Dienstag</div>
<div className={"wochen-tag font-small"}>Mittwoch</div>
<div className={"wochen-tag font-small"}>Donnerstag</div>
<div className={"wochen-tag font-small"}>Freitag</div>
<div className={"wochen-tag font-small"}>Samstag</div>
<div className={"wochen-tag font-big"}>Montag</div>
<div className={"wochen-tag font-big"}>Dienstag</div>
<div className={"wochen-tag font-big"}>Mittwoch</div>
<div className={"wochen-tag font-big"}>Donnerstag</div>
<div className={"wochen-tag font-big"}>Freitag</div>
<div className={"wochen-tag font-big"}>Samstag</div>
</div>
</div>
<div className={"calender-container"}>
@@ -323,20 +325,20 @@ export default function CalenderView(p) {
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
{temp.map(i => (<div style={{
width: "100%",
height: 20,
borderBottom: "0.4px solid #363636",
height: cellHeight * 2,
borderBottom: "1px solid #363636",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}} className={"no-pointer-events"}>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 10, marginRight: 60, fontSize: 5, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
<p style={{color: "gray", marginTop: 30, marginRight: 120, fontSize: 12, textAlign: "center"}}>{internal_to_time(i+1)}</p>
</div>))}
</div>