Scherm van afspraak toevoegen verder aangepast

Author: klascal

index.html

@@ -413,26 +413,41 @@ <h2>Afspraak toevoegen</h2>
             <input type="text" id="custTitle" placeholder=" " required />
             <label for="custTitle">Titel</label>
           </div>
-          <div class="les dates">
-            <div class="material-textfield">
-              <input type="text" id="custLocation" placeholder=" " required />
-              <label for="custLocation">Locatie</label>
+          <div class="material-textfield">
+            <input type="text" id="custContent" placeholder=" " />
+            <label for="custContent">Omschrijving</label>
+          </div>
+          <div style="display: flex; padding: 0">
+            <div
+              class="material-textfield"
+              style="
+                flex: 1;
+                background: none;
+                border-right: 2px solid var(--primary-background);
+                border-radius: 0;
+                margin-bottom: 0;
+              "
+            >
+              <input id="custLocation" placeholder=" " required />
+              <label for="custLocation">Lokaal</label>
             </div>
-
-            <div class="material-textfield">
-              <input type="text" id="custTeacher" placeholder=" " required />
+            <div
+              class="material-textfield"
+              style="
+                flex: 1;
+                background: none;
+                border-right: 2px solid var(--primary-background);
+                border-radius: 0;
+                margin-bottom: 0;
+              "
+            >
+              <input id="custTeacher" placeholder=" " required />
               <label for="custTeacher">Docent</label>
             </div>
-          </div>
-
-          <div class="material-textfield">
-            <input type="text" id="custGroup" placeholder=" " required />
-            <label for="custGroup">Groep</label>
-          </div>
-
-          <div class="material-textfield">
-            <input type="text" id="custContent" placeholder=" " />
-            <label for="custContent">Inhoud</label>
+            <div class="material-textfield" style="flex: 1; background: none">
+              <input id="custGroup" placeholder=" " required />
+              <label for="custGroup">Klas</label>
+            </div>
           </div>
 
           <div class="switch switch--2">
@@ -444,11 +459,6 @@ <h2>Afspraak toevoegen</h2>
             <small></small>
           </div>
 
-          <div class="material-textfield">
-            <input type="date" id="custDate" placeholder=" " required />
-            <label for="custTitle">Datum</label>
-          </div>
-
           <div style="display: flex; padding: 0">
             <div
               class="material-textfield"
@@ -457,6 +467,20 @@ <h2>Afspraak toevoegen</h2>
                 background: none;
                 border-right: 2px solid var(--primary-background);
                 border-radius: 0;
+                margin-bottom: 0;
+              "
+            >
+              <input type="date" id="custDate" placeholder=" " required />
+              <label for="custDate">Datum</label>
+            </div>
+            <div
+              class="material-textfield"
+              style="
+                flex: 1;
+                background: none;
+                border-right: 2px solid var(--primary-background);
+                border-radius: 0;
+                margin-bottom: 0;
               "
             >
               <input
@@ -466,7 +490,7 @@ <h2>Afspraak toevoegen</h2>
                 placeholder=" "
                 required
               />
-              <label for="custTitle">Starttijd</label>
+              <label for="custStart">Starttijd</label>
             </div>
             <div class="material-textfield" style="flex: 1; background: none">
               <input
@@ -476,7 +500,7 @@ <h2>Afspraak toevoegen</h2>
                 placeholder=" "
                 required
               />
-              <label for="custTitle">Eindtijd</label>
+              <label for="custEnd">Eindtijd</label>
             </div>
           </div>
         </section>
@@ -494,6 +518,7 @@ <h2>Afspraak toevoegen</h2>
           style="
             background: var(--primary-foreground);
             color: var(--primary-light);
+            margin-right: 8px;
           "
           commandfor="customAppointments"
           command="close"

style.css

@@ -487,8 +487,7 @@ details strong {
 #schedule .les.clicked {
   filter: brightness(1.15);
 }
-#info .les,
-#customAppointments .les {
+#info .les {
   padding: 0px 10px;
   min-height: var(--height);
   position: relative;
@@ -508,19 +507,9 @@ details strong {
   cursor: default;
   padding: 0;
 }
-.dates .material-textfield label {
-  left: 0;
-}
 dialog.right #content {
   max-height: calc(100vh - 113px);
 }
-#customAppointments .dates {
-  padding: 12px;
-  gap: 8px;
-}
-#customAppointments .dates .material-textfield {
-  padding: 0;
-}
 #schedule section {
   position: relative;
 }
@@ -1170,10 +1159,10 @@ dialog.right #content {
 }
 #customAppointments,
 #customAppointments #content {
-  width: 250px;
+  width: 387px;
 }
 #customAppointments .switch {
-  width: 218px;
+  width: 355px;
 }
 #addCustomAppointment {
   position: fixed;
@@ -1223,6 +1212,11 @@ dialog.right #content {
     display: none !important;
   }
 }
+@media (max-width: 445px) {
+  #custDate {
+    width: 5rem !important;
+  }
+}
 @media (max-width: 395px) {
   #announcementsButton {
     display: none !important;