MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Changed profile look a bit more

Browse Source
This commit is contained in:
Lars van Hijfte
2017-01-29 17:24:39 +01:00
parent dd2113b234
commit 89c8c35b4a
7 changed files with 171 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
website/public/js/friendButtons.js
View File

@@ -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() {
if (isNaN(this.value))
editFriendship(userID, this.value);
else if (this.value != "")
window.location.href = "chat.php?username=" + this.value;
});
});
}

9
website/public/styles/main.css
View File

@@ -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"],

84
website/public/styles/profile.css
View File

@@ -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);
}

1
website/queries/user.php
View File

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

1
website/views/head.php
View File

@@ -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");

7
website/views/menu.php
View File

@@ -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">

51
website/views/profile.php
View File

@@ -1,24 +1,39 @@
<div class="content">
<div class="profile-box platform">
<img class="left profile-picture" src="<?php echo $user["profilepicture"] ?>">
<form id="start-profile-chat-form" class="right" action="chat.php" method="get">
<button name="username"
class="friend-button green"
value="<?php echo $user["userID"] ?>">
<i class="fa fa-comment-o"></i> Chat
</button>
</form>
<div class="user-box">
<img class="profile-picture main-picture" src="<?= $user["profilepicture"] ?>"><br />
<div class="status-buttons-container">
<button disabled class="gray"><?= $user["onlinestatus"] ?></button>
<button disabled class="gray"><?= $user["role"] ?></button>
</div>
<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>
<h5 class="profile-username"><?=$user["username"]?></h5>
<p><?=$user["bio"]?></p>
</div>
<div class="item-box left platform">
<h2>Vrienden</h2>
<div class="item-box platform">
<h3>Vrienden</h3>
<p>
<?php
while($friend = $profile_friends->fetch()) {
@@ -33,8 +48,8 @@
</p>
</div>
<div class="item-box right platform">
<h2>Groepen</h2>
<div class="item-box platform">
<h3>Groepen</h3>
<p>
<?php
while($group = $profile_groups->fetch()) {