Replace broken share/image buttons with clean text actions

Remove custom-copy-button (relied on missing image file) and share-img-btn
(emoji clashed with monospace aesthetic). Replace both with .card-action-btn
text buttons: 'share ↗' and 'card ↗' — monospace, grey, pink on hover,
consistent with the rest of the card UI.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
King Omar 2026-06-27 03:19:56 +10:00
parent 45f8c80ceb
commit 89c548bb86

View file

@ -217,12 +217,9 @@
.join-msg{font-family:'Roboto Mono',monospace;font-size:13px;min-height:20px;margin-bottom:8px} .join-msg{font-family:'Roboto Mono',monospace;font-size:13px;min-height:20px;margin-bottom:8px}
.join-msg.success{color:#11cc77} .join-msg.success{color:#11cc77}
.join-msg.error{color:#ff0099} .join-msg.error{color:#ff0099}
/* ── Flag & share-image buttons ── */ /* ── Card action buttons (share / card) ── */
.flag-btn{background:none;border:none;color:#444;font-size:12px;cursor:pointer;padding:4px 6px;font-family:'Roboto Mono',monospace;transition:color .15s} .card-action-btn{background:none;border:none;color:#444;font-family:'Roboto Mono',monospace;font-size:11px;cursor:pointer;padding:3px 6px;transition:color .15s;letter-spacing:.3px}
.flag-btn:hover{color:#ff0099} .card-action-btn:hover{color:#ff0099}
.flag-btn.flagged{color:#ff0099}
.share-img-btn{background:none;border:none;color:#444;font-size:12px;cursor:pointer;padding:4px 6px;font-family:'Roboto Mono',monospace;transition:color .15s}
.share-img-btn:hover{color:#ff0099}
/* ── Postcode badge ── */ /* ── Postcode badge ── */
.postcode-badge{font-size:10px;color:#555;font-family:'Roboto Mono',monospace} .postcode-badge{font-size:10px;color:#555;font-family:'Roboto Mono',monospace}
.postcode-badge span{color:#ff0099} .postcode-badge span{color:#ff0099}
@ -938,30 +935,7 @@ async function safeFetch(url, options = {}) {
} }
// Function to initialize share buttons function initializeShareButtons() {}
function initializeShareButtons() {
console.log("Initializing share buttons");
// Find any elements with a share function and add event listeners
const shareButtons = document.querySelectorAll('.custom-copy-button');
if (shareButtons.length > 0) {
shareButtons.forEach(button => {
const proposalId = button.getAttribute('data-id');
button.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
// If you have a smartCopyShare function, use it
if (typeof smartCopyShare === 'function') {
smartCopyShare(proposalId);
} else {
// Fallback to basic copy
const link = getShareableLink(proposalId);
copyToClipboard(link);
}
});
});
}
}
// Updated fetchProposals with fallback mechanism // Updated fetchProposals with fallback mechanism
async function fetchProposals() { async function fetchProposals() {
@ -1127,10 +1101,8 @@ function initializeShareButtons() {
</button> </button>
<span class="net-votes ${voteClass}">${netVotes > 0 ? '+' : ''}${netVotes}</span> <span class="net-votes ${voteClass}">${netVotes > 0 ? '+' : ''}${netVotes}</span>
${postcodeBadge} ${postcodeBadge}
<div class="custom-copy-button" data-id="${proposal.id}" style="display: inline-block; background-color: #000000; border: 0px solid #333333; color: #aaaaaa; padding: 4px 8px; font-size: 20px; position: relative; z-index: 10; cursor: pointer; vertical-align: middle;" onclick="event.stopPropagation(); event.preventDefault(); smartCopyShare('${proposal.id}', '${encodeURIComponent(proposal.text)}');"> <button class="card-action-btn" onclick="event.stopPropagation();event.preventDefault();smartCopyShare('${proposal.id}','${encodeURIComponent(proposal.text)}')">share ↗</button>
<img src="https://theradicalparty.com/memes/share-arrow-icon-md.png" alt="Share" style="width: 20px; height: 14px; filter: brightness(0) invert(1); pointer-events: none;"> <button class="card-action-btn" onclick="event.stopPropagation();event.preventDefault();window.open('${API_BASE_URL}/petition-svg?id=${proposal.id}','_blank')">card ↗</button>
</div>
<button class="share-img-btn" onclick="event.stopPropagation();event.preventDefault();window.open('${API_BASE_URL}/petition-svg?id=${proposal.id}','_blank')" title="Share as image">🖼</button>
</div> </div>
<div class="proposal-time">${formatDate(proposal.timestamp)}</div> <div class="proposal-time">${formatDate(proposal.timestamp)}</div>
</div> </div>