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;
-            $buttonContainer = $("div.friend-button-container");
-            $buttonContainer.children().remove();
-            $("#start-profile-chat-form").hide();
-            if (friendshipStatus == -1) {
-                return;
-            } else if(friendshipStatus == 0) {
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"request\"><i class=\"fa fa-handshake-o\"></i> Bevriend</button>"));
-            } else if(friendshipStatus == 1) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Verwijder</button>"));
-                $("#start-profile-chat-form").show();
-            } else if(friendshipStatus == 2) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Trek verzoek in</button>"));
-            } else if(friendshipStatus == 3) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Weiger</button>"));
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"accept\"><i class=\"fa fa-check\"></i> Accepteer</button>"));
-            }
+            var friendshipStatus = data;
+            var $buttonContainer = $("div.friend-button-container");
+            $("#start-profile-chat").hide();
+                $buttonContainer.html("");
+                var value1 = "";
+                var class1 = "empty-button";
+                var icon1 = "";
+                var text1 = "";
+
+                var value2 = "";
+                var class2 = "empty-button";
+                var icon2 = "";
+                var text2 = "";
+
+                switch (friendshipStatus) {
+                    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() {
-                editFriendship(userID, this.value);
+                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 {
-    min-height: 150px;
-    padding: 25px;
-    background-color: #FFFFFF;
+/* New */
+
+.user-box {
+    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);
-}