feat: 动态调整 Toast 提示框的顶部偏移量,优化显示效果
This commit is contained in:
@@ -756,7 +756,7 @@ header {
|
|||||||
|
|
||||||
#toast-container {
|
#toast-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: var(--toast-top-offset, 12px);
|
bottom: 12px;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ const btnAutoStartClose = document.getElementById('btn-auto-start-close');
|
|||||||
const btnAutoStartCancel = document.getElementById('btn-auto-start-cancel');
|
const btnAutoStartCancel = document.getElementById('btn-auto-start-cancel');
|
||||||
const btnAutoStartRestart = document.getElementById('btn-auto-start-restart');
|
const btnAutoStartRestart = document.getElementById('btn-auto-start-restart');
|
||||||
const btnAutoStartContinue = document.getElementById('btn-auto-start-continue');
|
const btnAutoStartContinue = document.getElementById('btn-auto-start-continue');
|
||||||
const pageHeader = document.querySelector('header');
|
|
||||||
const STEP_DEFAULT_STATUSES = {
|
const STEP_DEFAULT_STATUSES = {
|
||||||
1: 'pending',
|
1: 'pending',
|
||||||
2: 'pending',
|
2: 'pending',
|
||||||
@@ -114,13 +113,6 @@ function dismissToast(toast) {
|
|||||||
toast.addEventListener('animationend', () => toast.remove());
|
toast.addEventListener('animationend', () => toast.remove());
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateToastOffset() {
|
|
||||||
if (!toastContainer) return;
|
|
||||||
const headerBottom = pageHeader?.getBoundingClientRect().bottom ?? 0;
|
|
||||||
const offset = Math.max(12, Math.ceil(headerBottom + 8));
|
|
||||||
document.documentElement.style.setProperty('--toast-top-offset', `${offset}px`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetActionModalButtons() {
|
function resetActionModalButtons() {
|
||||||
const buttons = [btnAutoStartCancel, btnAutoStartRestart, btnAutoStartContinue];
|
const buttons = [btnAutoStartCancel, btnAutoStartRestart, btnAutoStartContinue];
|
||||||
buttons.forEach((button) => {
|
buttons.forEach((button) => {
|
||||||
@@ -1110,13 +1102,7 @@ btnTheme.addEventListener('click', () => {
|
|||||||
|
|
||||||
initializeManualStepActions();
|
initializeManualStepActions();
|
||||||
initTheme();
|
initTheme();
|
||||||
updateToastOffset();
|
|
||||||
updateSaveButtonState();
|
updateSaveButtonState();
|
||||||
window.addEventListener('resize', updateToastOffset);
|
|
||||||
window.addEventListener('load', updateToastOffset);
|
|
||||||
if (document.fonts?.ready) {
|
|
||||||
document.fonts.ready.then(updateToastOffset).catch(() => { });
|
|
||||||
}
|
|
||||||
restoreState().then(() => {
|
restoreState().then(() => {
|
||||||
syncPasswordToggleLabel();
|
syncPasswordToggleLabel();
|
||||||
syncVpsUrlToggleLabel();
|
syncVpsUrlToggleLabel();
|
||||||
|
|||||||
Reference in New Issue
Block a user