diff --git a/public/app.js b/public/app.js index 6332ac1..66007a2 100644 --- a/public/app.js +++ b/public/app.js @@ -444,23 +444,29 @@ function renderDownloads() { } function updateDownloadCard(card, download) { - // Remove old header-right container if it exists (to prevent duplicates) + // Remove old header-right container if it exists const oldRightSide = card.querySelector('.download-header-right'); if (oldRightSide) { oldRightSide.remove(); } - // Remove old user badges directly in header (old structure) + // Remove old user badges directly in header const oldBadges = card.querySelectorAll('.download-header .download-user-badge'); oldBadges.forEach(badge => badge.remove()); - // Remove old client logo directly in header (old structure) - const oldLogo = card.querySelector('.download-header .download-client-logo-wrapper'); - if (oldLogo) { - oldLogo.remove(); + // Remove old client logo from header (old structure) + const oldLogoInHeader = card.querySelector('.download-header .download-client-logo-wrapper'); + if (oldLogoInHeader) { + oldLogoInHeader.remove(); } - // Add new right-side container with user badge and logo + // Remove old client logo from card (new structure) if it exists + const oldLogoInCard = card.querySelector('.download-card-logo-wrapper'); + if (oldLogoInCard) { + oldLogoInCard.remove(); + } + + // Add new right-side container with user badge only const header = card.querySelector('.download-header'); if (header && !header.querySelector('.download-header-right')) { const rightSide = document.createElement('div'); @@ -488,27 +494,28 @@ function updateDownloadCard(card, download) { rightSide.appendChild(matchedBadge); } - if (download.client) { - const clientLogoWrapper = document.createElement('span'); - clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper'; - - const clientLogo = document.createElement('img'); - clientLogo.className = 'download-client-logo'; - clientLogo.src = `/images/clients/${download.client}.svg`; - clientLogo.alt = `${download.instanceName || download.client} icon`; - clientLogo.title = download.instanceName || download.client; - clientLogo.onerror = () => { - clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); - clientLogoWrapper.classList.add('fallback'); - }; - - clientLogoWrapper.appendChild(clientLogo); - rightSide.appendChild(clientLogoWrapper); - } - header.appendChild(rightSide); } + // Add client logo to card (positioned at bottom right via CSS) + if (download.client && !card.querySelector('.download-card-logo-wrapper')) { + const clientLogoWrapper = document.createElement('span'); + clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper'; + + const clientLogo = document.createElement('img'); + clientLogo.className = 'download-client-logo'; + clientLogo.src = `/images/clients/${download.client}.svg`; + clientLogo.alt = `${download.instanceName || download.client} icon`; + clientLogo.title = download.instanceName || download.client; + clientLogo.onerror = () => { + clientLogoWrapper.textContent = download.client.charAt(0).toUpperCase(); + clientLogoWrapper.classList.add('fallback'); + }; + + clientLogoWrapper.appendChild(clientLogo); + card.appendChild(clientLogoWrapper); + } + // Update status const statusEl = card.querySelector('.download-status'); if (statusEl && statusEl.textContent !== download.status) { @@ -685,7 +692,7 @@ function createDownloadCard(download) { header.appendChild(blBtn); } - // Right side container for user badge and client logo + // Right side container for user badge only const rightSide = document.createElement('div'); rightSide.className = 'download-header-right'; @@ -715,7 +722,9 @@ function createDownloadCard(download) { rightSide.appendChild(matchedBadge); } - // Add client logo + header.appendChild(rightSide); + + // Add client logo to card (positioned at bottom right via CSS) if (download.client) { const clientLogoWrapper = document.createElement('span'); clientLogoWrapper.className = 'download-client-logo-wrapper download-card-logo-wrapper'; @@ -732,10 +741,8 @@ function createDownloadCard(download) { }; clientLogoWrapper.appendChild(clientLogo); - rightSide.appendChild(clientLogoWrapper); + card.appendChild(clientLogoWrapper); } - - header.appendChild(rightSide); const title = document.createElement('h3'); title.className = 'download-title'; diff --git a/public/style.css b/public/style.css index f6a4d38..b142d42 100644 --- a/public/style.css +++ b/public/style.css @@ -1429,10 +1429,13 @@ body { justify-content: center; } -/* Card-specific logo wrapper (4x larger) */ +/* Card-specific logo wrapper positioned at bottom right */ .download-card-logo-wrapper { - width: 64px; - height: 64px; + width: 48px; + height: 48px; + position: absolute; + bottom: 8px; + right: 8px; } .download-client-logo { @@ -1450,7 +1453,7 @@ body { } .download-card-logo-wrapper.fallback { - font-size: 40px; + font-size: 30px; border-radius: 4px; }