From eecfc0351fdcfe9d11ff451856c6fe4792f1da9f Mon Sep 17 00:00:00 2001
From: AndiBuls <andreas.buls@uni-duesseldorf.de>
Date: Mon, 16 Mar 2020 13:31:51 +0100
Subject: [PATCH] made ui look more consistent

---
 src/main/resources/templates/create.html | 62 +++++++++++++-----------
 src/main/resources/templates/index.html  |  6 +--
 src/main/resources/templates/search.html | 62 ++++++++++++------------
 3 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/src/main/resources/templates/create.html b/src/main/resources/templates/create.html
index 08c2b7e..f9084b8 100644
--- a/src/main/resources/templates/create.html
+++ b/src/main/resources/templates/create.html
@@ -26,37 +26,41 @@
     </nav>
 </header>
 <main th:fragment="bodycontent">
-    <h1>Gruppenerstellung</h1>
     <div class="container-fluid">
-        <form method="post" action="/gruppen2/createGroup">
-            <div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
-                <div class="form-group">
-                    <label for="titel">Titel</label>
-                    <input type="text" class="form-control" id="titel" th:name="title" required>
-                </div>
-                <div class="form-group">
-                    <label for="beschreibung">Beschreibung</label>
-                    <textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
-                </div>
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
-                    <label class="custom-control-label" for="visibility">Private Gruppe</label>
-                </div>
-                <div class="form-group">
-                    <label for="sel1"></label>
-                    <select class="form-control" id="sel1">
-                        <option selected="true" disabled>--Bitte Veranstaltung auswählen--</option>
-                        <option>1</option>
-                        <option>2</option>
-                        <option>3</option>
-                        <option>4</option>
-                    </select>
-                </div>
-                <div class="form-group pt-4">
-                    <button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
-                </div>
+        <div class="row">
+            <div class="col-10">
+                <h1>Gruppenerstellung</h1>
+                <form method="post" action="/gruppen2/createGroup">
+                    <div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
+                        <div class="form-group">
+                            <label for="titel">Titel</label>
+                            <input type="text" class="form-control" id="titel" th:name="title" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="beschreibung">Beschreibung</label>
+                            <textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                            <input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
+                            <label class="custom-control-label" for="visibility">Private Gruppe</label>
+                        </div>
+                        <div class="form-group">
+                            <label for="sel1"></label>
+                            <select class="form-control" id="sel1">
+                                <option selected="true" disabled>--Bitte Veranstaltung auswählen--</option>
+                                <option>1</option>
+                                <option>2</option>
+                                <option>3</option>
+                                <option>4</option>
+                            </select>
+                        </div>
+                        <div class="form-group pt-4">
+                            <button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
+                        </div>
+                    </div>
+                </form>
             </div>
-        </form>
+        </div>
     </div>
 </main>
 </body>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index f41f418..db3ee9d 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -26,12 +26,12 @@
 </header>
 <main th:fragment="bodycontent">
     <div class="container-fluid">
-        <div class="row" >
+        <div class="row">
             <div class="col-10">
                 <h1>Meine Gruppen</h1>
                 <form action="/" method="get">
                     <div th:each="gruppe: ${gruppen}">
-                        <div style="border: 10px solid aliceblue; background: aliceblue">
+                        <div class="shadow" style="border: 10px solid aliceblue; background: aliceblue">
                             <h3>
                                 <a th:href="@{/gruppen2/details(id=${gruppe.getId()})}" style="color: dodgerblue; font-weight: bold" th:text="${gruppe.getTitle()}"></a>
                             </h3>
@@ -41,7 +41,7 @@
                     </div>
                 </form>
             </div>
-            <div class="col-2" >
+            <div class="col-2">
                 <div class="card" style="background: lightgrey">
                     <div class="card-body">
                         <h2 class="card-title" th:text="${user.getUser_id()}" style="text-align: center">user_id</h2>
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
index 0a6e616..832d6c3 100644
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@@ -27,38 +27,38 @@
 <main th:fragment="bodycontent">
     <div class="container-fluid">
         <div class="row">
-            <h1>Gruppensuche</h1>
-                <div class="container-fluid">
-                    <form action="/gruppen2/findGroup" method="get">
-                        <div style="border: 10px solid aliceblue; background: aliceblue">
-                            <div class="form-group">
-                                <label for="suchleiste">Suchbegriff:</label>
-                                <input id="suchleiste" class="form-control" placeholder="z.B. Programmieren, Lerngruppe, ..." th:name="suchbegriff" type="text">
-                            </div>
-                            <button type="submit" class="btn btn-primary" style="background: #52a1eb; border-style: none">Suchen</button>
+            <div class="col-10">
+                <h1>Gruppensuche</h1>
+                <form action="/gruppen2/findGroup" method="get">
+                    <div class="shadow" style="border: 10px solid aliceblue; background: aliceblue">
+                        <div class="form-group">
+                            <label for="suchleiste">Suchbegriff:</label>
+                            <input id="suchleiste" class="form-control" placeholder="z.B. Programmieren, Lerngruppe, ..." th:name="suchbegriff" type="text">
                         </div>
-                    </form>
-                    <br>
-                    <table class="table">
-                        <!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
-                        <thead th:if="${!gruppen.isEmpty()}">
-                        <tr>
-                            <th scope="col">Gruppenname</th>
-                            <th scope="col">Beschreibung</th>
-                            <th scope="col">Öffentlich/Privat</th>
-                            <th scope="col">Mitgliederanzahl</th>
-                        </tr>
-                        </thead>
-                        <tbody th:each="gruppe : ${gruppen}">
-                        <tr>
-                            <th scope="row" th:text="${gruppe.title}">Gruppenname</th>
-                            <td th:text="${gruppe.getDescription()}">Beschreibung</td>
-                            <td th:text="${gruppe.getVisibility()}">Öffentlich</td>
-                            <td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
+                        <button type="submit" class="btn btn-primary" style="background: #52a1eb; border-style: none">Suchen</button>
+                    </div>
+                </form>
+                <br>
+                <table class="table">
+                    <!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
+                    <thead th:if="${!gruppen.isEmpty()}">
+                    <tr>
+                        <th scope="col">Gruppenname</th>
+                        <th scope="col">Beschreibung</th>
+                        <th scope="col">Öffentlich/Privat</th>
+                        <th scope="col">Mitgliederanzahl</th>
+                    </tr>
+                    </thead>
+                    <tbody th:each="gruppe : ${gruppen}">
+                    <tr>
+                        <th scope="row" th:text="${gruppe.title}">Gruppenname</th>
+                        <td th:text="${gruppe.getDescription()}">Beschreibung</td>
+                        <td th:text="${gruppe.getVisibility()}">Öffentlich</td>
+                        <td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </main>