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

Fixed masonry grid (posts).

Browse Source
This commit is contained in:
K. Nobel
2017-01-26 12:20:32 +01:00
parent 977757b2d3
commit 3ebacd6251
4 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
website/public/js/masonry.js
View File

@@ -1,37 +1,28 @@
margin = 20; margin = 20;
$(window).on("load", function() {
console.log("LOADED");
container = $("div.posts");
posts = container.children();
posts.remove();
column = $('<div class="column"></div>').append(posts);
container.append(column);
mansonry();
mansonry();
});
$(window).resize(function() { $(window).resize(function() {
clearTimeout(window.resizedFinished); clearTimeout(window.resizedFinished);
window.resizeFinished = setTimeout(function() { window.resizeFinished = setTimeout(function() {
mansonry(); masonry();
}, 250); }, 250);
}); });
function mansonry() { var $container = $(".posts");
function masonry() {
$container.children().remove();
columnCount = Math.floor($(".posts").width() / 250); columnCount = Math.floor($(".posts").width() / 250);
console.log("columns: " + columnCount);
/* /*
* Initialise columns. * Initialise columns.
*/ */
var columns = new Array(columnCount); var columns = new Array(columnCount);
var $columns = new Array(columnCount);
for (i = 0; i < columnCount; i++) { for (i = 0; i < columnCount; i++) {
columns[i] = [0, []]; $column = $("<div class=\"column\">");
console.log(columns[i]); $column.width(100/columnCount + "%");
$container.append($column);
columns[i] = [0, $column];
} }
/* /*
@@ -45,32 +36,27 @@ function mansonry() {
column = columns[i]; column = columns[i];
} }
} }
return column; return column;
} }
/* /*
* Rearange the objects. * Get the posts from the server.
*/ */
j = 0; $.post("API/getPosts.php", { usr : userID })
posts.each(function(i) { .done(function(data) {
post = posts[i]; posts = JSON.parse(data);
shortestColumn = getShortestColumn(columns);
shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
shortestColumn[1].push(post);
}); /*
* Rearange the objects.
container.children().remove(); */
/* jQuery.each(posts, function() {
* Display the objects again in the correct order. $post = $("<div class=\"post platform\" onclick=\"requestPost(this)\">");
*/ $post.append($("<h2>").text(this["title"]));
for (i = 0; i < columnCount; i++) { $post.append($("<p>").html(this["content"]));
column = $('<div class="column"></div>').append(columns[i][1]);
console.log(column);
container.append(column);
} shortestColumn = getShortestColumn(columns);
shortestColumn[1].append($post);
$("div.posts div.column").width(100/columnCount + "%"); shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
} });
});
}

16
website/public/profile.php
View File

@@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<?php include("../views/head.php"); ?> <?php include("../views/head.php"); ?>
<script src="/js/masonry.js"></script>
<style> <style>
@import url("styles/profile.css"); @import url("styles/profile.css");
</style> </style>
@@ -45,10 +44,25 @@ include("../views/footer.php");
?> ?>
<script src="js/friendButtons.js"></script> <script src="js/friendButtons.js"></script>
<script src="js/masonry.js"></script>
<script> <script>
var posts;
$(document).ready(function() { $(document).ready(function() {
userID = <?= $userID ?>; userID = <?= $userID ?>;
placeFriendButtons(); placeFriendButtons();
masonry();
// alert("blap");
// $.post("API/getPosts.php", { usr : userID }, "json")
// .done(function(data) {
// posts = JSON.parse(data);
// alert(posts[0]["content"]);
// }).fail(function() {
// alert("failure...");
// });
}); });
</script> </script>
</body> </body>

4
website/queries/user.php
View File

@@ -126,7 +126,9 @@ function selectAllUserPosts($userID) {
"); ");
$stmt->bindParam(':userID', $userID, PDO::PARAM_INT); $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
$stmt->execute(); if(!$stmt->execute()) {
return False;
}
return $stmt; return $stmt;
} }

50
website/views/profile.php
View File

@@ -5,7 +5,7 @@
<div class="friend-button-container"> <div class="friend-button-container">
</div> </div>
<h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1> <h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1>
<h5 class="profile-username"><?=$user["username"]?></h5> <h5 class="profile-username"><?=$user["username"]?></h5>
<p><?=$user["bio"]?></p> <p><?=$user["bio"]?></p>
@@ -43,29 +43,29 @@
</div> </div>
<div class="posts"> <div class="posts">
<?php <!-- --><?php
if ($_SESSION["userID"] === $userID) { // if ($_SESSION["userID"] === $userID) {
?> // ?>
<div class="post platform"> <!-- <div class="post platform">-->
<form> <!-- <form>-->
<input type="text" class="newpost" placeholder="Titel"> <!-- <input type="text" class="newpost" placeholder="Titel">-->
<textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea> <!-- <textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea>-->
<input type="submit" value="Plaats!"> <!-- <input type="submit" value="Plaats!">-->
</form> <!-- </form>-->
</div> <!-- </div>-->
<?php <!-- --><?php
} // }
//
while($post = $posts->fetch()) { // while($post = $posts->fetch()) {
$nicetime = nicetime($post["creationdate"]); // $nicetime = nicetime($post["creationdate"]);
echo " // echo "
<div class='post platform'> // <div class='post platform'>
<h2>${post["title"]}</h2> // <h2>${post["title"]}</h2>
<p>${post["content"]}</p> // <p>${post["content"]}</p>
<p class=\"subscript\">${nicetime} geplaatst.</p> // <p class=\"subscript\">${nicetime} geplaatst.</p>
</div> // </div>
"; // ";
} // }
?> // ?>
</div> </div>
</div> </div>