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

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

@ -12,7 +12,7 @@
<!--Gruppentitel-->
<div class="input-group mb-2"
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>
</div>
<input type="text" class="form-control" name="title" minlength="4" maxlength="128"
@ -23,7 +23,7 @@
<!--Gruppenbeschreibung-->
<div class="input-group"
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>
</div>
<textarea class="form-control" name="description" minlength="4" maxlength="512"
@ -34,8 +34,8 @@
<!--Gruppentyp-->
<th:block th:fragment="grouptype">
<label for="grouptype">Gruppentyp:</label>
<div class="btn-toolbar row mb-2 mx-0" id="grouptype">
<div class="btn-group btn-group-toggle col-sm-4 px-0" data-toggle="buttons">
<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 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')">
<input type="radio" name="type" value="PRIVATE" checked> Privat
</label>
@ -48,9 +48,9 @@
</label>
</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.">
<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>
</div>
<input type="hidden" id="parentdummy" name="parent" value="00000000-0000-0000-0000-000000000000" disabled>
@ -66,10 +66,10 @@
<!--Userlimit-->
<th:block th:fragment="userlimit">
<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"
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')">
<input type="radio"
th:checked="${group != null && group.getLimit() < 999999} ? 'false' : 'checked'">
@ -82,17 +82,17 @@
</label>
</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.">
<div class="input-group-prepend">
<span class="input-group-text text-monospace">Limit:</span>
<div class="input-group-prepend overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace overflow-hidden">Limit:</span>
</div>
<input type="number" class="form-control" name="limit"
th:value="${group != null} ? ${group.getLimit()} : '999999'"
min="1" max="999999" id="limitselect" required
th:disabled="${group != null && group.getLimit() < 999999} ? 'false' : 'disabled'">
<div class="input-group-append">
<span class="input-group-text text-monospace">Teilnehmer</span>
<div class="input-group-append overflow-hidden" style="max-width: 25%">
<span class="input-group-text text-monospace overflow-hidden">Teilnehmer</span>
</div>
</div>
</div>

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

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