assets/css/forum-styles.css

@@ -556,9 +556,8 @@ body {
 .minter-card {
   background-color: #1e1e2e; /* Dark background */
   flex: 1 1 calc(33%); 
-  min-width: 22rem; /* Ensure the card never gets smaller than 15rem */
+  min-width: 25rem; /* Ensure the card never gets smaller than 15rem */
-  max-width: 22rem;
+  max-width: calc(25% - 2rem); /* Prevent cards from growing larger than 1/4 */
-  /* max-width: calc(25% - 2rem);  */
   color: #ffffff;
   border: 1px solid #333;
   border-radius: 12px;
@@ -575,10 +574,6 @@ body {
   transform: translateY(-5px); /* Slightly lift card on hover */
 }
 
-.minter-card img {
-  margin-left: 42%;
-}
-
 .minter-card-header h3 {
   margin: 0;
   font-size: 1.5em;
@@ -601,10 +596,7 @@ body {
   margin: 15px 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 8px;
-  align-content: stretch;
-  flex-wrap: wrap;
-  align-items: center;
 }
 
 .minter-card-results h5 {
@@ -667,7 +659,7 @@ body {
   margin: 1rem 0; /* Add margin outside the section for spacing */
   font-size: 0.75em; /* Set the font size */
   line-height: 1.5; /* Optional: Adjust line spacing for better readability */
-  height: calc(1.5 * 750 / 66 * 0.8em); /* Dynamically calculate height to fit 1000 characters */
+  height: calc(1.5 * 1000 / 66 * 0.75em); /* Dynamically calculate height to fit 1000 characters */
   overflow-y: auto; /* Enable vertical scrolling if content overflows */
   border-radius: 8px; /* Optional: Add rounded corners */
   color: #f1f1f1; /* Optional: Light grey text color for readability */
@@ -725,7 +717,7 @@ body {
   color: #ffffff;
   border: none;
   border-radius: 8px;
-  padding: 1vh 1.7rem;
+  padding: 1vh 2.5vh;
   cursor: pointer;
   transition: background-color 0.3s;
 }
@@ -739,7 +731,7 @@ body {
   color: #ffffff;
   border: none;
   border-radius: 8px;
-  padding: 1.0vh 1.7rem;
+  padding: 1.0vh 2.5vh;
   cursor: pointer;
   transition: background-color 0.3s;
 }
@@ -753,7 +745,7 @@ body {
   color: #1e1e2e;
   border: none;
   border-radius: 8px;
-  padding: 1.0vh 1.5rem;
+  padding: 1.0vh 1.5vh;
   cursor: pointer;
   transition: background-color 0.3s;
 }

assets/js/MinterBoard.js

@@ -1,5 +1,5 @@
-// const cardIdentifierPrefix = "test-board-card"
+const cardIdentifierPrefix = "test-board-card"
-const cardIdentifierPrefix = "testMB-board-card";
+// const cardIdentifierPrefix = "testMB-board-card";
 let isExistingCard = false;
 let existingCardData = {};
 let existingCardIdentifier ={};
@@ -273,14 +273,13 @@ async function loadCards() {
     cardsContainer.innerHTML = ""
     const pollResultsCache = {};
 
-    const validCards = response.filter(card => validateCardStructure(card));
+    for (const card of response) {
-
+      const validCard = await validateCardStructure(card)
-    for (const card of validCards) {
       const cardDataResponse = await qortalRequest({
         action: "FETCH_QDN_RESOURCE",
-        name: card.name,
+        name: validCard.name,
         service: "BLOG_POST",
-        identifier: card.identifier,
+        identifier: validCard.identifier,
       });
 
       const cardData = cardDataResponse;
@@ -446,7 +445,7 @@ async function createCardHTML(cardData, pollResults, cardIdentifier) {
   return `
   <div class="minter-card">
     <div class="minter-card-header">
-      <img src="${avatarUrl}" alt="User Avatar" class="user-avatar" style="width: 50px; height: 50px; border-radius: 50%; align-self: center;">
+      <img src="${avatarUrl}" alt="User Avatar" class="user-avatar" style="width: 50px; height: 50px; border-radius: 50%;">
       <h3>${creator}</h3>
       <p>${header}</p>
     </div>