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

polished post viewing

Browse Source
This commit is contained in:
Hendrik
2017-01-25 15:59:03 +01:00
parent db333b6e98
commit b161596d67
5 changed files with 104 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
website/public/API/loadPost.php
View File

@@ -6,56 +6,7 @@ require_once("../../queries/checkInput.php");
require_once("../../queries/nicetime.php"); require_once("../../queries/nicetime.php");
if(isset($_GET['postID'])) { if(isset($_GET['postID'])) {
$postID = $_GET['postID']; include("../../views/post-view.php");
$post = selectPostById($postID)->fetch(PDO::FETCH_ASSOC);
$fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . ")";
echo "
<div class='post-header'>
<h4>" . $post['title'] . "</h4>
<span class='postinfo'>
gepost door $fullname,
<span class='posttime' title='" . $post['creationdate'] . "'>
" . nicetime($post['creationdate']) . "
</span>
</span>
</div>
<div class='post-content'>
<p>" . $post['content'] . "</p>
</div>
<div class='post-comments'>
<div class=\"commentfield\">
<form name=\"newcomment\" method=\"post\">
<textarea>Vul in</textarea> <br>
<input type=\"submit\" value=\"Reageer\">
</form>
</div>";
$q = selectCommentsByPostId($postID);
while($comment = $q->fetch(PDO::FETCH_ASSOC)) {
$commentauthor = $comment['fname'] . " " . $comment['lname'] . " (" . $comment['username'] . ")";
$commentdate = $comment['creationdate'];
$commentnicetime = nicetime($commentdate);
$commentcontent = $comment['content'];
echo("
<div class='comment'>
<div class='commentinfo'>
$commentauthor
<span class='commentdate', title='$commentdate'>
$commentnicetime
</span>
</div>
<div class='commentcontent'>
$commentcontent
</div>
</div>
");
}
echo "</div>";
} else { } else {
echo "Failed to load"; echo "Failed to load";
} }

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

@@ -1,19 +1,28 @@
margin = 20; margin = 20;
function loadPost(postForm) { // scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
$.get( function scrollbarMargin(width, overflow) {
"API/loadPost.php", $('body').css({
$(postForm).serialize() marginRight: width,
).done(function (data) { overflow: overflow
console.log(data); });
$('#modal-response').html(data); $('.profile-menu').css({
marginRight: width
}); });
} }
function requestPost(post) { function requestPost(post) {
$(".modal").show(); $(".modal").show();
console.log($(post).children("form")); $.get(
loadPost($(post).children("form")); "API/loadPost.php",
$(post).children("form").serialize()
).done(function (data) {
$('.modal-default').hide();
var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
scrollbarMargin(scrollBarWidth, 'hidden');
$('#modal-response').show();
$('#modal-response').html(data);
});
} }
$(window).on("load", function() { $(window).on("load", function() {
@@ -85,18 +94,14 @@ function mansonry() {
column = $('<div class="column"></div>').append(columns[i][1]); column = $('<div class="column"></div>').append(columns[i][1]);
console.log(column); console.log(column);
container.append(column); container.append(column);
} }
$("div.posts div.column").width(100/columnCount + "%"); $("div.posts div.column").width(100/columnCount + "%");
// $(".post").click(function () {
// $(".modal").show();
// console.log("testerino");
// loadPost($(this).children("form.first"));
// });
$(".modal-close").click(function () { $(".modal-close").click(function () {
$(".modal").hide(); $(".modal").hide();
scrollbarMargin(0, 'auto');
$('#modal-response').hide();
$('.modal-default').show();
}); });
} }

56
website/public/styles/post-popup.css
View File

@@ -1,25 +1,22 @@
/* modal based on: http://www.w3schools.com/howto/howto_css_modals.asp */ /* modal based on: http://www.w3schools.com/howto/howto_css_modals.asp */
.modal { .modal {
display: none; /* Hidden by default */ display: none;
position: fixed; /* Stay in place */ position: fixed;
z-index: 1; /* Sit on top */ top: 80px;
left: 0; left: 256px;
top: 0;
width: calc(100% - 256px); /* Full width */ width: calc(100% - 256px); /* Full width */
height: calc(100% - 80px); /* Full height */ height: calc(100% - 80px); /* Full height */
overflow: visible; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
overflow-y: auto;
} }
/* Modal Content/Box */ /* Modal Content/Box */
.modal-content { .modal-content {
background-color: #fefefe; margin: 5% auto;
margin: 15% auto; /* 15% from the top and centered */ width: 70%; /* Could be more or less, depending on screen size */
padding: 20px; overflow-y: auto;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
} }
.modal-close { .modal-close {
@@ -35,4 +32,41 @@
color: black; color: black;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
}
.modal-content img {
max-height: 100%;
max-width: 100%;
}
.post-header h4 {
font-size: 20pt;
}
.post-content {
margin: 30px auto;
width: 90%;
}
.commentfield {
margin-bottom: 20px;
}
.commentfield textarea {
width: 100%;
}
.comment {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #4CAF50;
}
.commentinfo {
font-size: 10pt;
}
.commentcontent {
margin: 5px auto;
width: 95%;
} }

70
website/views/post-view.php
View File

@@ -1,11 +1,10 @@
<?php <?php
// $postID = $_GET['postID']; $postID = $_GET['postID'];
$postID = 10; $post = selectPostById($postID)->fetch(PDO::FETCH_ASSOC);
$post = selectPostById($postID)->fetch(PDO::FETCH_ASSOC); $fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . ")";
$fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . ")";
echo " echo("
<div class='post-header'> <div class='post-header header'>
<h4>" . $post['title'] . "</h4> <h4>" . $post['title'] . "</h4>
<span class='postinfo'> <span class='postinfo'>
gepost door $fullname, gepost door $fullname,
@@ -13,42 +12,41 @@ echo "
" . nicetime($post['creationdate']) . " " . nicetime($post['creationdate']) . "
</span> </span>
</span> </span>
</div>"
?>
<div class="post-content">
<p><?php echo $post['content']; ?></p>
</div> </div>
<div class="post-comments"> <div class='post-content'>
<p>" . $post['content'] . "</p>
</div>
"); ?>
<div class='post-comments'>
<div class="commentfield"> <div class="commentfield">
<form name="newcomment" method="post"> <form name="newcomment" method="post">
<textarea>Vul in</textarea> <br> <textarea placeholder="Laat een reactie achter..."></textarea> <br>
<input type="submit" value="Reageer"> <input type="submit" value="Reageer!">
</form> </form>
</div> </div>
<?php <?php
$q = selectCommentsByPostId($postID); $q = selectCommentsByPostId($postID);
while($comment = $q->fetch(PDO::FETCH_ASSOC)) { while($comment = $q->fetch(PDO::FETCH_ASSOC)) {
$commentauthor = $comment['fname'] . " " . $comment['lname'] . " (" . $comment['username'] . ")"; $commentauthor = $comment['fname'] . " " . $comment['lname'] . " (" . $comment['username'] . ")";
$commentdate = $comment['creationdate']; $commentdate = $comment['creationdate'];
$commentnicetime = nicetime($commentdate); $commentnicetime = nicetime($commentdate);
$commentcontent = $comment['content']; $commentcontent = $comment['content'];
echo(" echo("
<div class='comment'> <div class='comment'>
<div class='commentinfo'> <div class='commentinfo'>
$commentauthor $commentauthor
<span class='commentdate', title='$commentdate'> <span class='commentdate', title='$commentdate'>
$commentnicetime $commentnicetime
</span> </span>
</div> </div>
<div class='commentcontent'> <div class='commentcontent'>
$commentcontent $commentcontent
</div> </div>
</div> </div>
"); ");
} } ?>
?> </div>
</div>

6
website/views/profile.php
View File

@@ -74,13 +74,13 @@
?> ?>
</div> </div>
<div class="modal content"> <div class="modal">
<div class="modal-content"> <div class="modal-content platform">
<div class="modal-close"> <div class="modal-close">
&times; &times;
</div> </div>
<div class="modal-response" id="modal-response"> <div class="modal-response" id="modal-response">
Loading... <span class="modal-default">Aan het laden...</span>
</div> </div>
</div> </div>
</div> </div>