Merge branch 'hendrik-post' into 'master'

Hendrik post

See merge request !122
This commit was merged in pull request #126.
This commit is contained in:
Lars van Hijfte
2017-01-25 16:20:48 +01:00
11 changed files with 303 additions and 7 deletions

View File

@@ -0,0 +1,12 @@
<?php
require_once("../../queries/connect.php");
require_once("../../queries/post.php");
require_once("../../queries/checkInput.php");
require_once("../../queries/nicetime.php");
if(isset($_GET['postID'])) {
include("../../views/post-view.php");
} else {
echo "Failed to load";
}

View File

@@ -1,5 +1,30 @@
margin = 20;
// 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();
$.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() {
console.log("LOADED");
container = $("div.posts");
@@ -69,8 +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 + "%");
$(".modal-close").click(function () {
$(".modal").hide();
scrollbarMargin(0, 'auto');
$('#modal-response').hide();
$('.modal-default').show();
});
}

View File

@@ -0,0 +1,8 @@
function loadPost(postID) {
$.get(
"API/loadPost.php",
$(postID).serialize()
).done(function (data) {
$('#modal-response').innerHTML= JSON.parse(data);
});
}

View File

@@ -2,9 +2,11 @@
<html>
<head>
<?php include("../views/head.php"); ?>
<script src="/js/masonry.js"></script>
<script src="js/masonry.js"></script>
<!-- <script src="js/profile.js"></script>-->
<style>
@import url("styles/profile.css");
@import url("styles/post-popup.css");
</style>
</head>
<body>
@@ -12,6 +14,7 @@
include("../queries/user.php");
include("../queries/friendship.php");
include("../queries/nicetime.php");
include("../queries/post.php");
if(empty($_GET["username"])) {
$userID = $_SESSION["userID"];

View File

@@ -0,0 +1,72 @@
/* modal based on: http://www.w3schools.com/howto/howto_css_modals.asp */
.modal {
display: none;
position: fixed;
top: 80px;
left: 256px;
width: calc(100% - 256px); /* Full width */
height: calc(100% - 80px); /* Full height */
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 {
margin: 5% auto;
width: 70%; /* Could be more or less, depending on screen size */
overflow-y: auto;
}
.modal-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
margin: auto;
}
.modal-close:hover,
.modal-close:focus {
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%;
}

View File

@@ -25,5 +25,5 @@
}
li.search-item:hover{
background-color: #EEE;
background-color: #FBC02D;
}