increased font sizes and fixed comments not displaying correctly

This commit is contained in:
crowetic 2024-12-11 18:57:50 -08:00
parent 2456498881
commit f0a2a3ea58
3 changed files with 27 additions and 24 deletions

View File

@ -541,17 +541,20 @@ body {
padding: 1.2vh;
}
}
@media (max-width: 768px) {
.minter-card {
flex: 1 1 calc(50% - 20px); /* Two cards per row on medium screens */
}
}
/* Two cards per row on medium screens */
@media (max-width: 480px) {
/* @media (max-width: 768px) {
.minter-card {
flex: 1 1 100%; /* Full-width cards on small screens */
flex: 1 1 calc(50% - 20px);
}
}
} */
/* Full-width cards on small screens */
/* @media (max-width: 480px) {
.minter-card {
flex: 1 1 100%;
}
} */
.minter-card {
background-color: #1e1e2e; /* Dark background */
@ -581,19 +584,22 @@ body {
.minter-card-header h3 {
margin: 0;
font-size: 1.5em;
font-size: 1.6em;
color: #ffae42; /* Highlight for the header */
}
.minter-card h5 {
margin: 0;
font-size: 1.0em;
font-size: 1.4em;
color: lightgreen;
text-align: center;
}
.minter-card p {
font-size: 1.12em;
}
.minter-card-header p {
font-size: 0.9em;
font-size: 1.15em;
color: #cccccc; /* Subdued color for additional header info */
}
@ -609,7 +615,7 @@ body {
.minter-card-results h5 {
margin-bottom: 1vh;
font-size: 1.1vh;
font-size: 1.3em;
color: lightgreen;
text-align: center;
}
@ -622,7 +628,7 @@ body {
.minter-card-results span {
padding: 5px 10px;
border-radius: 8px;
font-size: 0.9em;
font-size: 1.1em;
}
.minter-card-results .admin-yes {
@ -665,7 +671,7 @@ body {
border: 1px solid #d3d3d3; /* Light grey border */
padding: 1rem; /* Add padding inside the section */
margin: 1rem 0; /* Add margin outside the section for spacing */
font-size: 0.75em; /* Set the font size */
font-size: 1.1em; /* 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 */
overflow-y: auto; /* Enable vertical scrolling if content overflows */
@ -769,6 +775,10 @@ body {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}
.comments {
font-size: 1.15em;
}
.comments-container {
margin-bottom: 10px;
max-height: 150px;
@ -801,10 +811,7 @@ textarea::placeholder {
background-color: #0055cc;
}
.minter-card p {
font-size: 12px;
color: gray;
}

View File

@ -33,7 +33,7 @@ async function loadMinterBoardPage() {
mainContent.innerHTML = `
<div class="minter-board-main" style="padding: 20px; text-align: center;">
<h1 style="color: lightblue;">Minter Board</h1>
<p> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p>
<p style="font-size: 1.25em;"> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p>
<button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px;">Publish Minter Card</button>
<div id="cards-container" class="cards-container" style="margin-top: 20px;"></div>
<div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;">
@ -389,9 +389,6 @@ const displayComments = async (cardIdentifier) => {
try {
const comments = await fetchCommentsForCard(cardIdentifier);
const commentsContainer = document.getElementById(`comments-container-${cardIdentifier}`);
// Clear previous comments
commentsContainer.innerHTML = '';
// Fetch and display each comment
for (const comment of comments) {
@ -457,7 +454,6 @@ async function createCardHTML(cardData, pollResults, cardIdentifier) {
const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0 } =
calculatePollResults(pollResults, minterGroupMembers) || {};
return `
<div class="minter-card">
<div class="minter-card-header">

View File

@ -229,7 +229,7 @@
</div>
<a class="link-wrap" href="#">
<p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.22beta</p>
<p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.24beta</p>
</a>
</div>
<div class="col-12 col-lg-6">