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>
anwendung/src/styles/globals.css
+18 -18
View File
@@ -33,17 +33,17 @@ Button
.font-small
{
font-size: 10px;
font-size: 12px;
}
.font-middle
{
font-size: 12px ;
font-size: 16px ;
}
.font-big
{
font-size: 16px;
font-size: 22px;
}
.button
@@ -189,7 +189,7 @@ Calender View
.calender-container
{
max-height: 300px;
max-height: 600px;
overflow-y: scroll;
display: grid;
}
@@ -221,9 +221,9 @@ Calender View
display: flex;
flex-direction: row;
justify-content: space-between;
height: 25px;
width: 500px;
gap: 2px;
height: 60px;
width: 1000px;
gap: 5px;
background-color: #363636;
}
@@ -232,8 +232,8 @@ Calender View
/*
Test
*/
width: 500px;
height: 965px;
width: 1000px;
height: 2400px;
/*
End Test
*/
@@ -242,29 +242,29 @@ Calender View
flex-direction: row;
align-items: stretch;
justify-content: stretch;
gap: 2px;
gap: 5px;
user-select: none;
padding: 2px 0 0 0;
}
.calender-view .spalte
{
border-radius: 5px;
width: 100px;
border-radius: 10px;
width: 400px;
background-color: white;
display: grid;
padding: 0 1.5px;
padding: 0 3px;
grid-template-columns: 100%;
grid-template-rows: repeat(96, 10px);
grid-template-rows: repeat(96, 25px);
}
.wochen-tag-container .wochen-tag
{
text-align: center;
background-color: #f80000;
width: 100px;
width: 400px;
color: white;
border-radius: 5px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
@@ -276,7 +276,7 @@ Calender View
.entry
{
background-color: #f80000;
border-radius: 5px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -298,7 +298,7 @@ Calender View
.entry p
{
color: white;
font-size: 6px;
font-size: 16px;
cursor: default;
pointer-events: none;
}