From bda952a308e7005b333dd5f1c0057afeb123b5b5 Mon Sep 17 00:00:00 2001
From: Christoph <tobi@urpost.de>
Date: Sat, 11 Apr 2020 01:02:02 +0200
Subject: [PATCH] search page refactor

---
 .../controller/SearchAndInviteController.java |   2 +-
 src/main/resources/data-h2.sql                |   8 +-
 src/main/resources/static/index.css           |   9 ++
 src/main/resources/static/search.css          |  20 ++++
 src/main/resources/static/style.css           |   6 --
 src/main/resources/templates/search.html      | 100 ++++++------------
 6 files changed, 65 insertions(+), 80 deletions(-)
 create mode 100644 src/main/resources/static/search.css

diff --git a/src/main/java/mops/gruppen2/controller/SearchAndInviteController.java b/src/main/java/mops/gruppen2/controller/SearchAndInviteController.java
index f8dd0fc..cd01234 100644
--- a/src/main/java/mops/gruppen2/controller/SearchAndInviteController.java
+++ b/src/main/java/mops/gruppen2/controller/SearchAndInviteController.java
@@ -57,7 +57,7 @@ public class SearchAndInviteController {
         User user = new User(token);
         List<Group> groups = searchService.searchPublicGroups(search, user);
 
-        model.addAttribute("gruppen", groups);
+        model.addAttribute("groups", groups);
 
         return "search";
     }
diff --git a/src/main/resources/data-h2.sql b/src/main/resources/data-h2.sql
index 56972bd..fbe687f 100644
--- a/src/main/resources/data-h2.sql
+++ b/src/main/resources/data-h2.sql
@@ -1,16 +1,16 @@
 INSERT INTO event
 VALUES (1, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '07FEA694', 'CreateGroupEvent',
         '{"type":"CreateGroupEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"07FEA694","groupParent":null,"groupType":"PUBLIC"}'),
-       (2, '2d90ae27-1129-4b61-84a5-6c7d585e777e', 'orga', 'AddUserEvent',
-        '{"type":"AddUserEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"orga","givenname":"Marcos","familyname":"Glover","email":"Marcos.Glover@mail.de"}'),
+       (2, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '2', 'AddUserEvent',
+        '{"type":"AddUserEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"2","givenname":"Marcos","familyname":"Glover","email":"Marcos.Glover@mail.de"}'),
 
        (3, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '2', 'UpdateUserLimitEvent',
         '{"type":"UpdateUserLimitEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"2","userLimit":"1000"}'),
 
        (4, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '5CFBF1AF', 'UpdateGroupTitleEvent',
-        '{"type":"UpdateGroupTitleEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"5CFBF1AF","newGroupTitle":"Zyra"}'),
+        '{"type":"UpdateGroupTitleEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"5CFBF1AF","newGroupTitle":"Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra"}'),
        (5, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '41E11CBC', 'UpdateGroupDescriptionEvent',
-        '{"type":"UpdateGroupDescriptionEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"41E11CBC","newGroupDescription":"Have you seen my Bear Tibbers?"}'),
+        '{"type":"UpdateGroupDescriptionEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"41E11CBC","newGroupDescription":"Have you seen my Bear Tibbers? Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyra Zyrav"}'),
        (6, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '3', 'AddUserEvent',
         '{"type":"AddUserEvent","groupId":"2d90ae27-1129-4b61-84a5-6c7d585e777e","userId":"3","givenname":"Antwan","familyname":"Smitham","email":"Antwan.Smitham@mail.de"}'),
        (7, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '4', 'AddUserEvent',
diff --git a/src/main/resources/static/index.css b/src/main/resources/static/index.css
index 09f5259..673787c 100644
--- a/src/main/resources/static/index.css
+++ b/src/main/resources/static/index.css
@@ -29,3 +29,12 @@
     margin-right: 0;
     box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25);
 }
+
+.float-right {
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.content:hover .float-right {
+    margin-right: 0;
+}
diff --git a/src/main/resources/static/search.css b/src/main/resources/static/search.css
new file mode 100644
index 0000000..11a5818
--- /dev/null
+++ b/src/main/resources/static/search.css
@@ -0,0 +1,20 @@
+.top {
+    padding: 10px 10px !important;
+    margin-bottom: 15px !important;
+}
+
+/*Grouplist Hover Effect*/
+.content {
+    margin-top: 5px;
+    padding: 5px 5px;
+}
+
+.content-heading {
+    margin-bottom: 5px;
+    transition: 100ms;
+}
+
+.content-text-in {
+    margin-bottom: 0;
+    padding: 5px;
+}
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 223a81f..55594bd 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -82,16 +82,10 @@
 
 /*Positioning*/
 .float-right {
-    margin-right: 10px;
-    margin-left: 10px;
     float: right;
     transition: 100ms;
 }
 
-.content:hover .float-right {
-    margin-right: 0;
-}
-
 /*Miscellanous*/
 .def-cursor {
     cursor: default;
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
index ccd8c52..4d1f8a9 100644
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@@ -1,80 +1,42 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{mopslayout :: html(name='Gruppenbildung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}">
-<head>
-    <meta charset="utf-8">
-    <title>Suche</title>
-    <th:block th:fragment="headcontent">
-        <!-- Links, Skripts, Styles hier einfügen! -->
-    </th:block>
-</head>
+<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
+    name='Gruppenbildung',
+    headcontent=~{fragments/general :: headcontent(style='/search.css')},
+    navigation=~{fragments/general :: nav(current='search')},
+    bodycontent=~{:: bodycontent})}">
+
 <body>
-<header>
-    <nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
-        <ul>
-            <li>
-                <a th:href="@{/gruppen2}">Gruppen</a>
-            </li>
-            <li>
-                <a th:href="@{/gruppen2/create}">Erstellen</a>
-            </li>
-            <li class="active">
-                <a th:href="@{/gruppen2/search}">Suche</a>
-            </li>
-        </ul>
-    </nav>
-</header>
+
 <main th:fragment="bodycontent">
+
     <div class="container-fluid">
-        <div class="row">
-            <div class="col-10">
-                <h1>Gruppensuche</h1>
-                <div class="shadow-sm p-2"
-                     style="border: 10px solid aliceblue; border-radius: 5px; background: aliceblue;">
-                    <form method="post" th:action="@{/gruppen2/search}">
-                        <div class="form-group">
-                            <label for="suchleiste">Suchbegriff:</label>
-                            <input class="form-control" id="suchleiste"
-                                   placeholder="z.B. Programmieren, Lerngruppe, ..."
-                                   th:name="string" type="text">
-                        </div>
-                        <button class="btn btn-primary" style="background: #52a1eb; border-style: none;" type="submit">
-                            Suchen
-                        </button>
-                    </form>
+
+        <h1>Suche</h1>
+
+        <div class="content top">
+            <form method="post" th:action="@{/gruppen2/search}">
+                <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                        <span class="input-group-text text-monospace">Suchbegriff:</span>
+                    </div>
+                    <input class="form-control" th:name="string" type="text">
                 </div>
-                <br>
-                <table class="table" th:if='${!gruppen.isEmpty()}'>
-                    <!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
-                    <thead>
-                    <tr>
-                        <th scope="col">Gruppenname</th>
-                        <th scope="col">Beschreibung</th>
-                        <th scope="col">Max. Mitgliederanzahl</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr th:each="gruppe : ${gruppen}" th:switch="${gruppe.getUserLimit() != 100000}">
-                        <th scope="row">
-                            <span class="badge badge-pill badge-success"
-                                  style="background: lightseagreen; margin-right: 25px;"
-                                  th:if='${gruppe.getType() == lecture}'>Veranstaltung</span>
-                            <a th:href="@{/gruppen2/details/{id}(id=${gruppe.getId()})}"
-                               th:text="${#strings.abbreviate(gruppe.getTitle(), 50)}">Gruppenname</a>
-                        </th>
-                        <td style="" th:text="${#strings.abbreviate(gruppe.getDescription(), 50)}">
-                            Beschreibung
-                        </td>
-                        <td th:case="${true}">
-                            <a th:text="${gruppe.getUserLimit()}"></a>
-                        </td>
-                        <td th:case="${false}">unbegrenzt</td>
-                    </tr>
-                    </tbody>
-                </table>
+                <button class="btn btn-primary" type="submit">Suchen</button>
+            </form>
+        </div>
+
+        <div class="content" th:each="group: ${groups}">
+            <div class="content-heading">
+                <a class="link" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}"
+                   th:text="${group.getTitle()}"></a>
+            </div>
+            <div class="content-text-in">
+                <span th:text="${group.getDescription()}"></span>
             </div>
         </div>
+
     </div>
 </main>
+
 </body>
 </html>