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:
parent
45f8c80ceb
commit
89c548bb86
1 changed files with 6 additions and 34 deletions
40
index.html
40
index.html
|
|
@ -217,12 +217,9 @@
|
|||
.join-msg{font-family:'Roboto Mono',monospace;font-size:13px;min-height:20px;margin-bottom:8px}
|
||||
.join-msg.success{color:#11cc77}
|
||||
.join-msg.error{color:#ff0099}
|
||||
/* ── Flag & share-image buttons ── */
|
||||
.flag-btn{background:none;border:none;color:#444;font-size:12px;cursor:pointer;padding:4px 6px;font-family:'Roboto Mono',monospace;transition:color .15s}
|
||||
.flag-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}
|
||||
/* ── Card action buttons (share / card) ── */
|
||||
.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}
|
||||
.card-action-btn:hover{color:#ff0099}
|
||||
/* ── Postcode badge ── */
|
||||
.postcode-badge{font-size:10px;color:#555;font-family:'Roboto Mono',monospace}
|
||||
.postcode-badge span{color:#ff0099}
|
||||
|
|
@ -938,30 +935,7 @@ async function safeFetch(url, options = {}) {
|
|||
}
|
||||
|
||||
|
||||
// Function to initialize share buttons
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
function initializeShareButtons() {}
|
||||
|
||||
// Updated fetchProposals with fallback mechanism
|
||||
async function fetchProposals() {
|
||||
|
|
@ -1127,10 +1101,8 @@ function initializeShareButtons() {
|
|||
</button>
|
||||
<span class="net-votes ${voteClass}">${netVotes > 0 ? '+' : ''}${netVotes}</span>
|
||||
${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)}');">
|
||||
<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;">
|
||||
</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>
|
||||
<button class="card-action-btn" onclick="event.stopPropagation();event.preventDefault();smartCopyShare('${proposal.id}','${encodeURIComponent(proposal.text)}')">share ↗</button>
|
||||
<button class="card-action-btn" onclick="event.stopPropagation();event.preventDefault();window.open('${API_BASE_URL}/petition-svg?id=${proposal.id}','_blank')">card ↗</button>
|
||||
</div>
|
||||
<div class="proposal-time">${formatDate(proposal.timestamp)}</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue