polished post viewing

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