Move card logo to bottom right with absolute positioning, fix duplication
All checks were successful
Build and Push Docker Image / build (push) Successful in 23s
Licence Check / Licence compatibility and copyright header verification (push) Successful in 41s
CI / Security audit (push) Successful in 1m14s
CI / Tests & coverage (push) Successful in 1m18s

This commit is contained in:
2026-05-20 00:37:01 +01:00
parent ff7ace9f4f
commit 712c98d817
2 changed files with 44 additions and 34 deletions

View File

@@ -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';