christoph/lecture-professional-software-development
1
Fork 0
Code Activity

better responsive design for create

Browse Source
This commit is contained in:
Christoph
2020-04-17 21:50:16 +02:00
parent 59e9b34324
commit 01b0f2b52d
3 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/resources/templates/create.html
View File

@ -11,11 +11,12 @@
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container"> <div class="container">
<h1 class="def-cursor">Neue Gruppe</h1> <h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Neue Gruppe</h1>
<form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create}"> <div class="content overflow-hidden">
<div class="content"> <form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create}">
<h3 class="def-cursor">Eigenschaften:</h3> <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">
Eigenschaften:</h3>
<!--Titel + Beschreibung--> <!--Titel + Beschreibung-->
<div class="content-text" th:insert="~{fragments/forms :: meta}"></div> <div class="content-text" th:insert="~{fragments/forms :: meta}"></div>
@ -24,21 +25,21 @@
<div class="content-text-in"> <div class="content-text-in">
<!--Gruppentyp--> <!--Gruppentyp-->
<div th:replace="~{fragments/forms :: grouptype}"></div> <div th:insert="~{fragments/forms :: grouptype}"></div>
<!--Benutzerlimit--> <!--Benutzerlimit-->
<div th:replace="~{fragments/forms :: userlimit}"></div> <div class="mt-2" th:insert="~{fragments/forms :: userlimit}"></div>
</div> </div>
<!--CSV Import--> <!--CSV Import-->
<div class="content-text mb-0" th:insert="~{fragments/forms :: csvimport}"></div> <div class="content-text mb-0" th:insert="~{fragments/forms :: csvimport}"></div>
</div> </div>
<div class="content"> <div class="content">
<!--Submit--> <!--Submit-->
<button class="btn btn-primary btn-block" type="submit">Gruppe Erstellen</button> <button class="btn btn-primary btn-block" type="submit">Gruppe Erstellen</button>
</div> </form>
</form> </div>
</div> </div>
</main> </main>

26
src/main/resources/templates/fragments/forms.html
View File

@ -12,7 +12,7 @@
<!--Gruppentitel--> <!--Gruppentitel-->
<div class="input-group mb-2" <div class="input-group mb-2"
title="Ein Gruppentitel zwischen 4 und 128 Zeichen. Der Titel ist öffentlich."> title="Ein Gruppentitel zwischen 4 und 128 Zeichen. Der Titel ist öffentlich.">
<div class="input-group-prepend"> <div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Gruppentitel:</span> <span class="input-group-text text-monospace">Gruppentitel:</span>
</div> </div>
<input type="text" class="form-control" name="title" minlength="4" maxlength="128" <input type="text" class="form-control" name="title" minlength="4" maxlength="128"
@ -23,7 +23,7 @@
<!--Gruppenbeschreibung--> <!--Gruppenbeschreibung-->
<div class="input-group" <div class="input-group"
title="Eine kurze Gruppenbeschreibung zwischen 4 und 512 Zeichen. Die Beschreibung ist öffentlich."> title="Eine kurze Gruppenbeschreibung zwischen 4 und 512 Zeichen. Die Beschreibung ist öffentlich.">
<div class="input-group-prepend"> <div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Beschreibung:</span> <span class="input-group-text text-monospace">Beschreibung:</span>
</div> </div>
<textarea class="form-control" name="description" minlength="4" maxlength="512" <textarea class="form-control" name="description" minlength="4" maxlength="512"
@ -34,8 +34,8 @@
<!--Gruppentyp--> <!--Gruppentyp-->
<th:block th:fragment="grouptype"> <th:block th:fragment="grouptype">
<label for="grouptype">Gruppentyp:</label> <label for="grouptype">Gruppentyp:</label>
<div class="btn-toolbar row mb-2 mx-0" id="grouptype"> <div class="btn-toolbar mt-n2 mr-n2 d-flex flex-row flex-wrap overflow-hidden" id="grouptype">
<div class="btn-group btn-group-toggle col-sm-4 px-0" data-toggle="buttons"> <div class="btn-group btn-group-toggle flex-grow-1 mt-2 mr-2" style="flex-basis: 10%;" data-toggle="buttons">
<label class="btn btn-secondary active" onclick="enable('#parentselect'); disable('#parentdummy')"> <label class="btn btn-secondary active" onclick="enable('#parentselect'); disable('#parentdummy')">
<input type="radio" name="type" value="PRIVATE" checked> Privat <input type="radio" name="type" value="PRIVATE" checked> Privat
</label> </label>
@ -48,9 +48,9 @@
</label> </label>
</div> </div>
<div class="input-group col-sm-8 pr-0" <div class="input-group flex-grow-1 mt-2 mr-2"
title="Optional kann eine Veranstaltungszugehörigkeit festgelegt werden."> title="Optional kann eine Veranstaltungszugehörigkeit festgelegt werden.">
<div class="input-group-prepend"> <div class="input-group-prepend overflow-hidden" style="max-width: 50%;">
<span class="input-group-text text-monospace">Gehört zu:</span> <span class="input-group-text text-monospace">Gehört zu:</span>
</div> </div>
<input type="hidden" id="parentdummy" name="parent" value="00000000-0000-0000-0000-000000000000" disabled> <input type="hidden" id="parentdummy" name="parent" value="00000000-0000-0000-0000-000000000000" disabled>
@ -66,10 +66,10 @@
<!--Userlimit--> <!--Userlimit-->
<th:block th:fragment="userlimit"> <th:block th:fragment="userlimit">
<label for="userlimit">Teilnehmeranzahl:</label> <label for="userlimit">Teilnehmeranzahl:</label>
<div class="btn-toolbar row mx-0" id="userlimit"> <div class="btn-toolbar mt-n2 mr-n2 d-flex flex-row flex-wrap" id="userlimit">
<input type="hidden" name="limit" id="limit" value="999999" <input type="hidden" name="limit" id="limit" value="999999"
th:disabled="${group != null && group.getLimit() < 999999} ? 'disabled' : 'false'"> th:disabled="${group != null && group.getLimit() < 999999} ? 'disabled' : 'false'">
<div class="btn-group btn-group-toggle col-sm-4 px-0" data-toggle="buttons"> <div class="btn-group btn-group-toggle flex-grow-1 mt-2 mr-2" style="flex-basis: 10%;" data-toggle="buttons">
<label class="btn btn-secondary active" onclick="disable('#limitselect'); enable('#limit')"> <label class="btn btn-secondary active" onclick="disable('#limitselect'); enable('#limit')">
<input type="radio" <input type="radio"
th:checked="${group != null && group.getLimit() < 999999} ? 'false' : 'checked'"> th:checked="${group != null && group.getLimit() < 999999} ? 'false' : 'checked'">
@ -82,17 +82,17 @@
</label> </label>
</div> </div>
<div class="input-group col-sm-8 pr-0" <div class="input-group flex-grow-1 mt-2 mr-2"
title="999999 ist die maximal zulässige Teilnehmerzahl. Ist diese Obergrenze erreicht, gilt die Gruppe als unbegrenzt."> title="999999 ist die maximal zulässige Teilnehmerzahl. Ist diese Obergrenze erreicht, gilt die Gruppe als unbegrenzt.">
<div class="input-group-prepend"> <div class="input-group-prepend overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace">Limit:</span> <span class="input-group-text text-monospace overflow-hidden">Limit:</span>
</div> </div>
<input type="number" class="form-control" name="limit" <input type="number" class="form-control" name="limit"
th:value="${group != null} ? ${group.getLimit()} : '999999'" th:value="${group != null} ? ${group.getLimit()} : '999999'"
min="1" max="999999" id="limitselect" required min="1" max="999999" id="limitselect" required
th:disabled="${group != null && group.getLimit() < 999999} ? 'false' : 'disabled'"> th:disabled="${group != null && group.getLimit() < 999999} ? 'false' : 'disabled'">
<div class="input-group-append"> <div class="input-group-append overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace">Teilnehmer</span> <span class="input-group-text text-monospace overflow-hidden">Teilnehmer</span>
</div> </div>
</div> </div>
</div> </div>

2
src/main/resources/templates/search.html
View File

@ -14,7 +14,7 @@
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container-fluid">
<h1>Suchen</h1> <h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Suchen</h1>
<!--Suchfilter--> <!--Suchfilter-->
<div class="content top overflow-hidden"> <div class="content top overflow-hidden">