From 2257f5061cc6be0ab836d55f2fae4c052d1a2e0c Mon Sep 17 00:00:00 2001
From: hyperbel <hyperbel@users.noreply.github.com>
Date: Tue, 24 Oct 2023 15:28:47 +0000
Subject: [PATCH] prettified dialog a bit :):

---
 party/static/css/session.css | 28 +++++++++++++++++-----------
 party/templates/session.html | 21 +++++++++++++--------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/party/static/css/session.css b/party/static/css/session.css
index bad13fd..42fcf87 100644
--- a/party/static/css/session.css
+++ b/party/static/css/session.css
@@ -265,15 +265,15 @@ font-weight: bold; /* Button hervorheben */
 }
 
 
-/* Neuer Stil für die versteckten Div-Elemente */
+/* Neuer Stil für die versteckten Div-Elemente
  .hidden-div {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 80%; /* Hier die gewünschte Breite eintragen */
-    max-height: 80%; /* Hier die gewünschte Höhe eintragen */
+    width: 80%; /* Hier die gewünschte Breite eintragen 
+    max-height: 80%; /* Hier die gewünschte Höhe eintragen 
     height: 80%;
     padding: 20px;
     background-color: #333;
@@ -281,6 +281,7 @@ font-weight: bold; /* Button hervorheben */
     border-radius: 10px;
     text-align: center;
 }
+*/
 
 /* Stil für den aktiven Button */
 .active-button {
@@ -302,8 +303,12 @@ td {
     border: 1px solid #555;
 }
 
-#event_form {
-    border: 2px solid #555;
+/* Planer */
+
+#planer dialog {
+    background-color: black;
+    border-radius: 5px;
+    border: 1px solid white;
 }
 
 #event_input{
@@ -324,20 +329,21 @@ td {
         color: rgb(220, 220, 210);
         border: 2px solid #555;
         outline: none;
+        margin-top: 5px;
 }
 
-#submit_button{
+.dialog_control {
     background-color: #454443;
     border-radius: 10px;
-    cursor: pointer;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 60%;
     border: none;
     padding: 10px;
     color: white;
     font-size: 16px;
+    margin-top: 5px;
+}
 
+.dialog_control:hover {
+    background-color: #333;
 }
 
 
@@ -446,7 +452,7 @@ cursor: pointer;
 }
 
 
-/* CSS für die Bearbeitungsbuttons beim planer */
+/* Planer */
 .button-wrapper {
     background: none;
     border: none;
diff --git a/party/templates/session.html b/party/templates/session.html
index 1875e71..ff3b8cb 100644
--- a/party/templates/session.html
+++ b/party/templates/session.html
@@ -91,14 +91,19 @@
             </tbody>
         </table>
 
-        <form id="event_form" action="/api/event/new" target='hiddenIFrame' method='post'>
-            <input id="event_input" type="text" name="Event" placeholder="Event Name" maxlength="20" minlength="1" required><br/>
-            <input id="event_time" type="datetime-local" id="meeting-time"
-               name="meeting-time" value="2023-12-31T12:00"
-                                   min="2023-12-31T00:00"
-                                   max="2024-01-01T18:00" required><br/>
-          <button id="submit_button" type="submit">Hinzufügen</button>
-        </form>
+        <button id="add_event_button" onclick="document.getElementById('new_event_form_dialog').open = true;">+</button>
+
+        <dialog id="new_event_form_dialog">
+            <form id="event_form" action="/api/event/new" target='hiddenIFrame' method='post'>
+                <input id="event_input" type="text" name="Event" placeholder="Event Name" maxlength="20" minlength="1" required><br/>
+                <input id="event_time" type="datetime-local" id="meeting-time"
+                   name="meeting-time" value="2023-12-31T12:00"
+                                       min="2023-12-31T00:00"
+                                       max="2024-01-01T18:00" required><br/>
+              <button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false" type="submit">Hinzufügen</button>
+              <button class="dialog_control" onclick="document.getElementById('new_event_form_dialog').open = false">Abbrechen</button>
+            </form>
+        </dialog>
 
         <iframe name='hiddenIFrame' id='hiddenIFrame' hidden></iframe>
     </section>