Added fancy buttons in profile

website/public/js/friendButtons.js

@@ -19,24 +19,24 @@ function placeFriendButtons() {
                     case "0":
                         value1 = "request";
                         class1 = "green";
-                        text1 = "Bevriend";
-                        icon1 = "fa-handshake-o";
+                        text1 = "Word vrienden";
+                        icon1 = "fa-user-plus";
                         break;
                     case "1":
                         value1 = userID;
                         class1 = "green";
                         text1 = "Chat";
-                        icon1 = "fa-comment-o";
+                        icon1 = "fa-comment";
                         value2 = "delete";
                         class2 = "red";
-                        text2 = "Verwijder";
-                        icon2 = "fa-times";
+                        text2 = "Ontvriend";
+                        icon2 = "fa-user-times";
                         break;
                     case "2":
                         value1 = "delete";
                         class1 = "red";
                         text1 = "Trek verzoek in";
-                        icon1 = "fa-cross";
+                        icon1 = "fa-times";
                         break;
                     case "3":
                         value1 = "accept";
@@ -51,16 +51,18 @@ function placeFriendButtons() {
                 }
 
                 $buttonContainer.append(
-                    "<button class='"+ class1 +" friend-button' value='"+ value1 +"'>" +
-                        "<i class='fa "+ icon1 +"'></i> " + text1 +
-                    "</button>");
+                    "<div><button class='"+ class1 +" fancy-button friend-button' value='"+ value1 +"'>" +
+                    "<span>"+ text1 +"</span>" +
+                    "<i class='fa "+ icon1 +"'></i> " +
+                    "</button></div>");
                 $buttonContainer.append(
-                    "<button class='"+ class2 +" friend-button' value='"+ value2 +"'>" +
-                        "<i class='fa "+ icon2 +"'></i> " + text2 +
-                    "</button>");
+                    "<div><button class='"+ class2 +" fancy-button friend-button' value='"+ value2 +"'>" +
+                    "<span>"+ text2 +"</span>" +
+                    "<i class='fa "+ icon2 +"'></i> " +
+                    "</button></div>");
 
 
-            $buttonContainer.children().click(function() {
+            $buttonContainer.find("button").click(function() {
                 if (isNaN(this.value))
                     editFriendship(userID, this.value);
                 else if (this.value != "")

website/public/js/groupButtons.js

@@ -5,23 +5,23 @@ function placeGroupButtons() {
 
             if (data == 'none') {
                 $buttonContainer.append(
-                    "<button class='green group-button group-button-fixed' value='request'>" +
-                    "<i class='fa fa-plus'></i> Voeg toe" +
+                    "<button class='green group-button fancy-button' value='request'>" +
+                    "<span>Treed toe</span><i class='fa fa-plus'></i>" +
                     "</button>");
             } else if (data == 'request') {
                 $buttonContainer.append(
-                    "<button class='red group-button group-button-fixed' value='none'>" +
-                    "<i class='fa fa-times'></i> Trek verzoek in" +
+                    "<button class='red group-button fancy-button' value='none'>" +
+                    "<span>Trek verzoek in</span><i class='fa fa-times'></i>" +
                     "</button>");
             } else if (data == 'admin') {
                 $buttonContainer.append(
-                    "<button class='group-button group-button-fancy' value='admin'>" +
+                    "<button class='group-button fancy-button' value='admin'>" +
                         "<span>Instellingen</span><i class='fa fa-cogs'></i>" +
                         "</button>"
                 );
             } else {
                 $buttonContainer.append(
-                    "<button class='red group-button group-button-fancy' value='none'>" +
+                    "<button class='red group-button fancy-button' value='none'>" +
                     "<span>Verlaat groep</span><i class='fa fa-sign-out'></i>" +
                     "</button>");
             }

website/public/styles/post-popup.css

@@ -92,16 +92,4 @@
 .deleteButton {
     background-color: firebrick;
     float: right;
-}
-
-.deleteButton i {
-    display: inline-block;
-}
-
-.deleteButton:hover span {
-    display: inline-block;
-}
-
-.deleteButton span {
-    display: none;
 }

website/public/styles/profile.css

@@ -27,16 +27,21 @@
     display: inline-block;
 }
 
+.friend-button-container div, .status-buttons-container div {
+    width: 200px;
+    display: inline-block;
+}
+
 .friend-button-container button, .status-buttons-container button, .group-button-container button {
     display: block;
+    float: right;
 
     margin: 7px 0;
 
     font-size: 18px;
 }
-
-.friend-button-container button, .status-buttons-container button, .group-button-fixed {
-    width: 200px;
+.status-buttons-container button {
+    float: left;
 }
 
 .group-button-container button {
@@ -76,19 +81,19 @@
     border: none;
 }
 
-.group-button-fancy span {
+.fancy-button span {
     display: none;
 }
 
-.group-button-fancy:hover {
+.fancy-button:hover {
     text-align: right;
 }
 
-.group-button-fancy i {
+.fancy-button i {
     display: inline-block;
 }
 
-.group-button-fancy:hover span {
+.fancy-button:hover span {
     display: inline-block;
     margin-right: 5px;
 }