Activity Buttons

This commit is contained in:
John husxdev 2025-04-06 17:06:27 -05:00
parent f649adba5f
commit 41eb09e882
7 changed files with 118 additions and 11 deletions

View file

@ -224,6 +224,38 @@ ul {
color: #f0b232;
}
.activity-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.activity-button {
background-color: #5865f2;
color: white;
border: none;
border-radius: 3px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
display: inline-block;
}
.activity-button:hover {
background-color: #4752c4;
text-decoration: none;
}
.activity-button.disabled {
background-color: #4e5058;
cursor: default;
pointer-events: none;
opacity: 0.8;
}
@media (max-width: 600px) {
html {
font-size: clamp(14px, 2vw, 16px);
@ -338,6 +370,17 @@ ul {
margin-top: 0.25rem;
width: 100%;
}
.activity-buttons {
justify-content: center;
margin-top: 0.5rem;
width: 100%;
}
.activity-button {
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
}
/* readme :p */

View file

@ -156,6 +156,26 @@ function buildActivityHTML(activity) {
`
: "";
const activityButtons = activity.buttons && activity.buttons.length > 0
? `<div class="activity-buttons">
${activity.buttons.map((button, index) => {
const buttonLabel = typeof button === 'string' ? button : button.label;
let buttonUrl = null;
if (typeof button === 'object' && button.url) {
buttonUrl = button.url;
}
else if (index === 0 && activity.url) {
buttonUrl = activity.url;
}
if (buttonUrl) {
return `<a href="${buttonUrl}" class="activity-button" target="_blank" rel="noopener noreferrer">${buttonLabel}</a>`;
} else {
return `<span class="activity-button disabled">${buttonLabel}</span>`;
}
}).join('')}
</div>`
: '';
return `
<li class="activity">
${art ? `<img class="activity-art" src="${art}" alt="Art">` : ""}
@ -166,6 +186,7 @@ function buildActivityHTML(activity) {
</div>
${activity.details ? `<div class="activity-detail">${activity.details}</div>` : ""}
${activity.state ? `<div class="activity-detail">${activity.state}</div>` : ""}
${activityButtons}
${progressBar}
</div>
</li>