From 83671a0d26aff90b915ae3df488a9112dce929b3 Mon Sep 17 00:00:00 2001
From: Christoph <churl100@hhu.de>
Date: Fri, 17 Apr 2020 21:11:02 +0200
Subject: [PATCH] better responsive design for details

---
 src/main/resources/templates/details.html     | 59 +++++++++++++------
 src/main/resources/templates/edit.html        |  3 +-
 .../resources/templates/fragments/groups.html |  2 +-
 3 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/main/resources/templates/details.html b/src/main/resources/templates/details.html
index aa64206..ea3f8b4 100644
--- a/src/main/resources/templates/details.html
+++ b/src/main/resources/templates/details.html
@@ -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>
diff --git a/src/main/resources/templates/edit.html b/src/main/resources/templates/edit.html
index f93120b..a665a11 100644
--- a/src/main/resources/templates/edit.html
+++ b/src/main/resources/templates/edit.html
@@ -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-->
diff --git a/src/main/resources/templates/fragments/groups.html b/src/main/resources/templates/fragments/groups.html
index 51b35cc..bdea713 100644
--- a/src/main/resources/templates/fragments/groups.html
+++ b/src/main/resources/templates/fragments/groups.html
@@ -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>