From 9aa7122779a4cdb42a07dcdde80985d2d48568a7 Mon Sep 17 00:00:00 2001
From: kasch309 <fr3sh3rpi55a@gmail.com>
Date: Wed, 18 Mar 2020 15:23:26 +0100
Subject: [PATCH] Improve styling on several templates

---
 .../resources/templates/detailsMember.html    | 30 +++++++++++--------
 src/main/resources/templates/editMembers.html | 13 ++++----
 src/main/resources/templates/index.html       | 24 +++++----------
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/main/resources/templates/detailsMember.html b/src/main/resources/templates/detailsMember.html
index 6753811..63ae972 100644
--- a/src/main/resources/templates/detailsMember.html
+++ b/src/main/resources/templates/detailsMember.html
@@ -30,31 +30,35 @@
 
             <div class="col-9">
                 <div class="shadow-sm p-4" style="border: 10px solid aliceblue; background: aliceblue">
-                        <h1 style="color: dodgerblue; font-weight: bold" th:text="${group.getTitle()}"></h1>
+                        <h1 style="color: black; font-weight: bold" th:text="${group.getTitle()}"></h1>
                         <p style="font-weight: bold">
+                        <h3>
                             <span class="badge badge-pill badge-dark" style="background: darkslategray" th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
                             <span class="badge badge-pill badge-primary" th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
                             <span class="badge badge-pill badge-success" style="background: lightseagreen" th:if='${group.getType() == group.getType().LECTURE}'> Veranstaltung</span>
-                        </p>
-                        <p style="overflow-wrap: break-word" th:text="${group.getDescription()}"></p>
-                        <div class="form-group">
-                            <div class="text-right">
-                                <form method="post" action="/gruppen2/leaveGroup">
-                                    <button th:value="${group.getId()}" th:name="group_id" class="btn btn-danger" type="submit" style="border-style: none;">Gruppe verlassen</button>
-                                </form>
-                            </div>
+                        </h3>
+                        <br>
+                        <div class="shadow-sm p-4" style="background: white">
+                            <p style="overflow-wrap: break-word" th:text="${group.getDescription()}"></p>
+                        </div>
+                    <br>
+                        <div class="text-right">
+                            <form method="post" action="/gruppen2/leaveGroup">
+                                <button th:value="${group.getId()}" th:name="group_id" class="btn btn-danger" type="submit" style="border-style: none;">Gruppe verlassen</button>
+                            </form>
                         </div>
                 </div>
             </div>
             <div class="col-3" style="white-space: nowrap">
-                <div>
-                    <h2 style="display: inline-block; margin: 0">Mitglieder</h2>
+                <div style="display: inline-block; margin: 0">
+                    <h2>Mitglieder</h2>
                     <div th:if='${group.getRoles().get(user.getUser_id()) == admin}'>
                         <form method="get" action="/gruppen2/details/members">
-                                <button th:name="group_id" th:value="${group.getId()}" class="btn btn-secondary" type="submit" style="background: slategrey; margin-top: 200px; float: right" >Mitglieder bearbeiten</button>
+                                <button th:name="group_id" th:value="${group.getId()}" class="btn btn-secondary" type="submit" style="background: slategrey; float: right" >Mitglieder bearbeiten</button>
                         </form>
                     </div>
-                    <p></p>
+                    <br>
+                    <br>
                 </div>
                 <div>
                     <ul th:each="member : ${group.getMembers()}" class="list-group-flush" style="background: slategrey">
diff --git a/src/main/resources/templates/editMembers.html b/src/main/resources/templates/editMembers.html
index 9988370..c6ee888 100644
--- a/src/main/resources/templates/editMembers.html
+++ b/src/main/resources/templates/editMembers.html
@@ -28,13 +28,13 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-9">
-                <div class="shadow-sm p-4" style="border: 10px solid aliceblue; background: aliceblue">
+                <div class="shadow p-2" style="border: 10px solid aliceblue; background: aliceblue">
                     <table class="table">
                         <thead>
                         <tr>
                             <th scope="col">Mitglied</th>
-                            <th scope="col">Rolle</th>
-                            <th scope="col" style="width: 320px">Optionen</th>
+                            <th scope="col" style="width: 180px">Rolle</th>
+                            <th scope="col" style="width: 270px">Optionen</th>
                         </tr>
                         </thead>
                         <tbody class="table-striped">
@@ -45,12 +45,15 @@
                                     <span th:if='${group.getRoles().get(member.getUser_id()) != admin}'>Admin</span>
                                 </td>
                                 <td>
-                                    <button class="btn btn-warning">Rolle ändern</button> <!-- th:if -->
-                                    <button class="btn btn-danger">Mitglied entfernen</button>
+                                    <button class="btn btn-warning btn-sm">Rolle ändern</button> <!-- th:if -->
+                                    <button class="btn btn-danger btn-sm" >Mitglied entfernen</button>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
+                    <button type="button" class="btn btn-primary" style="background: #52a1eb; border-style: none">
+                        <a th:href="@{/gruppen2/details(id=${group.getId()})}" style="color: white">Fertig</a>
+                    </button>
                 </div>
             </div>
         </div>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index d9ba848..e7ba682 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -30,8 +30,16 @@
             <div class="col-10">
                 <h1>Meine Gruppen</h1>
                 <form action="/" method="get">
+                    <h3 style="color: dodgerblue; font-weight: bold;">
+                        <small style="font-weight: normal; color: black">Mitglied in </small>
+                        <small style="font-weight: bold; color: black" th:text="${gruppen.size()}"></small>
+                        <small style="font-weight: normal; color: black" th:if='${gruppen.size()==1}'> Gruppe.</small>
+                        <small style="font-weight: normal; color: black" th:if='${gruppen.size()!=1}'> Gruppen.</small>
+                    </h3>
+                    <br>
                     <div th:each="gruppe: ${gruppen}">
                         <div class="shadow-sm p-4" style="border: none; background: aliceblue">
+
                             <h3 style="color: dodgerblue; font-weight: bold;">
                                 <a th:href="@{/gruppen2/details(id=${gruppe.getId()})}" th:text="${gruppe.getTitle()}"></a>
                             </h3>
@@ -41,22 +49,6 @@
                     </div>
                 </form>
             </div>
-            <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>
-                        <h3 class="card-text">
-                            <span th:text="${user.getGivenname()}">username</span>
-                            <span th:text="${user.getFamilyname()}">usersurname</span>
-                        </h3>
-                        <p class="card-text" th:text="${user.getEmail()}">usermail</p>
-                        <p>
-                            <small class="card-text">In Gruppen:</small>
-                            <small   class="card-text" th:text="${gruppen.size()}"></small>
-                        </p>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </main>