宽表在窄屏真的不横滑了：堆叠判据退回媒体查询，后台三张表补上
真机反馈「手机上还是要左右滑」，两个根因： 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:
tamakyi
@@ -117,6 +117,13 @@ h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
|
||||
.brand .t { display: none; }
|
||||
.nav-links { overflow-x: auto; scrollbar-width: none; gap: 0; }
|
||||
.nav-links::-webkit-scrollbar { display: none; }
|
||||
/* 还能往右滑的时候右缘渐隐一下（由 nav 后面那几行脚本按 scrollLeft 加/去这个类）。
|
||||
用 mask 而不是盖一层渐变伪元素：伪元素会把链接文字一起遮住，mask 是让内容本身渐隐。
|
||||
不支持 mask 的浏览器只是少个提示，滑动照旧。 */
|
||||
.nav-links.overflow-right {
|
||||
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
||||
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
||||
}
|
||||
.nav-links a { padding: 5px 7px; font-size: 13px; }
|
||||
.nav-right .who { display: none; }
|
||||
.nav-right .btn.sm { padding: 4px 9px; font-size: 12.5px; }
|
||||
@@ -284,6 +291,10 @@ table.tb th {
|
||||
padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
|
||||
}
|
||||
table.tb td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
|
||||
/* 操作列（桌面要横着一排按钮，不折行）。原来是写在模板上的 inline style，而 white-space 会
|
||||
继承进行内编辑表单，堆叠态下「已选：…重选」那一行就顶破了卡片——inline 又压不过后面的覆盖，
|
||||
所以挪成类，放不下宽表时在文件末尾统一放开。 */
|
||||
table.tb td.ops { white-space: nowrap; }
|
||||
table.tb tr:hover td { background: var(--row-hover); }
|
||||
table.tb td.num, table.tb th.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.tw { overflow-x: auto; }
|
||||
@@ -807,7 +818,9 @@ footer.ft { max-width: 1120px; margin: 0 auto; padding: 20px; color: var(--text-
|
||||
.inline-edit summary { list-style: none; display: inline-block; }
|
||||
.inline-edit summary::-webkit-details-marker { display: none; }
|
||||
.inline-edit[open] { display: block; }
|
||||
.inline-edit form { background: var(--bg-2, #fafbfb); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||||
/* 行内编辑表单的宽度：桌面靠 --efw 撑到够填（各表不同，见模板里的 inline 变量），
|
||||
放不下宽表时下面会放开这个下限——不然 320px 的表单会把 294px 的卡片顶破。 */
|
||||
.inline-edit form { background: var(--bg-2, #fafbfb); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: var(--efw, 280px); }
|
||||
.inline-edit form .f { margin-bottom: 8px; }
|
||||
|
||||
/* 「按名称搜坐标」输入框 + 按钮：必须始终同一行（含移动端），底边对齐。
|
||||
@@ -1008,16 +1021,19 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
|
||||
.filters-card.collapsed > :not(.panel-fold) { display: none; }
|
||||
}
|
||||
|
||||
/* ---------- 窄屏：要横滑的宽表改成一屏一行的「字段 + 值」 ----------
|
||||
地点库（8 列）、统计、专题、后台这几张表在手机上要横滑 300+px 才看得全，滑着还对不上表头。
|
||||
窄屏改成每行一块、每格「字段名 + 值」竖排：不用横滑，也不用记「第几列是什么」。
|
||||
/* ---------- 放不下宽表时：一屏一行的「字段 + 值」 ----------
|
||||
地点库（8 列）、统计、专题、后台这几张表在窄处要横滑 300+px 才看得全，滑着还对不上表头。
|
||||
放不下时改成每行一块、每格「字段名 + 值」竖排：不用横滑，也不用记「第几列是什么」。
|
||||
字段名取 td 的 data-label，每行的首格留空当小标题（如地点名），操作格给「操作」。
|
||||
表格结构与脚本都没动（只是隐藏 thead），链接 / 表单 / 按钮照旧；断点跟其它移动端适配一致
|
||||
（620px），桌面与平板仍是原来的表格，一行不差。
|
||||
注：统计页那几张表在宽屏也被放在 g2 的窄卡片里（视口 1440 时卡片只有 494px），仍然要横滑
|
||||
100+px —— 但那属于桌面版式，真要治得单说；这里先只管移动端（按容器宽度判断会让这些卡片
|
||||
在宽屏也竖排，实测把 /stats 撑高 1300px，得不偿失）。 */
|
||||
@media (max-width: 620px) {
|
||||
表格结构与脚本都没动（只是隐藏 thead），链接 / 表单 / 按钮照旧。
|
||||
阈值 800 是从「卡片能不能放下表格」换算来的：卡片内容宽 ≈ 视口 − 93（页面 + 卡片的内边距），
|
||||
这几张表的 min-width 最宽是 700 ⇒ 视口 793 以上才放得下，取 800 留几像素余量。
|
||||
**必须用 @media，别改成 @container**：容器查询能按「卡片自己有多宽」判得更准，可它要
|
||||
iOS 16 / Chrome 105 起才支持——旧手机整块规则直接失效，表格完全不堆叠、退化成横滑
|
||||
328~388px（2026-09-19 真机上就是这么炸的，比改之前还糟）。现在宽表卡片已被要求不放 g2
|
||||
（见 wide_table_layout_test.go），卡片宽度只由视口决定，两种判据在这些页面上等价，
|
||||
那就用兼容性好的那个。若页面/卡片的内边距变了，这里的 800 要跟着重算。 */
|
||||
@media (max-width: 800px) {
|
||||
.tw > table.tb.tb-stack { min-width: 0; }
|
||||
.tw > table.tb.tb-stack thead { display: none; }
|
||||
.tw > table.tb.tb-stack,
|
||||
@@ -1036,11 +1052,21 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
|
||||
content: attr(data-label); position: absolute; left: 0; top: 2px;
|
||||
width: 5em; color: var(--text-3); font-size: 12px;
|
||||
}
|
||||
/* 首格是这一行的主角（地点名 / 天气 / 方式…）：不缩进、字号抬一档当小标题 */
|
||||
/* 首格是这一行的主角（地点名 / 天气 / 方式…）：不缩进、字号抬一档当小标题；
|
||||
操作格也是这一类（表头为空、整行铺开）。它们里面的内容是长名称或编辑表单，
|
||||
而桌面模板给操作格挂了 nowrap（那一列要横向排按钮）——white-space 会继承到表单里，
|
||||
于是「已选：#403 2026-09-13 19:53 · 某某地」这一行在窄处不换行、把卡片顶出 44px。
|
||||
堆叠态每格本来就是一整行，nowrap 没有意义，放开。 */
|
||||
.tw > table.tb.tb-stack > tbody > tr > td:not([data-label]) {
|
||||
padding-left: 0; margin-bottom: 2px; font-size: 14px;
|
||||
padding-left: 0; margin-bottom: 2px; font-size: 14px; white-space: normal;
|
||||
}
|
||||
/* 操作格（有的带「操作」标签、有的表头本来就是空的）在堆叠态整行铺开，
|
||||
桌面那条 nowrap 会让格里的编辑表单不换行、把卡片顶出几十像素 */
|
||||
.tw > table.tb.tb-stack > tbody > tr > td.ops { white-space: normal; }
|
||||
/* 数字列不必再右对齐（现在已经是「标签 + 值」两栏） */
|
||||
.tw > table.tb.tb-stack td.num { text-align: left; }
|
||||
/* 行内编辑表单的桌面宽度下限在这里放开：320px 的表单加上悬挂缩进会顶破卡片，
|
||||
而表单字段本来就是 flex 自适应的（见 .row / label.f），窄处自然铺满即可。 */
|
||||
.tw > table.tb.tb-stack .inline-edit form { min-width: 0; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user