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

Calender View Einheitliche Ränder

Browse Source
This commit is contained in:
brausjonas
2023-05-05 18:49:02 +02:00
parent 54394cc726
commit 9d05046106
3 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/CalenderView.jsx
+23 -15
View File
@@ -99,13 +99,10 @@ export default function CalenderView(p) {
current = null; current = null;
} }
if(current != null) if (current != null) {
{
let temp = [] let temp = []
for(let i = 0; i < current_list.length; i++) for (let i = 0; i < current_list.length; i++) {
{ if (current_list[i] !== current) {
if(current_list[i] !== current)
{
temp.push(current_list[i]); temp.push(current_list[i]);
} }
} }
@@ -183,15 +180,22 @@ export default function CalenderView(p) {
return integer + ":" + minutes_string; return integer + ":" + minutes_string;
} }
let temp = []
for (let i = 0; i < 96; i++) {
temp.push(i);
}
return ( return (
<div id={t}> <div id={t} style={{border: "2px solid #363636", borderRadius: 5}}>
<div className={"wochen-tag-container"}> <div style={{backgroundColor: "#363636"}}>
<div className={"wochen-tag font-small"}>Montag</div> <div className={"wochen-tag-container"}>
<div className={"wochen-tag font-small"}>Dienstag</div> <div className={"wochen-tag font-small"}>Montag</div>
<div className={"wochen-tag font-small"}>Mittwoch</div> <div className={"wochen-tag font-small"}>Dienstag</div>
<div className={"wochen-tag font-small"}>Donnerstag</div> <div className={"wochen-tag font-small"}>Mittwoch</div>
<div className={"wochen-tag font-small"}>Freitag</div> <div className={"wochen-tag font-small"}>Donnerstag</div>
<div className={"wochen-tag font-small"}>Samstag</div> <div className={"wochen-tag font-small"}>Freitag</div>
<div className={"wochen-tag font-small"}>Samstag</div>
</div>
</div> </div>
<div className={"calender-container"}> <div className={"calender-container"}>
<div className={"calender-view"}> <div className={"calender-view"}>
@@ -202,7 +206,9 @@ export default function CalenderView(p) {
{entries["mo"].map(d => (<div className={"entry"} style={{ {entries["mo"].map(d => (<div className={"entry"} style={{
width: "100%", width: "100%",
gridRowStart: d.start_point, gridRowStart: d.start_point,
gridRowEnd: d.end_point gridRowEnd: d.end_point,
gridColumnStart: 0,
gridColumnEnd: 0
}} id={"entry"}> }} id={"entry"}>
<div className={"resize-grab"} id={"grab"}></div> <div className={"resize-grab"} id={"grab"}></div>
<p>{internal_to_time(d.start_point)}</p> <p>{internal_to_time(d.start_point)}</p>
@@ -287,6 +293,8 @@ export default function CalenderView(p) {
</div>))} </div>))}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) )
anwendung/src/pages/index.js
+2 -1
View File
@@ -17,8 +17,9 @@ export default function Home(p) {
return ( return (
<> <>
<div style={{height: 100}}></div> <div style={{height: 50}}></div>
<CalenderView/> <CalenderView/>
<PopUp/>
</> </>
) )
anwendung/src/styles/globals.css
+9 -8
View File
@@ -186,11 +186,14 @@ Popup
Calender View Calender View
*/ */
::-webkit-scrollbar {
display: none;
}
.calender-container .calender-container
{ {
max-height: 300px; max-height: 300px;
overflow-y: scroll; overflow-y: scroll;
border-bottom: 2px solid #5d606e;
} }
.wochen-tag-container .wochen-tag-container
@@ -198,11 +201,10 @@ Calender View
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-right: 1.5%;
height: 25px; height: 25px;
background-color: #5d606e; width: 500px;
border: 2px solid #5d606e; gap: 2px;
border-radius: 5px 5px 0 0; background-color: #363636;
} }
.calender-view .calender-view
@@ -215,13 +217,12 @@ Calender View
/* /*
End Test End Test
*/ */
background-color: #5d606e; background-color: #363636;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
gap: 2px; gap: 2px;
padding: 0 2px 0 2px;
user-select: none; user-select: none;
} }
@@ -239,7 +240,7 @@ Calender View
{ {
text-align: center; text-align: center;
background-color: #f80000; background-color: #f80000;
width: 16%; width: 100px;
color: white; color: white;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;