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

better responsive design for edit

Browse Source
This commit is contained in:
Christoph
2020-04-17 22:23:50 +02:00
parent 01b0f2b52d
commit f8ba522dd9
2 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/main/resources/templates/edit.html
View File

@ -10,22 +10,20 @@
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container-fluid">
<h1 class="def-cursor" th:text="${group.getTitle()}"></h1> <h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;" th:text="${group.getTitle()}"></h1>
<!--Fertig oder löschen--> <!--Fertig oder löschen-->
<div class="content"> <div class="content">
<div class="row"> <div class="d-flex flex-row flex-wrap mt-n2 mr-n2">
<form method="get" th:action="@{/gruppen2/details/{id}(id=${group.getId()})}"> <a class="btn btn-primary flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
<button class="btn btn-primary">Fertig</button> th:href="@{/gruppen2/details/{id}(id=${group.getId()})}">Fertig</a>
</form>
<!--Spacer--> <div class="mt-2 mr-2 flex-grow-1 ml-auto" style="max-width: 250px;">
<span class="col"></span> <form method="post" th:action="@{/gruppen2/details/{id}/edit/destroy(id=${group.getId()})}">
<button class="btn btn-danger w-100" type="submit">Gruppe löschen
<form method="post" th:action="@{/gruppen2/details/{id}/edit/destroy(id=${group.getId()})}"> </button>
<button class="btn btn-danger btn-bar" type="submit">Gruppe löschen </form>
</button> </div>
</form>
</div> </div>
</div> </div>
@ -93,26 +91,23 @@
<div class="content-heading"> <div class="content-heading">
<span>Event-Historie</span> <span>Event-Historie</span>
</div> </div>
<div class="row"> <div class="d-flex flex-row flex-wrap mt-n2 mr-n2">
<a class="btn btn-primary" <a class="btn btn-primary mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
th:href="@{/gruppen2/details/{id}/history(id=${group.getId()})}">Event-Log</a> th:href="@{/gruppen2/details/{id}/history(id=${group.getId()})}">Event-Log</a>
<!--Spacer--> <a class="btn btn-info flex-grow-1 mt-2 mr-2 ml-auto" style="max-width: 250px;"
<span class="col"></span>
<a class="btn btn-info btn-bar mr-2"
th:href="@{/gruppen2/details/{id}/export/history/plain(id=${group.getId()})}" th:href="@{/gruppen2/details/{id}/export/history/plain(id=${group.getId()})}"
title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann beim erstellen importiert werden."> title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann beim erstellen importiert werden.">
Event-Log exportieren (TXT) Event-Log exportieren (TXT)
</a> </a>
<a class="btn btn-info btn-bar mr-2" <a class="btn btn-info flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
th:href="@{/gruppen2/details/{id}/export/history/sql(id=${group.getId()})}" th:href="@{/gruppen2/details/{id}/export/history/sql(id=${group.getId()})}"
title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann als data.sql verwendet werden."> title="Exportiert die gesamte Event-Historie dieser Gruppe. Kann als data.sql verwendet werden.">
Event-Log exportieren (SQL) Event-Log exportieren (SQL)
</a> </a>
<a class="btn btn-info btn-bar" <a class="btn btn-info flex-grow-1 mt-2 mr-2" style="max-width: 250px;"
th:href="@{/gruppen2/details/{id}/export/members(id=${group.getId()})}" th:href="@{/gruppen2/details/{id}/export/members(id=${group.getId()})}"
title="Exportiert die Teilnehmerliste. Kann beim erstellen (oder nachträglich) importiert werden."> title="Exportiert die Teilnehmerliste. Kann beim erstellen (oder nachträglich) importiert werden.">
Teilnehmer exportieren Teilnehmer exportieren
@ -121,29 +116,37 @@
</div> </div>
<!--Teilnehmerliste--> <!--Teilnehmerliste-->
<div class="content members"> <div class="content members overflow-hidden" style="max-width: 100%;">
<div class="content-heading"> <div class="content-heading">
<span>Teilnehmer</span> <span>Teilnehmer</span>
</div> </div>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item d-flex justify-content-between" th:each="member : ${group.getMembers()}"> <li class="list-group-item d-flex flex-row flex-wrap" th:each="member : ${group.getMembers()}">
<div> <div class="overflow-hidden ml-n2" style="max-width: 50%; text-overflow: ellipsis;">
<span th:text="${member.format()}"></span> <span class="overflow-hidden ml-2" th:text="${member.format()}"></span>
<span th:replace="~{fragments/groups :: userbadges}"></span> <span th:replace="~{fragments/groups :: userbadges}"></span>
</div> </div>
<div class="d-flex"> <div class="d-flex flex-row flex-wrap mt-n2 mr-n2 ml-auto" style="max-width: 50%;">
<form th:action="@{/gruppen2/details/{id}/edit/delete/{userid}(id=${group.getId()}, userid=${member.getId()})}" <div class="flex-grow-1 mt-2 mr-2"
th:unless="${member.getId() == account.getName()}" th:unless="${member.getId() == account.getName()}">
method="post"> <form th:action="@{/gruppen2/details/{id}/edit/delete/{userid}(id=${group.getId()}, userid=${member.getId()})}"
<button type="submit" class="btn btn-danger mr-2">Entfernen</button> method="post">
</form> <button type="submit" class="btn btn-danger w-100">
Entfernen
</button>
</form>
</div>
<form th:action="@{/gruppen2/details/{id}/edit/role/{userid}(id=${group.getId()}, userid=${member.getId()})}" <div class="flex-grow-1 mt-2 mr-2">
method="post"> <form th:action="@{/gruppen2/details/{id}/edit/role/{userid}(id=${group.getId()}, userid=${member.getId()})}"
<button type="submit" class="btn btn-warning">Rolle ändern</button> method="post">
</form> <button type="submit" class="btn btn-warning w-100">
Rolle ändern
</button>
</form>
</div>
</div> </div>
</li> </li>
</ul> </ul>

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

@ -34,12 +34,12 @@
</form> </form>
<div class="d-flex flex-row flex-wrap mt-1 mr-n2"> <div class="d-flex flex-row flex-wrap mt-1 mr-n2">
<a class="btn btn-info mt-2 mr-2 flex-grow-1" th:href="@{/gruppen2/search/all}"> <a class="btn btn-info mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
Alle Anzeigen</a> th:href="@{/gruppen2/search/all}">Alle Anzeigen</a>
<a class="btn btn-info mt-2 mr-2 flex-grow-1" <a class="btn btn-info mt-2 mr-2 flex-grow-1 ml-auto" style="max-width: 250px;"
th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a> th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a>
<a class="btn btn-info mt-2 mr-2 flex-grow-1" <a class="btn btn-info mt-2 mr-2 flex-grow-1" style="max-width: 250px;"
th:href="@{/gruppen2/search/type/{type}(type=${PUBLIC})}">Öffentliche Gruppen</a> th:href="@{/gruppen2/search/type/{type}(type=${PUBLIC})}">Öffentliche Gruppen</a>
</div> </div>
</div> </div>