ui: nice layout #18

Manually merged
johannes merged 13 commits from ui/enhance-layout into main 2023-07-10 11:37:13 +00:00
Showing only changes of commit 12f394a122 - Show all commits

View file

@ -17,8 +17,30 @@
content: ' *'; content: ' *';
color: red; color: red;
} }
.form-control ~ .form-text {
padding-left: 12px;
}
</style> </style>
<form method="POST" action="addOfficeHour"> <div class="row">
<div class="col-lg-8 mb-4">
<form method="POST" action="addOfficeHour">
<div class="form-floating mb-3">
<input class="form-control required" required name="name" id="name" type="text" value="{{.Name}}" placeholder="">
<label for="name">Name</label>
</div>
<div class="form-floating mb-3">
<input class="form-control required" required name="email" id="email" type="email" value="{{.Email}}" placeholder="">
<label for="email">Email-Adresse</label>
<div class="form-text">
{{if ne .Config.Tutor.MailSuffix ""}}
Du musst hier eine Email-Adresse angeben, die auf „{{.Config.Tutor.MailSuffix}}“ endet.<br />
{{end}}
Die Email-Adresse dient der Vermeidung von Spam und wird nicht veröffentlicht.
</div>
</div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<select class="form-control form-select required" required name="veranstaltung" id="veranstaltung"> <select class="form-control form-select required" required name="veranstaltung" id="veranstaltung">
{{range $course := .Courses}} {{range $course := .Courses}}
@ -36,7 +58,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<select class="form-select required" required name="woche" id="woche"> <select class="form-control form-select required" required name="woche" id="woche">
<option value="0"{{if eq 0 $.Date.Week}} selected{{end}}>Jede</option> <option value="0"{{if eq 0 $.Date.Week}} selected{{end}}>Jede</option>
<option value="1"{{if eq 1 $.Date.Week}} selected{{end}}>Ungerade</option> <option value="1"{{if eq 1 $.Date.Week}} selected{{end}}>Ungerade</option>
<option value="2"{{if eq 2 $.Date.Week}} selected{{end}}>Gerade</option> <option value="2"{{if eq 2 $.Date.Week}} selected{{end}}>Gerade</option>
@ -48,7 +70,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<select class="form-select required" required name="tag" id="tag"> <select class="form-control form-select required" required name="tag" id="tag">
<option value="0"{{if eq 0 $.Date.Day}} selected{{end}}>Montag</option> <option value="0"{{if eq 0 $.Date.Day}} selected{{end}}>Montag</option>
<option value="1"{{if eq 1 $.Date.Day}} selected{{end}}>Dienstag</option> <option value="1"{{if eq 1 $.Date.Day}} selected{{end}}>Dienstag</option>
<option value="2"{{if eq 2 $.Date.Day}} selected{{end}}>Mittwoch</option> <option value="2"{{if eq 2 $.Date.Day}} selected{{end}}>Mittwoch</option>
@ -87,7 +109,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<select class="form-select required" required name="raum" id="raum"> <select class="form-control form-select required" required name="raum" id="raum">
{{range $room := .Rooms}} {{range $room := .Rooms}}
<option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option> <option value="{{$room.Id}}"{{if eq $room.Id $.SelectedRoom}} selected{{end}}>{{$room.Name}}</option>
{{end}} {{end}}
@ -106,32 +128,30 @@
</div> </div>
</div> </div>
<div class="form-floating mb-3">
<input class="form-control required" required name="name" id="name" type="text" value="{{.Name}}" placeholder="">
<label for="name">Name</label>
</div>
<div class="form-floating mb-3">
<input class="form-control required" required name="email" id="email" type="email" value="{{.Email}}" placeholder="">
<label for="email">Email-Adresse</label>
{{if ne .Config.Tutor.MailSuffix ""}}
<div class="form-text">
Du musst hier eine Email-Adresse angeben, die auf „{{.Config.Tutor.MailSuffix}}“ endet.<br>
</div>
{{end}}
</div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input class="form-control" name="info" id="info" type="text" value="{{.Info}}" placeholder="" required> <input class="form-control" name="info" id="info" type="text" value="{{.Info}}" placeholder="" required>
<label for="info">Info</label> <label for="info">Info</label>
</div> </div>
<input class="btn btn-primary" type="submit"> <button class="btn btn-primary" type="submit">Sprechstunde erstellen</button>
</form> </form>
Außerdem dürfen in Räumen nur begrenzt viele Sprechstunden gleichzeitig stattfinden, nämlich </div>
<dl> <div class="col-lg-4">
<p>
Beachte, dass in den Arbeitsrräumen nur begrenzt viele Sprechstunden gleichzeitig stattfinden dürfen.
Das Formular wird dich warnen, falls du versuchst deine Sprechstunde in einem zu vollen Raum anzulegen.
</p>
<ul class="list-group">
{{range $room := .Rooms}} {{range $room := .Rooms}}
<dt>{{$room.Name}}</dt> <li class="list-group-item d-flex justify-content-between align-items-center">
<dd>{{$room.MaxOccupy}} Sprechstunde{{if gt $room.MaxOccupy 1}}n{{end}}</dd> {{$room.Name}}
<span class="badge bg-secondary rounded-pill">
{{$room.MaxOccupy}} Sprechstunde{{if gt $room.MaxOccupy 1}}n{{end}}
</span>
</li>
{{end}} {{end}}
</dl> </ul>
</div>
</div>
{{end}} {{end}}