Changed profile look a bit more

website/public/js/friendButtons.js

@@ -1,26 +1,73 @@
 function placeFriendButtons() {
     $.post("API/getFriendshipStatus.php", { usr: userID })
         .done(function(data) {
-            friendshipStatus = data;
+            var friendshipStatus = data;
-            $buttonContainer = $("div.friend-button-container");
+            var $buttonContainer = $("div.friend-button-container");
-            $buttonContainer.children().remove();
+            $("#start-profile-chat").hide();
-            $("#start-profile-chat-form").hide();
+                $buttonContainer.html("");
-            if (friendshipStatus == -1) {
+                var value1 = "";
-                return;
+                var class1 = "empty-button";
-            } else if(friendshipStatus == 0) {
+                var icon1 = "";
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"request\"><i class=\"fa fa-handshake-o\"></i> Bevriend</button>"));
+                var text1 = "";
-            } else if(friendshipStatus == 1) {
+
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Verwijder</button>"));
+                var value2 = "";
-                $("#start-profile-chat-form").show();
+                var class2 = "empty-button";
-            } else if(friendshipStatus == 2) {
+                var icon2 = "";
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Trek verzoek in</button>"));
+                var text2 = "";
-            } else if(friendshipStatus == 3) {
+
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Weiger</button>"));
+                switch (friendshipStatus) {
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"accept\"><i class=\"fa fa-check\"></i> Accepteer</button>"));
+                    case "0":
+                        value1 = "request";
+                        class1 = "green";
+                        text1 = "Bevriend";
+                        icon1 = "fa-handshake-o";
+                        break;
+                    case "1":
+                        value1 = "delete";
+                        class1 = "red";
+                        text1 = "Verwijder";
+                        icon1 = "fa-times";
+                        value2 = userID;
+                        class2 = "green";
+                        text2 = "Chat";
+                        icon2 = "fa-comment-o";
+                        break;
+                    case "2":
+                        value1 = "delete";
+                        class1 = "red";
+                        text1 = "Trek verzoek in";
+                        icon1 = "fa-cross";
+                        break;
+                    case "3":
+                        value1 = "delete";
+                        class1 = "red";
+                        text1 = "Weiger";
+                        icon1 = "fa-times";
+                        value2 = "accept";
+                        class2 = "green";
+                        text2 = "Accepteer";
+                        icon2 = "fa-check";
+                        break;
+                    default:
+                        console.log(friendshipStatus);
+                        break;
                 }
 
+                $buttonContainer.append(
+                    "<button class='"+ class1 +" friend-button' value='"+ value1 +"'>" +
+                        "<i class='fa "+ icon1 +"'></i> " + text1 +
+                    "</button>");
+                $buttonContainer.append(
+                    "<button class='"+ class2 +" friend-button' value='"+ value2 +"'>" +
+                        "<i class='fa "+ icon2 +"'></i> " + text2 +
+                    "</button>");
+
+
             $buttonContainer.children().click(function() {
+                if (isNaN(this.value))
                     editFriendship(userID, this.value);
+                else if (this.value != "")
+                    window.location.href = "chat.php?username=" + this.value;
             });
         });
 }

website/public/styles/main.css

@@ -103,10 +103,11 @@ p {
 }
 
 .item-box {
-    width: calc(50% - 60px);
+    width: calc(33% - 50px);
+    display: inline-table;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1400px) {
     .item-box {
         width: calc(100% - 50px);
     }
@@ -183,6 +184,10 @@ button.green {
     background-color: forestgreen;
 }
 
+button.gray{
+    background-color: #FFF;
+    color: #333;
+}
 
 button,
 input[type="submit"],

website/public/styles/profile.css

@@ -1,15 +1,61 @@
-.profile-box {
+/* New */
-    min-height: 150px;
+
-    padding: 25px;
+.user-box {
-    background-color: #FFFFFF;
+    text-align: center;
+    margin-bottom: 50px;
 }
 
-.profile-box .profile-picture, .profile-box .group-picture {
+.status-buttons-container {
+    position: relative;
+    float: left;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container {
+    position: relative;
+    float: right;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container button, .status-buttons-container button {
+    display: block;
+
+    margin: 7px 0;
+    width: 200px;
+
+    font-size: 18px;
+}
+
+.empty-button {
+    background: none;
+    cursor: auto;
+}
+.empty-button:active {
+    box-shadow: none;
+}
+
+.profile-info {
+    display: inline-block;
+
+    min-width: 250px;
+    width: auto;
+    padding-top: 30px;
+}
+
+.main-picture {
+    position: relative;
+    border: #4CAF50 solid 5px;
+
+    display: inline-block;
     width: 150px;
     height: 150px;
-    margin: 0 20px 20px 0;
+    margin-bottom: -25px;
 }
 
+/* Old */
+
 .profile-box h1.profile-username {
     padding-top: 50px;
 }
@@ -60,6 +106,12 @@ div.posts .post form textarea.newpost {
     height: 100px;
 }
 
+.post .post-date {
+    float: right;
+    color: #aaaaaa;
+    font-size: 0.8em;
+}
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);
@@ -72,23 +124,3 @@ div.posts .post form textarea.newpost {
         width: calc(100% - 65px);
     }
 }
-
-.post .post-date {
-    float: right;
-    color: #aaaaaa;
-    font-size: 0.8em;
-}
-
-button.friend-button {
-    float: right;
-    height: auto;
-    padding: 10px;
-    margin-left: 10px;
-    border-radius: 5px;
-    transition-duration: 250ms;
-    cursor: pointer;
-}
-
-button.friend-button:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}

website/queries/user.php

@@ -46,6 +46,7 @@ function selectUser($me, $other) {
           `bio`,
           `user`.`creationdate`,
           `onlinestatus`,
+          `role`,
           `fname`,
           `lname`,
           CASE `status` IS NULL

website/views/head.php

@@ -5,7 +5,6 @@
 <script src="js/main.js"></script>
 <script src="js/header.js"></script>
 <script src="js/menu.js"></script>
-<script src="js/notifications.js"></script>
 <style>
     /* Add your css files here. */
     @import url("styles/main.css");

website/views/menu.php

@@ -12,6 +12,13 @@
         </h4>
         <ul id="menu-groups-list" class="nav-list">
         </ul>
+        <ul class="nav-list">
+            <li>
+                <a href="#">
+                    Maak een groep aan
+                </a>
+            </li>
+        </ul>
     </section>
     <section>
         <ul class="nav-list">

website/views/profile.php

@@ -1,24 +1,39 @@
 <div class="content">
-    <div class="profile-box platform">
+    <div class="user-box">
-        <img class="left profile-picture" src="<?php echo $user["profilepicture"] ?>">
+        <img class="profile-picture main-picture" src="<?= $user["profilepicture"] ?>"><br />
-        <form id="start-profile-chat-form" class="right" action="chat.php" method="get">
+        <div class="status-buttons-container">
-            <button name="username"
+            <button disabled class="gray"><?= $user["onlinestatus"] ?></button>
-                    class="friend-button green"
+            <button disabled class="gray"><?= $user["role"] ?></button>
-                    value="<?php echo $user["userID"] ?>">
+        </div>
-                <i class="fa fa-comment-o"></i> Chat
-            </button>
-        </form>
         <div class="friend-button-container">
+            <p>:)</p>
+            <p>Je ziet er goed uit vandaag</p>
+        </div>
+        <div class="profile-info platform">
+            <h2><?= $user["fname"]?> <?=$user["lname"]?></h2>
+            <h5><?=$user["username"]?></h5>
+            <?php if (strlen($user["bio"]) <= 50) {
+                echo "<p>" . $user["bio"] . "</p>";
+            } ?>
+        </div>
+    </div>
+    <?php if (strlen($user["bio"]) > 50) {
+        echo "<div class='platform'><h3>Bio:</h3><p>" . $user["bio"] . "</p></div>";
+    } ?>
 
+    <div class="item-box platform">
+        <h3>Informatie</h3>
+        <p>
+            <ul>
+                <li>Geboren op: <?= $user["birthdate"] ?></li>
+                <li>Locatie: <?= $user["location"] ?></li>
+                <li>Lid sinds: <?= nicetime($user["creationdate"]) ?></li>
+            </ul>
+        </p>
     </div>
 
-        <h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1>
+    <div class="item-box platform">
-        <h5 class="profile-username"><?=$user["username"]?></h5>
+        <h3>Vrienden</h3>
-        <p><?=$user["bio"]?></p>
-    </div>
-
-    <div class="item-box left platform">
-        <h2>Vrienden</h2>
         <p>
             <?php
                 while($friend = $profile_friends->fetch()) {
@@ -33,8 +48,8 @@
         </p>
     </div>
 
-    <div class="item-box right platform">
+    <div class="item-box platform">
-        <h2>Groepen</h2>
+        <h3>Groepen</h3>
         <p>
             <?php
                 while($group = $profile_groups->fetch()) {