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 selectedOffsetBottom = 0;
let selectedListID = ""; let selectedListID = "";
const cellHeight = 25;
export default function CalenderView(p) { export default function CalenderView(p) {
const [t, setT] = useState(false) const [t, setT] = useState(false)
@@ -23,7 +25,7 @@ export default function CalenderView(p) {
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; let y_target_offset = e.currentTarget.getBoundingClientRect().top;
let id = e.currentTarget.id; 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) { if (grabbed != null) {
@@ -68,7 +70,7 @@ export default function CalenderView(p) {
mouseDown = false; mouseDown = false;
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; 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]; let current_list = entries[e.currentTarget.id];
if (grabbed != null) { if (grabbed != null) {
@@ -85,7 +87,7 @@ export default function CalenderView(p) {
let y_window = e.clientY; let y_window = e.clientY;
let y_target_offset = e.currentTarget.getBoundingClientRect().top; 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]; let current_list = entries[e.currentTarget.id];
if (e.button === 2) { if (e.button === 2) {
@@ -186,15 +188,15 @@ export default function CalenderView(p) {
} }
return ( 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 style={{backgroundColor: "#363636"}}>
<div className={"wochen-tag-container"}> <div className={"wochen-tag-container"}>
<div className={"wochen-tag font-small"}>Montag</div> <div className={"wochen-tag font-big"}>Montag</div>
<div className={"wochen-tag font-small"}>Dienstag</div> <div className={"wochen-tag font-big"}>Dienstag</div>
<div className={"wochen-tag font-small"}>Mittwoch</div> <div className={"wochen-tag font-big"}>Mittwoch</div>
<div className={"wochen-tag font-small"}>Donnerstag</div> <div className={"wochen-tag font-big"}>Donnerstag</div>
<div className={"wochen-tag font-small"}>Freitag</div> <div className={"wochen-tag font-big"}>Freitag</div>
<div className={"wochen-tag font-small"}>Samstag</div> <div className={"wochen-tag font-big"}>Samstag</div>
</div> </div>
</div> </div>
<div className={"calender-container"}> <div className={"calender-container"}>
@@ -323,20 +325,20 @@ export default function CalenderView(p) {
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}> <div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
{temp.map(i => (<div style={{ {temp.map(i => (<div style={{
width: "100%", width: "100%",
height: 20, height: cellHeight * 2,
borderBottom: "0.4px solid #363636", borderBottom: "1px solid #363636",
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-around", justifyContent: "space-around",
alignItems: "center", alignItems: "center",
}} className={"no-pointer-events"}> }} 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: 30, marginRight: 120, fontSize: 12, 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: 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: 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: 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: 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>
</div>))} </div>))}
</div> </div>
anwendung/src/styles/globals.css
+18 -18
View File
@@ -33,17 +33,17 @@ Button
.font-small .font-small
{ {
font-size: 10px; font-size: 12px;
} }
.font-middle .font-middle
{ {
font-size: 12px ; font-size: 16px ;
} }
.font-big .font-big
{ {
font-size: 16px; font-size: 22px;
} }
.button .button
@@ -189,7 +189,7 @@ Calender View
.calender-container .calender-container
{ {
max-height: 300px; max-height: 600px;
overflow-y: scroll; overflow-y: scroll;
display: grid; display: grid;
} }
@@ -221,9 +221,9 @@ Calender View
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 25px; height: 60px;
width: 500px; width: 1000px;
gap: 2px; gap: 5px;
background-color: #363636; background-color: #363636;
} }
@@ -232,8 +232,8 @@ Calender View
/* /*
Test Test
*/ */
width: 500px; width: 1000px;
height: 965px; height: 2400px;
/* /*
End Test End Test
*/ */
@@ -242,29 +242,29 @@ Calender View
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
gap: 2px; gap: 5px;
user-select: none; user-select: none;
padding: 2px 0 0 0; padding: 2px 0 0 0;
} }
.calender-view .spalte .calender-view .spalte
{ {
border-radius: 5px; border-radius: 10px;
width: 100px; width: 400px;
background-color: white; background-color: white;
display: grid; display: grid;
padding: 0 1.5px; padding: 0 3px;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: repeat(96, 10px); grid-template-rows: repeat(96, 25px);
} }
.wochen-tag-container .wochen-tag .wochen-tag-container .wochen-tag
{ {
text-align: center; text-align: center;
background-color: #f80000; background-color: #f80000;
width: 100px; width: 400px;
color: white; color: white;
border-radius: 5px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -276,7 +276,7 @@ Calender View
.entry .entry
{ {
background-color: #f80000; background-color: #f80000;
border-radius: 5px; border-radius: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -298,7 +298,7 @@ Calender View
.entry p .entry p
{ {
color: white; color: white;
font-size: 6px; font-size: 16px;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }