From 4a4601d1756b99aa8460c05bb0f8cc203c81bdd5 Mon Sep 17 00:00:00 2001
From: brausjonas <brausjonas@gmail.com>
Date: Fri, 5 May 2023 21:26:12 +0200
Subject: [PATCH] Calender Correct Scaling XD

---
 anwendung/src/components/CalenderView.jsx | 38 ++++++++++++-----------
 anwendung/src/styles/globals.css          | 36 ++++++++++-----------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx
index 6f8133e..91048af 100644
--- a/anwendung/src/components/CalenderView.jsx
+++ b/anwendung/src/components/CalenderView.jsx
@@ -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>
 
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css
index 30b0c69..a578fa0 100644
--- a/anwendung/src/styles/globals.css
+++ b/anwendung/src/styles/globals.css
@@ -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;
 }