Added fancy buttons in profile

This commit is contained in:
Lars van Hijfte
2017-02-03 00:13:23 +01:00
parent e9468b0ec8
commit 7e4107ac8b
6 changed files with 45 additions and 44 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -13,11 +13,11 @@ $fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . "
</span> </span>
</div> </div>
<?php if (checkPermissionOnPost($postID, $_SESSION["userID"])) {?> <?php if (checkPermissionOnPost($postID, $_SESSION["userID"])) {?>
<button class="deleteButton" <button class="deleteButton fancy-button"
onclick="deletePost('<?=$postID?>')" onclick="deletePost('<?=$postID?>')"
type="submit"> type="submit">
<i class="fa fa-trash"></i>
<span>Verwijder post</span> <span>Verwijder post</span>
<i class="fa fa-trash"></i>
</button><br /> </button><br />
<?php } ?> <?php } ?>
<div class='post-content'> <div class='post-content'>

View File

@@ -7,10 +7,16 @@
<img alt="<?= $user["fname"] ?>" class="profile-picture main-picture <?= $user["onlinestatus"] ?>" src="<?= $user["profilepicture"] ?>"><br /> <img alt="<?= $user["fname"] ?>" class="profile-picture main-picture <?= $user["onlinestatus"] ?>" src="<?= $user["profilepicture"] ?>"><br />
<div class="platform"> <div class="platform">
<div class="status-buttons-container"> <div class="status-buttons-container">
<button disabled class="gray"> <div>
<?= $user["onlinestatus"] ?> <button disabled class="gray">
</button> <?= $user["onlinestatus"] ?>
<button disabled class="gray"><?= $user["role"] ?></button> </button>
</div>
<div>
<button disabled class="gray">
<?= $user["role"] ?>
</button>
</div>
</div> </div>
<div class="friend-button-container"> <div class="friend-button-container">
<p>:)</p> <p>:)</p>