宽表在窄屏真的不横滑了:堆叠判据退回媒体查询,后台三张表补上
真机反馈「手机上还是要左右滑」,两个根因: 1. 上一版把堆叠判据写成了 @container。它按卡片自己的宽度判断更准,但要 iOS 16 / Chrome 105 才支持——旧手机把整块规则当不认识的东西丢掉,表格 完全不堆叠、退化成横滑 328~388px,比改之前还糟。改回 @media,阈值从 620 抬到 800:卡片内容宽 ≈ 视口 − 93,最宽的表 min-width 700,视口 793 以上才放得下,620 那档会让 621~792 两头不靠。 2. /admin/edit 的地点/到访/行程三张表压根没加 tb-stack。它们默认折叠在 data-card 里,探针在默认态量到的是 display:none,前两轮审计都没扫到。 顺带修掉三处被这次改动顶出来的问题: - 宽表卡片不放 g2:/stats /report 有几张表被塞进半宽卡片,视口 1440 时 卡片只有 494px,桌面端照样要横滑 100+px。改成整行(只动含表的那些网格, 「推荐 & 踩雷」「类型分布 + 一天中的分布」这类没有表的仍保持两列)。 - 操作格的 inline white-space:nowrap 会继承进行内编辑表单,堆叠态下 「已选:#403 …」那一行不换行、把卡片顶破。挪成 .ops 类,窄屏放开。 - 行内编辑表单的 min-width 改成 --efw 变量(inline 的 min-width 压不过 CSS 覆盖),堆叠态置 0 让它自然铺满。 导航装不下时右缘渐隐一下,提示还能往右滑;滑到末端自动收掉。用 mask 而不是 盖一层渐变伪元素——伪元素会把链接文字一起遮住。 回归:tb_stack_test.go 补 /admin/edit(12 张表),表头为空的列(如末尾操作格) 不再要求 data-label;新增 wide_table_layout_test.go 守住「宽表卡片必须整行」+ 「凡被 .tw 包住的表必须带 tb-stack」+「堆叠规则必须在 max-width≥792 的 @media 里」。
This commit is contained in:
@@ -22,6 +22,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<script>
|
||||
/* 手机上导航装不下这几项,可以横向滑动(滚动条已隐藏)——右侧加一层渐隐,提示「还能往右滑」;
|
||||
滑到末端就收掉,免得让人以为后面还有。桌面端没有横向溢出,这段等于不做事。 */
|
||||
(function () {
|
||||
var el = document.querySelector('.nav-links');
|
||||
if (!el) return;
|
||||
var update = function () {
|
||||
el.classList.toggle('overflow-right', el.scrollWidth - el.clientWidth - el.scrollLeft > 2);
|
||||
};
|
||||
update();
|
||||
el.addEventListener('scroll', update, { passive: true });
|
||||
window.addEventListener('resize', update);
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
{{define "filters"}}
|
||||
|
||||
Reference in New Issue
Block a user