crowetic/Q-Mintership-Alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual card improvements, validation fixes.

Browse Source
This commit is contained in:
crowetic 2024-12-11 17:44:04 -08:00
parent 8944154556
commit e44c83e592
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/forum-styles.css
View File

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

11
assets/js/MinterBoard.js
View File

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