From 59e9b3432422ec26bc67efcc5f2dcbd7f3a66695 Mon Sep 17 00:00:00 2001
From: Christoph <churl100@hhu.de>
Date: Fri, 17 Apr 2020 21:28:21 +0200
Subject: [PATCH] better responsive design for search

---
 .../resources/templates/fragments/groups.html |  4 +--
 src/main/resources/templates/index.html       | 11 +++++---
 src/main/resources/templates/search.html      | 26 +++++++++----------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/main/resources/templates/fragments/groups.html b/src/main/resources/templates/fragments/groups.html
index bdea713..f1fe02d 100644
--- a/src/main/resources/templates/fragments/groups.html
+++ b/src/main/resources/templates/fragments/groups.html
@@ -49,14 +49,14 @@
 </th:block>
 
 <th:block th:fragment="groupcontentlink">
-    <div class="content-heading row">
+    <div class="content-heading row overflow-hidden">
         <a class="link col" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}"
            th:text="${group.getTitle()}"></a>
 
         <span th:replace="~{fragments/groups :: badges}"></span>
     </div>
 
-    <div class="content-text-in">
+    <div class="content-text-in overflow-hidden" style="text-overflow: ellipsis;">
         <span th:text="${group.getDescription()}"></span>
     </div>
 </th:block>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 35e6587..10deac9 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -11,23 +11,26 @@
 <main th:fragment="bodycontent">
     <div class="container-fluid">
 
-        <h1 class="def-cursor">Meine Gruppen</h1>
+        <h1 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Meine Gruppen</h1>
 
         <!--Gruppenliste belegte Gruppen-->
         <div th:unless="${lectures.isEmpty()}">
-            <h3 class="def-cursor">Veranstaltungen</h3>
+            <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">
+                Veranstaltungen</h3>
             <div class="content" th:each="group: ${lectures}"
                  th:insert="fragments/groups :: groupcontentlink"></div>
         </div>
 
         <div th:unless="${publics.isEmpty()}">
-            <h3 class="def-cursor">Öffentliche Gruppen</h3>
+            <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Öffentliche
+                                                                                    Gruppen</h3>
             <div class="content" th:each="group: ${publics}"
                  th:insert="fragments/groups :: groupcontentlink"></div>
         </div>
 
         <div th:unless="${privates.isEmpty()}">
-            <h3 class="def-cursor">Private Gruppen</h3>
+            <h3 class="def-cursor overflow-hidden" style="text-overflow: ellipsis;">Private
+                                                                                    Gruppen</h3>
             <div class="content" th:each="group: ${privates}"
                  th:insert="fragments/groups :: groupcontentlink"></div>
         </div>
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
index 70163e9..4118057 100644
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@@ -17,29 +17,29 @@
         <h1>Suchen</h1>
 
         <!--Suchfilter-->
-        <div class="content top">
+        <div class="content top overflow-hidden">
             <form method="post" th:action="@{/gruppen2/search/string}">
-                <div class="row mb-3">
-                    <div class="input-group col mr-2">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text text-monospace">Suchbegriff:</span>
+                <div class="d-flex flex-row flex-wrap mr-n2 mt-n2">
+                    <div class="input-group mr-2 mt-2 flex-grow-1" style="flex-basis: 75%;">
+                        <div class="input-group-prepend" style="max-width: 50%;">
+                            <span class="input-group-text text-monospace overflow-hidden"
+                                  style="text-overflow: ellipsis">Suchbegriff:</span>
                         </div>
                         <input class="form-control" required minlength="1" name="string" type="text">
                     </div>
 
-                    <button class="btn btn-primary" type="submit">Suchen</button>
+                    <button class="btn btn-primary mr-2 mt-2 flex-grow-1" type="submit">Suchen
+                    </button>
                 </div>
             </form>
 
-            <div class="row">
-                <a class="btn btn-info" th:href="@{/gruppen2/search/all}">Alle Anzeigen</a>
+            <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>
 
-                <!--spacer-->
-                <span class="col"></span>
-
-                <a class="btn btn-info mr-2"
+                <a class="btn btn-info mt-2 mr-2 flex-grow-1"
                    th:href="@{/gruppen2/search/type/{type}(type=${LECTURE})}">Vorlesungen</a>
-                <a class="btn btn-info" type="submit"
+                <a class="btn btn-info mt-2 mr-2 flex-grow-1"
                    th:href="@{/gruppen2/search/type/{type}(type=${PUBLIC})}">Öffentliche Gruppen</a>
             </div>
         </div>