From 1b99dd8a3c6bded1d8db63515a29ba37e1ed75ec Mon Sep 17 00:00:00 2001
From: Johannes <johannes@mathebau.de>
Date: Fri, 7 Jul 2023 22:11:52 +0200
Subject: [PATCH] ui: style select inputs for timetable

---
 templating/templates/index.html | 48 +++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/templating/templates/index.html b/templating/templates/index.html
index 76bf092..5d26189 100644
--- a/templating/templates/index.html
+++ b/templating/templates/index.html
@@ -10,24 +10,38 @@ Sprechstunden
 
 {{define "content"}}
 <form method="GET" action="/getByCourse">
-  <label for="veranstaltung">Veranstaltung: </label>
-  <select name="veranstaltung" id="veranstaltung" size="1" onchange="document.forms[0].submit()">
-    <option value="">Alle</option>
-    {{range $course := .Courses}}
-    <option value="{{$course.Id}}"{{if eq $course.Id $.SelectedCourse}} selected{{end}}>{{$course.Name}}</option>
-    {{end}}
-  </select>
-  <input type="submit" value="Auswählen">
+  <div class="input-group mb-3">
+    <div class="form-floating col-lg-8">
+      <select class="form-control form-select" name="veranstaltung" id="veranstaltung" size="1" onchange="document.forms[0].submit()">
+        <option value="">–– auswählen ––</option>
+        {{range $course := .Courses}}
+        <option value="{{$course.Id}}"{{if eq $course.Id $.SelectedCourse}} selected{{end}}>{{$course.Name}}</option>
+        {{end}}
+      </select>
+      <label for="veranstaltung">Veranstaltung</label>
+    </div>
+    <noscript>
+      <button class="btn btn-sm btn-outline-secondary col-lg-4" type="submit">Los!</button>
+    </noscript>
+  </div>
 </form>
 <form method="GET" action="/getByRoom">
-  <label for="raum">Raum: </label>
-  <select name="raum" id="raum" size="1" onchange="document.forms[1].submit()">
-    <option value="">Alle</option>
-    {{range $room := .Rooms}}
-    <option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option>
-    {{end}}
-  </select>
-  <input type="submit" value="Auswählen">
+  <div class="input-group mb-3">
+    <div class="form-floating">
+      <select class="form-control form-select" name="raum" id="raum" size="1" onchange="document.forms[1].submit()">
+        <option value="">–– auswählen ––</option>
+        {{range $room := .Rooms}}
+        <option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option>
+        {{end}}
+      </select>
+      <label for="raum">Raum</label>
+    </div>
+    <noscript>
+      <button class="btn btn-outline-secondary col-lg-4" type="submit">Los!</button>
+    </noscript>
+  </div>
 </form>
-{{.Timetable}}
+<div id="timetable" style="overflow-x: scroll;">
+  {{.Timetable}}
+</div>
 {{end}}