add masonry to cardsHEADmaster

1 files changed, 48 insertions, 50 deletions

diff --git a/src/scripts/index.js b/src/scripts/index.js
index 3671a87..164c2cd 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -8,7 +8,7 @@ const cardsContainer = document.querySelector("#cards");
 const commandElements = {
     createCardModalButton: document.querySelector("#open-new-card-modal-button"),
     importPinsModalButton: document.querySelector("#open-import-pins-modal-button"),
-    openOptionsModalButton: document.querySelector("#open-options-modal-button")
+    openOptionsModalButton: document.querySelector("#open-options-modal-button"),
 };
 
 const cardModalElements = {
@@ -24,10 +24,9 @@ const cardModalElements = {
 
 const optionsModalElements = {
     modal: document.querySelector("#options-modal"),
-    save: document.querySelector("#options-modal #save-options-button")
+    save: document.querySelector("#options-modal #save-options-button"),
 };
 
-
 const fileInput = document.querySelector("#file");
 
 const cardModalBootstrap = new bootstrap.Modal(cardModalElements.modal);
@@ -45,7 +44,7 @@ const constants = {
         keys: {
             cards: "cards",
             pins: "pins",
-            settings: "settings"
+            settings: "settings",
         },
     },
     flags: {
@@ -80,7 +79,7 @@ function addEventListeners() {
         const file = fileInput.files[0];
         console.log(file);
         const reader = new FileReader();
-        reader.onload = content => importPins(content.target.result);
+        reader.onload = (content) => importPins(content.target.result);
         reader.readAsText(file);
     });
 
@@ -108,21 +107,18 @@ let pin = {
     toread: "",
 };
 
-
 function importPins(json) {
-    JSON.parse(json).forEach(pin => {
+    JSON.parse(json).forEach((pin) => {
         if (!addPin(pin)) throw new Error("WHOOPS");
     });
 }
 
 function logPins() {
-    database
-        .get(constants.database.keys.pins)
-        .then(pins => {
-            pins.data.forEach(element => {
-                console.log(element);
-            });
+    database.get(constants.database.keys.pins).then((pins) => {
+        pins.data.forEach((element) => {
+            console.log(element);
         });
+    });
 }
 
 function addPin(pin) {
@@ -153,7 +149,10 @@ function addPin(pin) {
                     .then((added) => {
                         console.log("created pins");
                     })
-                    .catch((err) => { logError("failed to create pins", err); return false; });
+                    .catch((err) => {
+                        logError("failed to create pins", err);
+                        return false;
+                    });
             } else {
                 logError("failed to update pins", err);
                 return false;
@@ -161,7 +160,6 @@ function addPin(pin) {
         });
 }
 
-
 function openEditCardModal(id) {
     if (!id) return;
     database
@@ -293,7 +291,6 @@ function addOrUpdateCard(card) {
         });
 }
 
-
 function logError(msg, error) {
     console.error("!!!");
     console.error(msg);
@@ -318,40 +315,42 @@ function renderCards() {
     database
         .get(constants.database.keys.cards)
         .then((cardDoc) => {
-            cardDoc.data.sort((a, b) => a.order - b.order).forEach((card) => {
-                let columElement = document.createElement("div");
-                columElement.className = "col";
-                let cardElement = document.createElement("div");
-                cardElement.className = "card";
-                columElement.appendChild(cardElement);
-                let cardHeader = document.createElement("div");
-                cardHeader.className =
-                    "card-header d-flex text-truncate justify-content-between align-items-center";
-                let cardHeaderText = document.createElement("span");
-                cardHeaderText.innerText = card.name;
-                cardHeader.appendChild(cardHeaderText);
-                let cardHeaderEditButton = document.createElement("img");
-                cardHeaderEditButton.src = "assets/icons/pencil-square.svg";
-                cardHeaderEditButton.title = "Rediger " + card.name;
-                cardHeaderEditButton.width = "18";
-                cardHeaderEditButton.type = "button";
-                cardHeaderEditButton.height = "18";
-                cardHeaderEditButton.onclick = () => openEditCardModal(card._id);
-                cardHeader.appendChild(cardHeaderEditButton);
-                cardElement.appendChild(cardHeader);
-                let linkList = document.createElement("ul");
-                linkList.className = "list-group list-group-flush";
-                card.links.forEach((link) => {
-                    let listItem = document.createElement("a");
-                    listItem.innerText = link.name;
-                    listItem.className = "list-group-item";
-                    listItem.href = link.url;
-                    linkList.appendChild(listItem);
+            cardDoc.data
+                .sort((a, b) => a.order - b.order)
+                .forEach((card) => {
+                    let columElement = document.createElement("div");
+                    columElement.className = "col-sm-6 col-lg-4 mb-4";
+                    let cardElement = document.createElement("div");
+                    cardElement.className = "card";
+                    columElement.appendChild(cardElement);
+                    let cardHeader = document.createElement("div");
+                    cardHeader.className =
+                        "card-header d-flex text-truncate justify-content-between align-items-center";
+                    let cardHeaderText = document.createElement("span");
+                    cardHeaderText.innerText = card.name;
+                    cardHeader.appendChild(cardHeaderText);
+                    let cardHeaderEditButton = document.createElement("img");
+                    cardHeaderEditButton.src = "assets/icons/pencil-square.svg";
+                    cardHeaderEditButton.title = "Rediger " + card.name;
+                    cardHeaderEditButton.width = "18";
+                    cardHeaderEditButton.type = "button";
+                    cardHeaderEditButton.height = "18";
+                    cardHeaderEditButton.onclick = () => openEditCardModal(card._id);
+                    cardHeader.appendChild(cardHeaderEditButton);
+                    cardElement.appendChild(cardHeader);
+                    let linkList = document.createElement("ul");
+                    linkList.className = "list-group list-group-flush";
+                    card.links.forEach((link) => {
+                        let listItem = document.createElement("a");
+                        listItem.innerText = link.name;
+                        listItem.className = "list-group-item";
+                        listItem.href = link.url;
+                        linkList.appendChild(listItem);
+                    });
+                    cardElement.appendChild(linkList);
+                    cardsContainer.append(columElement);
                 });
-                cardElement.appendChild(linkList);
-                cardsContainer.append(columElement);
-            });
-
+            new Masonry(cardsContainer);
         })
         .catch((error) => {
             if (error.status !== 404) logError(error);
@@ -376,4 +375,3 @@ Element.prototype.empty = function () {
 };
 
 initialize();
-