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");
if(isset($_GET['postID'])) {
$postID = $_GET['postID'];
$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>";
include("../../views/post-view.php");
} else {
echo "Failed to load";
}

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

@@ -1,19 +1,28 @@
margin = 20;
function loadPost(postForm) {
$.get(
"API/loadPost.php",
$(postForm).serialize()
).done(function (data) {
console.log(data);
$('#modal-response').html(data);
// scrolling modal taken from http://stackoverflow.com/questions/10476632/how-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen
function scrollbarMargin(width, overflow) {
$('body').css({
marginRight: width,
overflow: overflow
});
$('.profile-menu').css({
marginRight: width
});
}
function requestPost(post) {
$(".modal").show();
console.log($(post).children("form"));
loadPost($(post).children("form"));
$.get(
"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() {
@@ -85,18 +94,14 @@ function mansonry() {
column = $('<div class="column"></div>').append(columns[i][1]);
console.log(column);
container.append(column);
}
$("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").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 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
display: none;
position: fixed;
top: 80px;
left: 256px;
width: calc(100% - 256px); /* Full width */
height: calc(100% - 80px); /* Full height */
overflow: visible; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
overflow-y: auto;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
margin: 5% auto;
width: 70%; /* Could be more or less, depending on screen size */
overflow-y: auto;
}
.modal-close {
@@ -36,3 +33,40 @@
text-decoration: none;
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%;
}

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

@@ -1,11 +1,10 @@
<?php
// $postID = $_GET['postID'];
$postID = 10;
$postID = $_GET['postID'];
$post = selectPostById($postID)->fetch(PDO::FETCH_ASSOC);
$fullname = $post['fname'] . " " . $post['lname'] . " (" . $post['username'] . ")";
echo "
<div class='post-header'>
echo("
<div class='post-header header'>
<h4>" . $post['title'] . "</h4>
<span class='postinfo'>
gepost door $fullname,
@@ -13,18 +12,18 @@ echo "
" . nicetime($post['creationdate']) . "
</span>
</span>
</div>"
?>
<div class="post-content">
<p><?php echo $post['content']; ?></p>
</div>
<div class="post-comments">
<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">
<textarea placeholder="Laat een reactie achter..."></textarea> <br>
<input type="submit" value="Reageer!">
</form>
</div>
@@ -49,6 +48,5 @@ echo "
</div>
</div>
");
}
?>
} ?>
</div>

6
website/views/profile.php
View File

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