宽表在窄屏真的不横滑了：堆叠判据退回媒体查询，后台三张表补上

真机反馈「手机上还是要左右滑」，两个根因： 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 里」。
2026-09-19 02:04:03 +08:00
parent 7236c7a9d5
commit 9e01923244
9 changed files with 309 additions and 36 deletions
@@ -148,22 +148,22 @@
    <div class="card-sub">共 {{num .Total}} 个地点，按到访数排序{{if .SuspectCount}}；其中 <b>{{num .SuspectCount}}</b> 个的显示坐标疑似就是 WGS-84（当初没做偏移，底图上会偏 500 米左右），行内已标注{{end}}。「坐标来源」是建点时留下的记录：照片导入会把当时选的坐标系一起记下来，<b>未留档</b>的是 2026-09 之前的行，只能靠原图或行内标注判断。</div>
    {{if .Places}}
    <div class="tw">
-      <table class="tb">
+      <table class="tb tb-stack">
        <thead><tr><th>名称</th><th>城市</th><th>坐标</th><th class="num">到访</th><th></th></tr></thead>
        <tbody>
        {{range .Places}}
          <tr id="place-row-{{.SrcPK}}"{{if and $.OpenSrcPK (eq .SrcPK $.OpenSrcPK)}} class="located"{{end}}>
            <td>{{if .Name}}{{.Name}}{{else}}<span class="muted">（未命名）</span>{{end}} <span class="muted mono">#{{.SrcPK}}</span></td>
-            <td class="muted">{{.City}}{{if .District}} · {{.District}}{{end}}{{if .Thoroughfare}} · {{.Thoroughfare}}{{end}}</td>
-            <td class="muted mono">{{printf "%.5f" .Lat}}, {{printf "%.5f" .Lon}}
+            <td class="muted" data-label="城市">{{.City}}{{if .District}} · {{.District}}{{end}}{{if .Thoroughfare}} · {{.Thoroughfare}}{{end}}</td>
+            <td class="muted mono" data-label="坐标">{{printf "%.5f" .Lat}}, {{printf "%.5f" .Lon}}
              <br><span class="tag{{if not .CoordSource}} warn{{end}}" title="{{if .CoordSource}}建点时留下的坐标来源记录{{else}}这行建于 2026-09 之前，没有坐标来源留档；坐标是否做过偏移只能靠原图 EXIF 或行内标注判断{{end}}">{{.SourceTag}}</span>
              {{if .SuspectWGS}}<span class="tag warn" title="导入留档里的原始 GPS 与显示坐标完全相同，说明当初没做 GCJ-02 偏移。在 GCJ-02 底图上会整体偏 500 米左右——用行内「编辑」→ 坐标系换算修。">疑似 WGS-84</span>{{end}}
              {{if .MovedM}}<br><span class="muted">比导入时移动了 {{num .MovedM}} 米</span>{{end}}</td>
-            <td class="num">{{num .VisitCount}}</td>
-            <td style="white-space:nowrap">
+            <td class="num" data-label="到访">{{num .VisitCount}}</td>
+            <td class="ops">
              <details class="inline-edit"{{if and $.OpenSrcPK (eq .SrcPK $.OpenSrcPK)}} open{{end}}>
                <summary class="btn sm">编辑</summary>
-                <form method="post" action="/admin/edit/place/update" data-visit-count="{{.VisitCount}}" style="margin-top:8px;min-width:280px">
+                <form method="post" action="/admin/edit/place/update" data-visit-count="{{.VisitCount}}" style="margin-top:8px;--efw:280px">
                  <input type="hidden" name="src_pk" value="{{.SrcPK}}">
                  <label class="f"><span>名称<b class="req">*</b></span><input type="text" name="name" value="{{.Name}}" required></label>
                  <label class="f"><span>类别</span>
@@ -272,25 +272,25 @@
    <div class="card-sub">共 {{num .VisitTotal}} 条{{if .VisitQuery}}（匹配「{{.VisitQuery}}」）{{end}}，按时间倒序。可修改时间 / 类型 / 备注，或删除。</div>
    {{if .Visits}}
    <div class="tw">
-      <table class="tb">
+      <table class="tb tb-stack">
        <thead><tr><th>时间</th><th>地点</th><th>类型</th><th>备注</th><th></th></tr></thead>
        <tbody>
        {{range .Visits}}
          <tr>
            <td class="muted mono">{{.ArrivalStr}}{{if .DepartureStr}}<br>→ {{.DepartureStr}}{{else}}<br><span class="muted">（未离开）</span>{{end}}</td>
-            <td><span class="muted mono">#{{.SrcPK}}</span> {{if .PlaceName}}{{.PlaceName}}{{else}}<span class="muted">—</span>{{end}}{{if .City}} <span class="muted">· {{.City}}</span>{{end}}</td>
-            <td class="muted">{{.ActivityName}}{{if .UserAdded}} <span class="tag">补录</span>{{end}}</td>
-            <td class="muted">{{.Emoji}}{{if .Remark}}{{.Remark}}{{end}}
+            <td data-label="地点"><span class="muted mono">#{{.SrcPK}}</span> {{if .PlaceName}}{{.PlaceName}}{{else}}<span class="muted">—</span>{{end}}{{if .City}} <span class="muted">· {{.City}}</span>{{end}}</td>
+            <td class="muted" data-label="类型">{{.ActivityName}}{{if .UserAdded}} <span class="tag">补录</span>{{end}}</td>
+            <td class="muted" data-label="备注">{{.Emoji}}{{if .Remark}}{{.Remark}}{{end}}
              <form method="post" action="/admin/edit/visit/bookmark" style="display:inline">
                <input type="hidden" name="src_pk" value="{{.SrcPK}}">
                <button class="star{{if .Bookmarked}} on{{end}}" type="submit"
                        title="{{if .Bookmarked}}取消收藏{{else}}标记为收藏{{end}}">{{if .Bookmarked}}★{{else}}☆{{end}}</button>
              </form>
            </td>
-            <td style="white-space:nowrap">
+            <td class="ops">
              <details class="inline-edit">
                <summary class="btn sm">编辑</summary>
-                <form method="post" action="/admin/edit/visit/update" style="margin-top:8px;min-width:300px">
+                <form method="post" action="/admin/edit/visit/update" style="margin-top:8px;--efw:300px">
                  <input type="hidden" name="src_pk" value="{{.SrcPK}}">
                  <label class="f"><span>类型</span>
                    <select name="activity_id" class="activity-id-inline">
@@ -370,20 +370,20 @@
    <div class="card-sub">共 {{num .MovementTotal}} 段行程{{if or .MovementFilter.Transport .MovementFilter.PlaceID .MovementFilter.From .MovementFilter.To}}（已筛选）{{end}}，按开始时间倒序。可改起止、方式与时间区间，或删除。</div>
    {{if .Movements}}
    <div class="tw">
-      <table class="tb">
+      <table class="tb tb-stack">
        <thead><tr><th>时间</th><th>路线</th><th>方式</th><th class="num">里程</th><th></th></tr></thead>
        <tbody>
        {{range .Movements}}
          <tr>
            <td class="muted mono">{{if .Span}}{{.Span}}{{else}}（无时间）{{end}}
              {{if .DurationMin}}<br><span class="muted">{{dur .DurationMin}}</span>{{end}}</td>
-            <td class="mv-route" title="{{.FromLabel}}{{if .FromCity}} · {{.FromCity}}{{end}} → {{.ToLabel}}{{if .ToCity}} · {{.ToCity}}{{end}}">{{.FromLabel}}<span class="mv-city">{{if .FromCity}} · {{.FromCity}}{{end}}</span><br><span class="muted">→ {{.ToLabel}}<span class="mv-city">{{if .ToCity}} · {{.ToCity}}{{end}}</span></span></td>
-            <td class="muted">{{if .TransportName}}<span class="dot" style="display:inline-block;background:{{colorof .TransportColor}}"></span> {{.TransportName}} <span class="muted mono">#{{.TransportSrc}}</span>{{else}}（无方式）{{end}}</td>
-            <td class="num">{{if .DistanceKm}}{{km .DistanceKm}}{{else}}—{{end}}</td>
-            <td style="white-space:nowrap">
+            <td class="mv-route" data-label="路线" title="{{.FromLabel}}{{if .FromCity}} · {{.FromCity}}{{end}} → {{.ToLabel}}{{if .ToCity}} · {{.ToCity}}{{end}}">{{.FromLabel}}<span class="mv-city">{{if .FromCity}} · {{.FromCity}}{{end}}</span><br><span class="muted">→ {{.ToLabel}}<span class="mv-city">{{if .ToCity}} · {{.ToCity}}{{end}}</span></span></td>
+            <td class="muted" data-label="方式">{{if .TransportName}}<span class="dot" style="display:inline-block;background:{{colorof .TransportColor}}"></span> {{.TransportName}} <span class="muted mono">#{{.TransportSrc}}</span>{{else}}（无方式）{{end}}</td>
+            <td class="num" data-label="里程">{{if .DistanceKm}}{{km .DistanceKm}}{{else}}—{{end}}</td>
+            <td class="ops">
              <details class="inline-edit">
                <summary class="btn sm">编辑</summary>
-                <form method="post" action="/admin/edit/movement/update" style="margin-top:8px;min-width:320px">
+                <form method="post" action="/admin/edit/movement/update" style="margin-top:8px;--efw:320px">
                  <input type="hidden" name="src_pk" value="{{.SrcPK}}">
                  <div class="row">
                    <label class="f" style="flex:1 1 210px"><span>起始到访<b class="req">*</b></span>
@@ -127,7 +127,7 @@
                <span class="muted">未启用</span>
              {{end}}
            </td>
-            <td data-label="操作" style="white-space:nowrap">
+            <td data-label="操作" class="ops">
              {{if not (and $.Dataset (eq $.Dataset.ID .ID))}}
              <form method="post" action="/admin/datasets/{{.ID}}/activate" style="display:inline">
                <button class="btn sm" type="submit">启用</button>
@@ -66,7 +66,7 @@
                <button class="btn sm {{if .Enabled}}primary{{end}}" type="submit">{{if .Enabled}}展示中{{else}}已隐藏{{end}}</button>
              </form>
            </td>
-            <td data-label="操作" style="white-space:nowrap">
+            <td data-label="操作" class="ops">
              <a class="btn sm" href="/admin/topics?edit={{.ID}}">编辑</a>
              <form method="post" action="/admin/topics/delete" style="display:inline"
                    onsubmit="return confirm('删除专题「{{.Title}}」？地点数据不受影响。')">