diff --git a/modules/servers/VirtFusionDirect/hooks.php b/modules/servers/VirtFusionDirect/hooks.php index 9064704..c4a660f 100644 --- a/modules/servers/VirtFusionDirect/hooks.php +++ b/modules/servers/VirtFusionDirect/hooks.php @@ -187,14 +187,14 @@ add_hook('ClientAreaFooterOutput', 1, function ($vars) { var catIcon = document.createElement('span'); catIcon.className = 'vf-os-category-icon'; - catIcon.style.background = catColor; if (cat.icon && osGalleryData.baseUrl) { var catImg = document.createElement('img'); catImg.src = osGalleryData.baseUrl + '/img/logo/' + encodeURIComponent(cat.icon); catImg.alt = ''; - catImg.onerror = function() { this.parentNode.textContent = (cat.name || '?')[0].toUpperCase(); }; + catImg.onerror = function() { this.parentNode.style.background = catColor; this.parentNode.textContent = (cat.name || '?')[0].toUpperCase(); }; catIcon.appendChild(catImg); } else { + catIcon.style.background = catColor; catIcon.textContent = (cat.name || '?')[0].toUpperCase(); } @@ -235,14 +235,14 @@ add_hook('ClientAreaFooterOutput', 1, function ($vars) { var iconDiv = document.createElement('div'); iconDiv.className = 'vf-os-icon'; - iconDiv.style.background = catColor; if (tpl.icon && osGalleryData.baseUrl) { var tplImg = document.createElement('img'); tplImg.src = osGalleryData.baseUrl + '/img/logo/' + encodeURIComponent(tpl.icon); tplImg.alt = ''; - tplImg.onerror = function() { this.parentNode.textContent = ''; var s = document.createElement('span'); s.textContent = (tpl.name || '?')[0].toUpperCase(); this.parentNode.appendChild(s); }; + tplImg.onerror = function() { this.parentNode.style.background = catColor; this.parentNode.textContent = ''; var s = document.createElement('span'); s.textContent = (tpl.name || '?')[0].toUpperCase(); this.parentNode.appendChild(s); }; iconDiv.appendChild(tplImg); } else { + iconDiv.style.background = catColor; var sp = document.createElement('span'); sp.textContent = (tpl.name || '?')[0].toUpperCase(); iconDiv.appendChild(sp); diff --git a/modules/servers/VirtFusionDirect/templates/css/module.css b/modules/servers/VirtFusionDirect/templates/css/module.css index 1bd1a59..58ba6a1 100644 --- a/modules/servers/VirtFusionDirect/templates/css/module.css +++ b/modules/servers/VirtFusionDirect/templates/css/module.css @@ -302,6 +302,7 @@ padding: 10px 8px; text-align: center; cursor: pointer; + overflow: hidden; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; } .vf-os-card:hover { @@ -326,8 +327,12 @@ color: #fff; font-weight: 700; font-size: 1.1rem; + overflow: hidden; + flex-shrink: 0; } .vf-os-icon img { + max-width: 100%; + max-height: 100%; width: 24px; height: 24px; object-fit: contain; diff --git a/modules/servers/VirtFusionDirect/templates/js/module.js b/modules/servers/VirtFusionDirect/templates/js/module.js index ae18c24..d7553bf 100644 --- a/modules/servers/VirtFusionDirect/templates/js/module.js +++ b/modules/servers/VirtFusionDirect/templates/js/module.js @@ -336,13 +336,16 @@ function vfRenderOsGallery(container, data, hiddenInput) { // Accordion header var header = $('
'); - var iconSpan = $('').css("background", brandColor); + var iconSpan = $(''); if (category.icon && baseUrl) { var catImg = $('').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(category.icon)); - catImg.on("error", function () { $(this).replaceWith($('').text((category.name || "?")[0].toUpperCase())); }); + catImg.on("error", function () { + $(this).parent().css("background", brandColor); + $(this).replaceWith($('').text((category.name || "?")[0].toUpperCase())); + }); iconSpan.append(catImg); } else { - iconSpan.text((category.name || "?")[0].toUpperCase()); + iconSpan.css("background", brandColor).text((category.name || "?")[0].toUpperCase()); } var titleSpan = $('').text(category.name + " (" + category.templates.length + ")"); var arrow = $('' + (ci === 0 ? '▼' : '▶') + ''); @@ -372,12 +375,16 @@ function vfRenderOsGallery(container, data, hiddenInput) { .attr("data-search", label.toLowerCase()); if (tpl.eol) card.addClass("vf-os-card-eol"); - var iconDiv = $('
').css("background", brandColor); + var iconDiv = $('
'); if (tpl.icon && baseUrl) { var tplImg = $('').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(tpl.icon)); - tplImg.on("error", function () { $(this).replaceWith($('').text((tpl.name || "?")[0].toUpperCase())); }); + tplImg.on("error", function () { + $(this).parent().css("background", brandColor); + $(this).replaceWith($('').text((tpl.name || "?")[0].toUpperCase())); + }); iconDiv.append(tplImg); } else { + iconDiv.css("background", brandColor); iconDiv.append($('').text((tpl.name || "?")[0].toUpperCase())); }