polished post viewing

website/public/API/loadPost.php

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

website/public/js/masonry.js

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

website/public/styles/post-popup.css

@@ -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 {
@@ -35,4 +32,41 @@
     color: black;
     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%;
 }