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 = $('