').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 = $('').append(columns[i][1]);
+ console.log(column);
+ container.append(column);
+
+ }
+
+ $("div.posts div.column").width(100/columnCount + "%");
+}
\ No newline at end of file
diff --git a/website/public/styles/profile.css b/website/public/styles/profile.css
index c9029c5..af1ed58 100644
--- a/website/public/styles/profile.css
+++ b/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);
diff --git a/website/public/template_sql.php b/website/public/template_sql.php
new file mode 100644
index 0000000..3ef5b97
--- /dev/null
+++ b/website/public/template_sql.php
@@ -0,0 +1,18 @@
+
+
+
+
+fetch(PDO::FETCH_ASSOC)) {
+ echo $friend['username'].' '.$friend['onlinestatus'] . " ";
+}
+
+?>
+
+
\ No newline at end of file
diff --git a/website/queries/connect.php b/website/queries/connect.php
new file mode 100644
index 0000000..36d1001
--- /dev/null
+++ b/website/queries/connect.php
@@ -0,0 +1,13 @@
+mysql_host;dbname=$dbconf->mysql_database;charset=utf8",
+ "$dbconf->mysql_username", "$dbconf->mysql_password")
+ or die('Error connecting to mysql server');
+}
+
+?>
diff --git a/website/queries/friendship.php b/website/queries/friendship.php
new file mode 100644
index 0000000..45a599e
--- /dev/null
+++ b/website/queries/friendship.php
@@ -0,0 +1,24 @@
+query("
+ SELECT
+ `user`.`username`,
+ `user`.`profilepicture`,
+ `user`.`onlinestatus`,
+ `user`.`role`
+ FROM
+ `user`
+ INNER JOIN
+ `friendship`
+ WHERE
+ `friendship`.`user1ID` = $userID AND
+ `friendship`.`user2ID` = `user`.`userID` OR
+ `friendship`.`user2ID` = $userID AND
+ `friendship`.`user1ID` = `user`.`userID`"
+ );
+}
+
+
+
+?>
\ No newline at end of file
diff --git a/website/views/group.php b/website/views/group.php
index d893b57..c8ed118 100644
--- a/website/views/group.php
+++ b/website/views/group.php
@@ -42,85 +42,80 @@
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Lorem
+
Lorem ipsum dolor sit amet, consectetur.
+
Enkele minuten geleden geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Image
+
+
Gisteren geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Ipsum
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.
+
Maandag geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.
-
Enkele minuten geleden geplaatst
-
+
+
Dolor
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Sit
+
Lorem ipsum dolor sit.
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Image
+
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Amet
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.
+
4 Januari geplaatst
-
-
-
-
Afbeelding
-
-
Gisteren geplaatst
-
+
+
Consectetur
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.
+
4 Januari geplaatst
-
-
-
-
Post
-
-
Maandag geplaatst
-
+
+
Adipisicing
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!
+
4 Januari geplaatst
-
-
-
-
Post
-
4 Januari geplaatst
-
+
+
Elit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.
+
4 Januari geplaatst
+
+
+
Geen error
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.
+
4 Januari geplaatst
+
+
+
Image
+
+
4 Januari geplaatst
+
+
+
Aliquid
+
Lorem ipsum dolor sit amet, consectetur.
+
4 Januari geplaatst
+
+
+
Odit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.
+
4 Januari geplaatst
+
+
+
Accusamus
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.
+
4 Januari geplaatst
diff --git a/website/views/head.php b/website/views/head.php
index 4da866c..fc28320 100644
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -4,6 +4,7 @@
+
+
\ No newline at end of file
diff --git a/website/views/profile.php b/website/views/profile.php
index 1f7cae5..8f5efe2 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -33,109 +33,80 @@
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Lorem
+
Lorem ipsum dolor sit amet, consectetur.
+
Enkele minuten geleden geplaatst
-
-
-
-
Glitterzz :3
-
-
Enkele minuten geleden geplaatst
-
+
+
Image
+
+
Gisteren geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Ipsum
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.
+
Maandag geplaatst
-
-
-
-
woooow
-
-
Enkele minuten geleden geplaatst
-
+
+
Dolor
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
4 Januari geplaatst
-
-
-
-
0.0
-
-
Enkele minuten geleden geplaatst
-
+
+
Sit
+
Lorem ipsum dolor sit.
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Image
+
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.
-
Enkele minuten geleden geplaatst
-
+
+
Amet
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Consectetur
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Adipisicing
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!
+
4 Januari geplaatst
-
-
-
-
Tekst
-
Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.
-
Enkele minuten geleden geplaatst
-
+
+
Elit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.
+
4 Januari geplaatst
-
-
-
-
Afbeelding
-
-
Gisteren geplaatst
-
+
+
Geen error
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.
+
4 Januari geplaatst
-
-
-
-
Post
-
-
Maandag geplaatst
-
+
+
Image
+
+
4 Januari geplaatst
-
-
-
-
Post
-
4 Januari geplaatst
-
+
+
Aliquid
+
Lorem ipsum dolor sit amet, consectetur.
+
4 Januari geplaatst
+
+
+
Odit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.
+
4 Januari geplaatst
+
+
+
Accusamus
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.