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

5
modules/servers/VirtFusionDirect/templates/css/module.css
View File

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

17
modules/servers/VirtFusionDirect/templates/js/module.js
View File

@@ -336,13 +336,16 @@ function vfRenderOsGallery(container, data, hiddenInput) {
// Accordion header
var header = $('<div class="vf-os-category-header"></div>');
var iconSpan = $('<span class="vf-os-category-icon"></span>').css("background", brandColor);
var iconSpan = $('<span class="vf-os-category-icon"></span>');
if (category.icon && baseUrl) {
var catImg = $('<img alt="">').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(category.icon));
catImg.on("error", function () { $(this).replaceWith($('<span></span>').text((category.name || "?")[0].toUpperCase())); });
catImg.on("error", function () {
$(this).parent().css("background", brandColor);
$(this).replaceWith($('<span></span>').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 = $('<span></span>').text(category.name + " (" + category.templates.length + ")");
var arrow = $('<span class="vf-os-category-arrow">' + (ci === 0 ? '&#9660;' : '&#9654;') + '</span>');
@@ -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 = $('<div class="vf-os-icon"></div>').css("background", brandColor);
var iconDiv = $('<div class="vf-os-icon"></div>');
if (tpl.icon && baseUrl) {
var tplImg = $('<img alt="">').attr("src", baseUrl + "/img/logo/" + encodeURIComponent(tpl.icon));
tplImg.on("error", function () { $(this).replaceWith($('<span></span>').text((tpl.name || "?")[0].toUpperCase())); });
tplImg.on("error", function () {
$(this).parent().css("background", brandColor);
$(this).replaceWith($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
});
iconDiv.append(tplImg);
} else {
iconDiv.css("background", brandColor);
iconDiv.append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
}