Added masonry grid to profile and group pages.

website/public/js/masonry.js

@@ -0,0 +1,76 @@
+margin = 20;
+
+$(window).on("load", function() {
+    console.log("LOADED");
+    container = $("div.posts");
+    posts = container.children();
+    posts.remove();
+
+    column = $('<div class="column"></div>').append(posts);
+    container.append(column);
+
+    mansonry();
+    mansonry();
+});
+
+$(window).resize(function() {
+    clearTimeout(window.resizedFinished);
+    window.resizeFinished = setTimeout(function() {
+        mansonry();
+    }, 250);
+});
+
+function mansonry() {
+
+    columnCount = Math.floor($(".posts").width() / 250);
+    console.log("columns: " + columnCount);
+
+    /*
+     * Initialise columns.
+     */
+    var columns = new Array(columnCount);
+    for (i = 0; i < columnCount; i++) {
+        columns[i] = [0, []];
+        console.log(columns[i]);
+    }
+
+    /*
+     * Function will find the column with the shortest height.
+     */
+    function getShortestColumn(columns) {
+        column = columns[0];
+
+        for (i = 1; i < columnCount; i++) {
+            if (column[0] > columns[i][0]) {
+                column = columns[i];
+            }
+        }
+
+        return column;
+    }
+
+    /*
+     * Rearange the objects.
+     */
+    j = 0;
+    posts.each(function(i) {
+        post = posts[i];
+        shortestColumn = getShortestColumn(columns);
+        shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
+        shortestColumn[1].push(post);
+
+    });
+    
+    container.children().remove();
+    /*
+     * Display the objects again in the correct order.
+     */
+    for (i = 0; i < columnCount; i++) {
+        column = $('<div class="column"></div>').append(columns[i][1]);
+        console.log(column);
+        container.append(column);
+
+    }
+
+    $("div.posts div.column").width(100/columnCount + "%");
+}

website/public/styles/profile.css

@@ -14,24 +14,47 @@
     padding-top: 50px;
 }
 
-.posts {
-    z-index: -1;
-    margin-right: 0;
-    width: calc(100% + 15px);
-}
-
-.post-box {
+div.posts {
+    padding-top: 20px;
+    width: calc(100% + 20px);
     display: inline-flex;
-    margin: 20px 15px 0 0;
-    padding: 25px;
-    background-color: #FFFFFF;
 }
 
-/* fullscreen */
-.post-box {
-    width: calc(25% - 69px);
+div.posts div.post {
+    display: block;
+    margin: 20px 0 0 0;
+    padding: 10px;
+    width: calc(100% - 40px);
 }
 
+div.posts div.post img {
+    width: 100%;
+    height: auto;
+}
+
+div.posts .post p.subscript {
+    text-align: right;
+    font-size: 8pt;
+}
+
+/*.posts {*/
+    /*z-index: -1;*/
+    /*margin-right: 0;*/
+    /*width: calc(100% + 15px);*/
+/*}*/
+
+/*.post-box {*/
+    /*display: inline-flex;*/
+    /*margin: 20px 15px 0 0;*/
+    /*padding: 25px;*/
+    /*background-color: #FFFFFF;*/
+/*}*/
+
+/*!* fullscreen *!*/
+/*.post-box {*/
+    /*width: calc(25% - 69px);*/
+/*}*/
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);