ui: style deletion form

Had forgotten this page before...

controllers/timetable.go

@@ -55,9 +55,9 @@ func (b *BaseHandler) printTimetable(timetable map[models.Date]map[int]models.Of
 		for minute := 0; minute < 60; minute += b.config.Date.MinuteGranularity {
 			tableBody += "<tr>"
 			if minute == 0 {
-				tableBody += fmt.Sprintf("<td>%d Uhr</td>\n", hour)
+				tableBody += fmt.Sprintf("<td class=\"timetableRightBorder\">%d Uhr</td>\n", hour)
 			} else {
-				tableBody += "<td></td>\n"
+				tableBody += "<td class=\"timetableRightBorder\"></td>\n"
 			}
 			for day := 0; day < 5; day += 1 {
 				for slot := 0; slot < slots[day]; slot += 1 {
@@ -96,7 +96,7 @@ func (b *BaseHandler) printTimetable(timetable map[models.Date]map[int]models.Of
 						}
 					} else {
 						if slot+1 == slots[day] {
-							tableBody += "<td style=\"border-right: 1px dotted\"></td>\n"
+							tableBody += "<td class=\"timetableRightBorder\"></td>\n"
 						} else {
 							tableBody += "<td></td>\n"
 						}

static/officeHours.css

@@ -0,0 +1,17 @@
+/* mark required fields */
+input.required ~ label::after, select.required ~ label::after {
+	content: ' *';
+    color: red;
+}
+/* improve indent of help texts below form fields */
+.form-control ~ .form-text {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.timetableRightBorder {
+	border-right: 1px dotted;
+}
+td.officeHour {
+	border: 1px solid;
+}

templating/templates/addMask.html

@@ -14,17 +14,6 @@
   {{end}}
 </div>
 
-<style>
-  input.required ~ label::after, select.required ~ label::after {
-    content: ' *';
-    color: red;
-  }
-
-  .form-control ~ .form-text {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-</style>
 <div class="row">
   <div class="col-lg-8 mb-4">
     <form method="POST" action="addOfficeHour">

templating/templates/base.html

@@ -6,7 +6,8 @@
   <meta name="description" content="Eine Übersicht der Sprechstunden, die in den offenen Arbeitsräumen der Fachschaft Mathematik, TU Darmstadt, angeboten werden">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="/static/officeHours.css" />
 
   <title>{{block "title" .}}Start{{end}} – Sprechstunden</title>
 </head>

templating/templates/deleteMailForm.html

@@ -1,19 +1,31 @@
 {{define "title"}}Sprechstunde löschen{{end}}
 
 {{define "content"}}
-{{.Error}}
+<div class="col-md-8 offset-md-2">
+  {{ if .Error }}
+  <div class="alert alert-danger">
+    <strong>Fehler:</strong> {{.Error}}
+  </div>
+  {{ end }}
 
+  <p>
     Willst du die Sprechstunde<br>
     {{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
     {{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}
     {{.OfficeHour.Course.Name}}<br>
     {{.OfficeHour.Tutor.Name}}<br>
     {{.OfficeHour.Room.Name}}<br>
-wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde: <br>
+    wirklich löschen? Bitte bestätige dies durch Angabe der Mailadresse, mit der die Sprechstunde angelegt wurde:
+  </p>
   <form method="POST" action="deleteOfficeHour">
     <input type="hidden" name="id" value="{{.OfficeHour.Id}}">
-<label for="email">Email-Adresse</label>:
+    <div class="input-group">
-  <input name="email" id="email" type="email" size="50" required><br>
+      <div class="form-floating">
-  <input type="submit">
+        <input class="form-control required" name="email" id="email" type="email" size="50" required placeholder="">
+        <label for="email">Email-Adresse</label>
+      </div>
+        <button class="btn btn-outline-primary" type="submit">Bestätigen</button>
+    </div>
   </form>
+</div>
 {{end}}

templating/templates/officeHourTable.html

@@ -1,11 +1,11 @@
-<table>
+<table class="mx-auto">
   <tr>
-    <th>&nbsp;</th>
+    <th class="px-2 text-center timetableRightBorder">&nbsp;</th>
-    <th colspan="{{.ColspanMon}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Montag</th>
+    <th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanMon}}">Montag</th>
-    <th colspan="{{.ColspanTue}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Dienstag</th>
+    <th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanTue}}">Dienstag</th>
-    <th colspan="{{.ColspanWed}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Mittwoch</th>
+    <th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanWed}}">Mittwoch</th>
-    <th colspan="{{.ColspanThu}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Donnerstag</th>
+    <th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanThu}}">Donnerstag</th>
-    <th colspan="{{.ColspanFri}}" style="padding-left: 10px; padding-right: 10px; border-right: 1px dotted">Freitag</th>
+    <th class="px-2 text-center timetableRightBorder" colspan="{{.ColspanFri}}">Freitag</th>
   </tr>
   {{.TableBody}}
 </table>

templating/templates/td.html

@@ -1,4 +1,4 @@
-<td rowspan="{{divide .OfficeHour.Duration .MinuteGranularity}}" style="border: 1px solid">
+<td class="officeHour" rowspan="{{divide .OfficeHour.Duration .MinuteGranularity}}">
   {{if .DeleteIcons}}<div style="text-align: right;"><a href="/deleteOfficeHour?id={{.OfficeHour.Id}}">❌</a></div>{{end}}
   {{printf "%02d" .OfficeHour.Date.Hour}}:{{printf "%02d" .OfficeHour.Date.Minute}} - {{printf "%02d" .OfficeHour.EndDate.Hour}}:{{printf "%02d" .OfficeHour.EndDate.Minute}}<br>
   {{if eq .OfficeHour.Date.Week 1}}in ungeraden Vorlesungswochen<br>{{end}}{{if eq .OfficeHour.Date.Week 2}}in geraden Vorlesungswochen<br>{{end}}