shukivaknin/gniza4cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Place alert inline below buttons instead of floating

Browse Source 
Add a dedicated alert area div below the action buttons. Alerts
render in normal document flow with proper padding and styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-04 03:23:16 +02:00
parent a4bd26d33a
commit bae2fc9d74
2 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
whm/gniza-whm/remotes.cgi
View File

@@ -601,6 +601,8 @@ sub render_remote_form {
print qq{ <a href="remotes.cgi" class="btn btn-ghost btn-sm">Cancel</a>\n};
print qq{</div>\n};
print qq{<div id="gniza-alert-area" class="mt-4"></div>\n};
print qq{</form>\n};
print <<'JS';
@@ -712,19 +714,16 @@ function gnizaTestConnection() {
}
function gnizaToast(type, msg) {
var prev = document.getElementById('gniza-alert');
if (prev) prev.remove();
var container = document.querySelector('[data-theme]');
if (!container) return;
container.style.position = 'relative';
var area = document.getElementById('gniza-alert-area');
if (!area) return;
area.innerHTML = '';
var el = document.createElement('div');
el.id = 'gniza-alert';
el.className = 'alert alert-' + type;
el.style.cssText = 'position:sticky;top:12px;margin-left:auto;z-index:9999;max-width:480px;padding:12px 20px;border-radius:8px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:opacity .3s';
el.style.cssText = 'padding:12px 20px;border-radius:8px;font-size:14px';
el.textContent = msg;
container.appendChild(el);
area.appendChild(el);
setTimeout(function() { el.style.opacity = '0'; }, type === 'error' ? 6000 : 3000);
setTimeout(function() { el.remove(); }, type === 'error' ? 6500 : 3500);
setTimeout(function() { area.innerHTML = ''; }, type === 'error' ? 6500 : 3500);
}
</script>
JS

17
whm/gniza-whm/setup.cgi
View File

@@ -273,6 +273,8 @@ sub handle_step2 {
print qq{ <a href="setup.cgi" class="btn btn-ghost btn-sm">Back</a>\n};
print qq{</div>\n};
print qq{<div id="gniza-alert-area" class="mt-4"></div>\n};
print qq{</form>\n};
print <<'JS';
@@ -314,19 +316,16 @@ function gnizaTestConnection() {
}
function gnizaToast(type, msg) {
var prev = document.getElementById('gniza-alert');
if (prev) prev.remove();
var container = document.querySelector('[data-theme]');
if (!container) return;
container.style.position = 'relative';
var area = document.getElementById('gniza-alert-area');
if (!area) return;
area.innerHTML = '';
var el = document.createElement('div');
el.id = 'gniza-alert';
el.className = 'alert alert-' + type;
el.style.cssText = 'position:sticky;top:12px;margin-left:auto;z-index:9999;max-width:480px;padding:12px 20px;border-radius:8px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:opacity .3s';
el.style.cssText = 'padding:12px 20px;border-radius:8px;font-size:14px';
el.textContent = msg;
container.appendChild(el);
area.appendChild(el);
setTimeout(function() { el.style.opacity = '0'; }, type === 'error' ? 6000 : 3000);
setTimeout(function() { el.remove(); }, type === 'error' ? 6500 : 3500);
setTimeout(function() { area.innerHTML = ''; }, type === 'error' ? 6500 : 3500);
}
</script>
JS