1

better responsive design for details

This commit is contained in:
Christoph
2020-04-17 21:11:02 +02:00
parent 95272075d4
commit 83671a0d26
3 changed files with 44 additions and 20 deletions

View File

@ -11,32 +11,56 @@
<main th:fragment="bodycontent">
<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>
<div class="row">
<div class="d-flex flex-row flex-wrap mr-n4 mt-n2">
<!--Gruppendetails-->
<div class="col-9 px-0">
<div class="flex-grow-1 mr-4 mt-2" style="flex-basis: 65%;">
<div class="content" th:insert="~{fragments/groups :: groupcontent}"></div>
<div class="content overflow-hidden" th:insert="~{fragments/groups :: groupcontent}"></div>
<div class="content">
<!--Integrationen-->
<div class="d-flex flex-wrap mr-n2">
<!--Materialsammlung-->
<div class="content flex-grow-1 mr-2">
</div>
<!--Foren-->
<div class="content flex-grow-1 mr-2">
</div>
<!--Termine-->
<div class="content flex-grow-1 mr-2">
</div>
<!--Modulhandbuch-->
<div class="content flex-grow-1 mr-2">
</div>
</div>
<div class="content overflow-hidden">
<!--Button-Bar-->
<div class="row">
<a class="btn btn-primary" href="/gruppen2">Fertig</a>
<div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
<a class="btn btn-primary flex-grow-1 mr-2 mt-2" style="max-width: 250px;" href="/gruppen2">Fertig</a>
<!--Spacer-->
<span class="col"></span>
<form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
<button class="btn btn-danger btn-bar" type="submit">Gruppe verlassen
</button>
</form>
<div class="ml-auto mr-2 mt-2 flex-grow-1" style="max-width: 250px;">
<form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
<button class="btn btn-danger w-100" type="submit">
Gruppe verlassen
</button>
</form>
</div>
</div>
</div>
</div>
<!--Teilnehmerliste-->
<div class="col-3 def-cursor">
<div class="def-cursor flex-grow-1 mr-4 mt-2 mw-100 overflow-hidden">
<!--Anzahl Text-->
<div class="mb-2">
<span>Teilnehmer: </span>
@ -56,13 +80,12 @@
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between"
th:each="member : ${group.getMembers()}">
<span th:text="${member.format()}"></span>
<span th:replace="~{fragments/groups :: userbadges}"></span>
<span class="overflow-hidden" th:text="${member.format()}"></span>
<span class="overflow-hidden" th:replace="~{fragments/groups :: userbadges}"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>

View File

@ -88,12 +88,13 @@
</div>
</div>
<!--Export + Log-->
<div class="content">
<div class="content-heading">
<span>Event-Historie</span>
</div>
<div class="row">
<a class="btn btn-primary btn-bar"
<a class="btn btn-primary"
th:href="@{/gruppen2/details/{id}/history(id=${group.getId()})}">Event-Log</a>
<!--Spacer-->

View File

@ -36,7 +36,7 @@
<th:block th:fragment="groupcontent">
<!--Badges-->
<div class="content-heading">
<div class="content-heading overflow-hidden">
<span th:replace="~{fragments/groups :: badges}"></span>
</div>