EZSCALE/virtfusion-whmcs-module
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

fix: constrain OS icon sizing and remove background when image loads

Browse Source 
- Add overflow:hidden to .vf-os-card and .vf-os-icon
- Constrain .vf-os-icon img with max-width/max-height:100%
- Only apply brand color background as fallback when image fails to load
- No background color when image is present (clean transparent display)
- Apply same logic to both category headers and template cards
- Update both module.js (rebuild panel) and hooks.php (checkout page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Prophet731
2026-03-19 14:10:01 -05:00
parent 6528c8a53a
commit 6694a5e44d
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
modules/servers/VirtFusionDirect/hooks.php
View File

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