Use masonry layout for notes

.gitmodules

@@ -3,4 +3,7 @@
 	url = https://source.netsyms.com/Netsyms/Material-Color
 [submodule "static/easy-markdown-editor"]
 	path = static/easy-markdown-editor
-	url = https://source.netsyms.com/Netsyms/easy-markdown-editor.git
+	url = https://source.netsyms.com/Netsyms/easy-markdown-editor.git
+[submodule "static/Shuffle"]
+	path = static/Shuffle
+	url = https://source.netsyms.com/Mirrors/Vestride_Shuffle.git

pages.php

@@ -11,6 +11,7 @@ define("PAGES", [
         "navbar" => true,
         "icon" => "far fa-sticky-note",
         "scripts" => [
+            "static/Shuffle/dist/shuffle.min.js",
             "static/js/home.js"
         ]
     ],

pages/home.php

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-$noteids = $database->select('notes', 'noteid', ['ownerid' => $_SESSION['uid']]);
+$noteids = $database->select('notes', 'noteid', ['ownerid' => $_SESSION['uid'], 'ORDER' => ['favorite' => "DESC"]]);
 
 $notes = [];
 
@@ -93,12 +93,12 @@ foreach ($colors as $c) {
     <a href="app.php?page=editnote" class="btn btn-success"><i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?></a>
 </div>
 
-<div class="row">
+<div class="row" id="grid">
 
     <?php
     foreach ($notes as $note) {
         ?>
-        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
+        <div class="grid__brick col-12 col-sm-6 col-md-6 col-lg-4">
             <div class="card notecard mb-3" data-color="<?php echo $note->getColor(); ?>" id="notecard_<?php echo $note->getID(); ?>" data-note="<?php echo $note->getID(); ?>">
                 <div class="card-body">
                     <div class="float-right">
@@ -131,4 +131,6 @@ foreach ($colors as $c) {
     }
     ?>
 
+    <div class="col-1 sizer-element"></div>
+
 </div>

static/Shuffle

@@ -0,0 +1 @@
+Subproject commit a4d99b9af924a6f5ed4bbc030161d8273d460c3f

static/js/home.js

@@ -36,4 +36,9 @@ $(".color-btn").click(function () {
     $("#colormodal").modal();
 });
 
-$('[data-toggle="tooltip"]').tooltip();
+$('[data-toggle="tooltip"]').tooltip();
+
+window.shuffleInstance = new window.Shuffle(document.getElementById('grid'), {
+    itemSelector: '.grid__brick',
+    sizer: '.sizer-element',
+});