website/public/group.php

@@ -40,12 +40,15 @@ if ($group["role"] == "mod" OR $group["role"] == "admin") {
 ?>
 
 <script src="js/masonry.js"></script>
+<script src="js/groupButtons.js"></script>
 <script src="js/post.js"></script>
 <script>
     $(document).ready(function() {
         userID = 0;
         groupID = <?= $group["groupID"] ?>;
 
+        placeGroupButtons();
+
         masonry(<?= $masonry_mode ?>);
     });
 </script>

website/public/js/groupButtons.js

@@ -0,0 +1,33 @@
+function placeGroupButtons() {
+    $.post("API/getGrouprole.php", { grp: groupID })
+        .done(function(data) {
+            var $buttonContainer = $("div.group-button-container");
+
+            if(data == 'none') {
+                $buttonContainer.append(
+                    "<button class='green group-button' value='request'>" +
+                    "<i class='fa fa-plus'></i> Voeg toe" +
+                    "</button>");
+            } else if(data == 'request') {
+                $buttonContainer.append(
+                    "<button class='red group-button' value='none'>" +
+                    "<i class='fa fa-times'></i> Trek verzoek in" +
+                    "</button>");
+            } else {
+                $buttonContainer.append(
+                    "<button class='red group-button' value='none'>" +
+                    "<i class='fa fa-times'></i> Verlaat groep" +
+                    "</button>");
+            }
+
+            $buttonContainer.children().click(function() {
+                $.post("API/editMembership.php", { grp: groupID, role: this.value })
+                    .done(function() {
+                        $buttonContainer.children().remove();
+                        placeGroupButtons();
+                    }).fail(function() {
+                });
+            });
+
+    });
+}

website/public/styles/main.css

@@ -94,6 +94,7 @@ p {
 
 .group-picture {
     border-radius: 5px;
+    border: none;
 }
 
 .item-box, .item-box-full-width {

website/public/styles/profile.css

@@ -18,7 +18,7 @@
     display: inline-block;
 }
 
-.friend-button-container button, .status-buttons-container button {
+.friend-button-container button, .status-buttons-container button, .group-button-container button {
     display: block;
 
     margin: 7px 0;
@@ -27,6 +27,10 @@
     font-size: 18px;
 }
 
+.group-button-container button {
+    float: right;
+}
+
 .empty-button {
     background: none;
     cursor: auto;
@@ -51,8 +55,18 @@
     width: 150px;
     height: 150px;
     margin-bottom: -45px;
+
+    object-fit: cover;
+    vertical-align: middle;
 }
 
+.group-picture {
+    border: none;
+    margin-bottom: 0;
+    margin-right: 15px;
+}
+
+
 /* Old */
 
 .profile-box h1.profile-username {

website/views/group.php

@@ -1,11 +1,10 @@
 <div class="content">
     <div class="profile-box platform">
-        <img class="left main-picture" src="<?= $group['picture'] ?>">
-        <div class="profile-button">
-            <p><img src="img/leave-group.png"> Groep verlaten</p>
-        </div>
+        <img class="left main-picture group-picture" src="<?= $group['picture'] ?>">
+        <div class="group-button-container"></div>
         <h1 class="profile-username"><?= $group['name'] ?></h1>
         <p><?= $group['description'] ?></p>
+
     </div>
 
     <div class="item-box-full-width platform">