diff --git a/internal/web/filters_fold_test.go b/internal/web/filters_fold_test.go new file mode 100644 index 0000000..bd4fe09 --- /dev/null +++ b/internal/web/filters_fold_test.go @@ -0,0 +1,50 @@ +package web + +import ( + "context" + "net/http" + "net/http/httptest" + "strings" + "testing" +) + +// TestFiltersFoldHook 盯住「地点库 / 时间线 / 统计三页共用筛选卡在窄屏默认收起」的挂载点。 +// +// 折叠是纯前端的事:CSS 认 `.filters-card.collapsed`,脚本认 `#filters-fold`,两边都靠 +// 模板里的类名/ID 挂钩子。谁哪天把表单的 class 换了、或者把这个按钮删了,页面照样能渲染、 +// 桌面端也看不出问题 —— 只有手机会退化成「永远展开」,所以在这里钉住。 +// +// ROND_TEST_CONF=conf/app-test.ini ROND_SRC=data/xxx.rondbackup go test ./internal/web -run FiltersFold -v +func TestFiltersFoldHook(t *testing.T) { + f := newMovementFixture(t) + for _, path := range []string{"/places", "/timeline", "/stats"} { + var h http.HandlerFunc + switch path { + case "/places": + h = f.srv.placesPage + case "/timeline": + h = f.srv.timelinePage + case "/stats": + h = f.srv.statsPage + } + // 访客身份:这三页公开,折叠对访客同样生效 + w := httptest.NewRecorder() + h(w, httptest.NewRequest("GET", path, nil).WithContext(context.Background())) + body := w.Body.String() + if w.Code != 200 { + t.Fatalf("%s 渲染失败: code=%d", path, w.Code) + } + for _, want := range []string{ + `class="card filters-card"`, // CSS 的挂载点 + `id="filters-fold"`, // 折叠条 + `id="filters-fold-caret"`, // 箭头(脚本要改它的字) + `id="filters-form"`, // 脚本靠它找表单;收起时表单控件仍在里面 + `rond-filters-fold`, // 记收起状态的本地键:翻了页不该又弹开 + `name="q"`, // 收起只是 CSS 隐藏,筛选控件得照旧提交得出去 + } { + if !strings.Contains(body, want) { + t.Fatalf("%s 里找不到 %q:窄屏筛选折叠的挂载点断了", path, want) + } + } + } +} diff --git a/internal/web/static/css/app.css b/internal/web/static/css/app.css index 2f3066d..8210b29 100644 --- a/internal/web/static/css/app.css +++ b/internal/web/static/css/app.css @@ -993,4 +993,17 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten /* 导航左上角那个 logo 是回首页的入口,原来只有 25×29:给它撑到 44 高, 横向也补到 44(.brand .t 在窄屏被隐藏,加内边距就够了)。 */ .brand { min-width: 44px; min-height: 44px; justify-content: center; } + + /* ---------- 地点库 / 时间线 / 统计三页共用的筛选卡:窄屏默认收成一条 ---------- + 与地图页那块 .panel-fold 同形——手机上它一上来就占掉大半屏(预设 + 已选 + 类型 + 六个 + 输入框),内容反而看不见。展开时折叠条用负外边距贴到卡片上沿(圆角照着卡片补, + 卡片没有 overflow:hidden,否则折叠条就粘不住了);收起时卡片内边距归零、只留那一条。 + top 取 --nav-h:导航是 sticky 的,写 0 会被压在它下面。 + 这些规则整条在媒体查询里 ⇒ 桌面端 .collapsed 不生效,等于没影响。 */ + .filters-card > .panel-fold { + margin: -18px -18px 14px; border-radius: var(--radius) var(--radius) 0 0; top: var(--nav-h); + } + .filters-card.collapsed { padding: 0; } + .filters-card.collapsed > .panel-fold { margin: 0; border-radius: var(--radius); } + .filters-card.collapsed > :not(.panel-fold) { display: none; } } diff --git a/internal/web/templates/layout.html b/internal/web/templates/layout.html index cee9635..881b5d4 100644 --- a/internal/web/templates/layout.html +++ b/internal/web/templates/layout.html @@ -25,7 +25,15 @@ {{end}} {{define "filters"}} -
+ + {{/* 窄屏折叠开关,与地图页筛选面板同一套(.panel-fold):桌面端它 display:none、表单照旧常开; + 手机上默认收成这一条,只留「筛选 + 当前范围 + 箭头」。收起只是 CSS 隐藏, + 表单里的控件都还在,筛选条件照旧随提交带上(act/hw/sort 那几个 hidden 也在)。 */}} +
{{range .Presets}}{{.Label}}{{end}} {{.RangeLabel}} @@ -104,6 +112,37 @@ {{if .ShowHomeWork}}{{end}} {{if .Sort}}{{end}} +{{/* 窄屏折叠:脚本必须紧跟这个表单 —— 放到 body 末尾时,手机上会先按「全部展开」画一帧 + 再收起,看着就是闪一下整张大卡(地图页那块面板也是贴在面板后面)。收起态记在本地, + 翻页/换页之后不该又自己弹开。 */}} + {{end}} {{define "emptystate"}}