fix(revenue): stop poster modal from blocking the whole revenue page
Two regressions from the previous commit made /user/revenue/ unusable.
The rewrite dropped data-aksrt-affiliate-poster-modal from the modal shell.
That single attribute was both the JS lookup key and the CSS hook, so
initAffiliatePoster() bailed at `if (!button || !modal) return` — which is
why the 推广海报 button never got un-hidden — and no CSS could target the
shell. Restore it.
With the shell back but still visible, main.css's .flex{display:flex} loads
after bootstrap and matches .modal{display:none} on specificity, so the
resting modal rendered as a full-viewport flex box. Combined with .fade's
opacity:0 that is an invisible overlay swallowing every click on the page.
Pin the resting state to display:none and the open state to flex, the same
way credits.css already does for the charge and points-pay modals — that
file documents this exact trap.
Add a contract test asserting the markup, JS selector and CSS hook share
one attribute and that the resting state is explicitly hidden.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
de0e5cd481
commit
9a22c7eb8b
3 files changed
+29
-1
No files matched your search
@@ -190,6 +190,17 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 推广海报弹窗壳与上面两个同构(服务端静态输出 .modal.flex.jc.fade),
|
||||||
|
静止态同样必须显式隐藏,否则 .flex 工具类会使其铺满全屏形成隐形遮罩,
|
||||||
|
拦截整页点击。打开态由 initAffiliatePoster 的内联 display:flex 驱动,
|
||||||
|
关闭撤除内联样式后即回到隐藏规则。 */
|
||||||
|
.modal[data-aksrt-affiliate-poster-modal] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal[data-aksrt-affiliate-poster-modal].in {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.balance-charge-form .zib-widget {
|
.balance-charge-form .zib-widget {
|
||||||
clear: both;
|
clear: both;
|
||||||
background-color: var(--main-bg-color);
|
background-color: var(--main-bg-color);
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ if (!empty($GLOBALS['aksrt_affiliate_poster_modal_rendered'])) {
|
|||||||
}
|
}
|
||||||
$GLOBALS['aksrt_affiliate_poster_modal_rendered'] = true;
|
$GLOBALS['aksrt_affiliate_poster_modal_rendered'] = true;
|
||||||
?>
|
?>
|
||||||
<div class="modal fade flex jc" id="aksrt-affiliate-poster-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
<div class="modal fade flex jc" id="aksrt-affiliate-poster-modal" data-aksrt-affiliate-poster-modal tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
<div class="modal-dialog poster-share hover-show" role="document">
|
<div class="modal-dialog poster-share hover-show" role="document">
|
||||||
<div class="modal-content" style="height:220px;overflow:hidden">
|
<div class="modal-content" style="height:220px;overflow:hidden">
|
||||||
<div class="poster-imgbox hover-show" data-affiliate-poster-stage></div>
|
<div class="poster-imgbox hover-show" data-affiliate-poster-stage></div>
|
||||||
|
|||||||
@@ -126,6 +126,23 @@ test('poster modal markup is a 1:1 replica of the reference poster-share dialog'
|
|||||||
assert.doesNotMatch(css, /uc-affiliate-poster/)
|
assert.doesNotMatch(css, /uc-affiliate-poster/)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
test('poster modal shell is hidden at rest so it cannot block the whole page', () => {
|
||||||
|
const modal = read('inc', 'helpers', 'user-center-renderers', 'affiliate-poster-modal.php')
|
||||||
|
const script = read('assets', 'js', 'credits.js')
|
||||||
|
const css = read('assets', 'css', 'routes', 'user-center', 'credits.css')
|
||||||
|
|
||||||
|
// 标记、JS 查询与 CSS 钩子必须共用同一个属性,缺一即失效:
|
||||||
|
// 少了标记上的属性,JS 拿不到弹窗、CSS 也隐藏不了它。
|
||||||
|
assert.match(modal, /data-aksrt-affiliate-poster-modal/)
|
||||||
|
assert.match(script, /querySelector\('\[data-aksrt-affiliate-poster-modal\]'\)/)
|
||||||
|
|
||||||
|
// 服务端静态输出的 .modal.flex 必须显式隐藏。main.css 的 .flex{display:flex}
|
||||||
|
// 后加载且与 bootstrap 的 .modal{display:none} 同特异性,不在此回位就会让
|
||||||
|
// 静止态弹窗铺满全屏,叠加 .fade 的 opacity:0 形成隐形遮罩、拦截整页点击。
|
||||||
|
assert.match(css, /\.modal\[data-aksrt-affiliate-poster-modal\]\s*\{\s*display:\s*none;/)
|
||||||
|
assert.match(css, /\.modal\[data-aksrt-affiliate-poster-modal\]\.in\s*\{\s*display:\s*flex;/)
|
||||||
|
})
|
||||||
|
|
||||||
test('invite-code input verifies live against the public REST endpoint', () => {
|
test('invite-code input verifies live against the public REST endpoint', () => {
|
||||||
const template = read('templates', 'parts', 'auth-content.php')
|
const template = read('templates', 'parts', 'auth-content.php')
|
||||||
assert.match(template, /data-invite-verify/)
|
assert.match(template, /data-invite-verify/)
|
||||||
|
|||||||
Reference in new issue
Block a user