From f8ba522dd9d00d96333b98607deb8101cfc78384 Mon Sep 17 00:00:00 2001
From: Christoph <churl100@hhu.de>
Date: Fri, 17 Apr 2020 22:23:50 +0200
Subject: [PATCH] better responsive design for edit

---
 src/main/resources/templates/edit.html   | 71 ++++++++++++------------
 src/main/resources/templates/search.html |  8 +--
 2 files changed, 41 insertions(+), 38 deletions(-)

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