change to version 1.06.4b, modified MinterBoard Card Filtering and header options, header layout, and header itself. Will modify other boards in the future. Default for card display is now 45 days, and it has been made more clear in regard to what the selected options do. Color changes on buttons as well.

This commit is contained in:
crowetic 2025-02-22 18:05:35 -08:00
parent 509e3bf357
commit e0c5a09378
4 changed files with 101 additions and 70 deletions

View File

@ -708,31 +708,6 @@ body {
} }
/* Responsive design */
@media (max-width: 768px) {
.publish-card-view {
width: 90%;
padding: 2vh;
}
.publish-card-button {
font-size: 1.8vh;
padding: 1.5vh;
}
.publish-card-form button {
font-size: 1.8vh;
padding: 1.2vh;
}
}
.refresh-cards-button {
border-color: white;
border-radius: 1.5vh;
background-color: black;
color: white;
}
/* Responsive Design */ /* Responsive Design */
@media (max-width: 768px) { @media (max-width: 768px) {
.publish-card-view { .publish-card-view {
@ -754,8 +729,14 @@ body {
.refresh-cards-button { .refresh-cards-button {
border-color: white; border-color: white;
border-radius: 1.5vh; border-radius: 1.5vh;
background-color: black; background-color: rgba(0, 0, 0, 0.089);
color: white; color: white;
font-size: 0.9rem;
}
.refresh-cards-button:hover {
background-color: rgba(35, 129, 136, 0.137);
color: rgba(90, 201, 221, 0.793);
} }
/* Two cards per row on medium screens */ /* Two cards per row on medium screens */

View File

@ -25,40 +25,90 @@ const loadMinterBoardPage = async () => {
const publishButtonColor = '#527c9d' const publishButtonColor = '#527c9d'
const minterBoardNameColor = '#527c9d' const minterBoardNameColor = '#527c9d'
mainContent.innerHTML = ` mainContent.innerHTML = `
<div class="minter-board-main" style="padding: 20px; text-align: center;"> <div class="minter-board-main" style="padding: 0.5vh; text-align: center;">
<h1 style="color: ${minterBoardNameColor};">Minter Board</h1>
<p style="font-size: 1.25em;"> Publish a Minter Card with Information, and obtain and view the support of the community. Welcome to the Minter Board!</p> <!-- Board Title + Intro -->
<button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px; background-color: ${publishButtonColor}">Publish Minter Card</button> <h1 style="color: #527c9d;">The Minter Board</h1>
<button id="refresh-cards-button" class="refresh-cards-button" style="padding: 10px;">Refresh Cards</button> <p style="font-size: 1.2em; color:rgb(85, 119, 101)">
<select id="sort-select" style="margin-left: 10px; padding: 5px; font-size: 1.25rem; color:rgb(38, 106, 106); background-color: black;"> The Minter Board is where Minting Rights are Delegated.
<option value="newest" selected>Sort by Date</option> </p>
<option value="name">Sort by Name</option> <p style="font-size: 1.1em; color:rgb(85, 119, 119)">
To obtain minting rights, click 'PUBLISH CARD' and create your card. A subsequent vote will approve/deny your card.
</p>
<p>
After your card has received the necessary invite, return to the card and click the Join Group button to join the MINTER group.
(A Detailed how-to guide will be coming soon.)
</p>
<div class="card-display-options">
<!-- Centered heading -->
<h4 class="options-heading"style="color: #527c9d;">CARD DISPLAY OPTIONS</h4>
<!-- A flex container for all the controls (sort, time range, checkbox) -->
<div class="options-row">
<!-- Sort by -->
<label for="sort-select" class="options-label">Sort By:</label>
<select id="sort-select" class="options-select">
<option value="newest" selected>Date</option>
<option value="name">Name</option>
<option value="recent-comments">Newest Comments</option> <option value="recent-comments">Newest Comments</option>
<option value="least-votes">Least Votes</option> <option value="least-votes">Least Votes</option>
<option value="most-votes">Most Votes</option> <option value="most-votes">Most Votes</option>
</select> </select>
<span id="board-card-counter" style="font-size: 1rem; color: #999ccc; padding: 0.5em;"></span>
<select id="time-range-select" style="margin-left: 10px; padding: 5px; font-size: 1.25rem; color: white; background-color: black;"> <!-- Time range -->
<option value="0">All Creation Dates</option> <label for="time-range-select" class="options-label">Show Cards:</label>
<option value="1">Last 1 Day</option> <select id="time-range-select" class="options-select">
<option value="7">Last 7 Days</option> <option value="0">Show ALL Cards Published</option>
<option value="1">...Within Last 1 Day</option>
<option value="7">...Within Last 7 Days</option>
<option value="30">...Within 30 Days</option> <option value="30">...Within 30 Days</option>
<option value="45" selected>Published Within Last 45 Days</option> <option value="45" selected>Published Within Last 45 Days</option>
<option value="60">...Within 60 Days</option> <option value="60">...Within 60 Days</option>
<option value="90">...Within 90 Days</option> <option value="90">...Within 90 Days</option>
</select> </select>
<label style="color:rgb(181, 181, 181); margin-left: 10px;">
<!-- Show existing checkbox -->
<label class="options-check">
<input type="checkbox" id="show-existing-checkbox" /> <input type="checkbox" id="show-existing-checkbox" />
Show Existing Minter Cards (history) Show Existing Minter Cards (History)
</label> </label>
<div id="cards-container" class="cards-container" style="margin-top: 20px;"></div> </div>
<div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;"> </div>
<!-- Card counter heading centered, with actual counter below if desired -->
<div style="margin-bottom: 1em;">
<div style="text-align: center; margin-top: 0.5em;">
<span id="board-card-counter" style="font-size: 1rem; color:rgb(153, 203, 204); padding: 0.5em;">
<!-- e.g. "5 cards found" -->
</span>
</div>
</div>
<!-- Row for Publish / Refresh actions -->
<div class="card-actions" style="margin-bottom: 1em;">
<button id="publish-card-button" class="publish-card-button">
PUBLISH CARD
</button>
<button id="refresh-cards-button" class="refresh-cards-button"
style="padding: 1vh;">
REFRESH CARDS
</button>
</div>
<!-- Container for displayed cards -->
<div id="cards-container" class="cards-container" style="margin-top: 2vh;"></div>
<!-- Hidden Publish Card Form -->
<div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 2vh;">
<form id="publish-card-form" class="publish-card-form"> <form id="publish-card-form" class="publish-card-form">
<h3>Create or Update Your Card</h3> <h3>Create or Update Your Card</h3>
<label for="card-header">Header:</label> <label for="card-header">Header:</label>
<input type="text" id="card-header" maxlength="100" placeholder="Enter card header" required> <input type="text" id="card-header" maxlength="100" placeholder="Enter card header" required>
<label for="card-content">Content:</label> <label for="card-content">Content:</label>
<textarea id="card-content" placeholder="Enter detailed information about why you would like to be a minter... the more the better, and links to things you have published on QDN will help a lot! Give the Minter Admins things to make decisions by!" required></textarea> <textarea id="card-content" placeholder="Enter detailed information about why you would like to be a minter... the more the better..." required>
</textarea>
<label for="card-links">Links (qortal://...):</label> <label for="card-links">Links (qortal://...):</label>
<div id="links-container"> <div id="links-container">
<input type="text" class="card-link" placeholder="Enter QDN link"> <input type="text" class="card-link" placeholder="Enter QDN link">

View File

@ -1,4 +1,4 @@
const Q_MINTERSHIP_VERSION = "1.06.3" const Q_MINTERSHIP_VERSION = "1.06.4"
const messageIdentifierPrefix = `mintership-forum-message` const messageIdentifierPrefix = `mintership-forum-message`
const messageAttachmentIdentifierPrefix = `mintership-forum-attachment` const messageAttachmentIdentifierPrefix = `mintership-forum-attachment`

View File

@ -207,7 +207,7 @@
<div class="col-12 col-lg-5 card"> <div class="col-12 col-lg-5 card">
<div class="text-wrapper"> <div class="text-wrapper">
<p class="mbr-text mbr-fonts-style display-7"> <p class="mbr-text mbr-fonts-style display-7">
<b class="version"><u>v1.06.2b</u></b>- <b>'after' fixes </b> - See post in the <a href="MINTERSHIP-FORUM">FORUM</a> for RELEASE NOTES. <b class="version"><u>v1.06.4b</u></b>- <b>various improvements</b> - See post in the <a href="MINTERSHIP-FORUM">FORUM</a> for RELEASE NOTES.
</p> </p>
</div> </div>
</div> </div>