日历改中文、修掉头部重叠;统计页那两张体量悬殊的卡不再并排
用户反馈:日历「空间显示有点异常」且是英文、和项目割裂;类型分布与一天中的分布仍是一左一右、
右边下面一大片空白。两件事的根因都不是表面看到的那个。
一、日历英文
- `flatpickr.localize(l10ns.zh)` 原先只写在三个后台页的 whenReady 里;上一批把 flatpickr 放到
公共页(筛选区)之后就漏了 ⇒ 日历全是 Sun/Mon/January…
- 修法:移到 datetime-input.js 的 attachPicker 里(localizeOnce(),全局只调一次),
三个后台页那三行重复调用删掉。
二、日历头部重叠(就是用户说的「空间异常」)
- 月份下拉被撑满整行、压在年份输入上。根因是**站点全局的 input/select 样式扫进了日历内部**:
那条规则带 width:100%、内边距、边框与 16px 控件字号,而日历内部的
`input.numInput`(type=number)与 `select.flatpickr-monthDropdown-months` 都躲不开。
- ⚠️ 第一版修法(在后面补一条 `.flatpickr-calendar input{...}` 对冲)**是错的**:全局选择器带
10 个 :not([type=…])、特异性 (0,10,1),普通对冲压不过,实测年份框仍是站点样式。
正确做法是在**全局规则里排除** `input…:not(.numInput)` / `select:not(.flatpickr-monthDropdown-months)`,
`input:focus` 的焦点环同理(否则年份框上套一圈主色光圈)。
- 实测:星期「周日 周一 …」、月份「十月」、月份与年份 overlap=0、无 JS 报错。
三、统计页排版
- `align-items: start` 只消掉了卡内空白,消不掉并排本身的空:类型分布 1411px 与
一天中的分布 256px 并排,右侧下面必然空一片。改成单列(`<div class="grid">`),
两张卡各占整行 1080px —— 24 根柱终于有宽度可用,列表也像「城市排行」那样横铺。
回归:./scripts/verify.sh PASS=349 FAIL=0 SKIP=0;JS 单测 45/45;移动端 390 溢出全 0;
桌面 1440 与改前一致(−15 是滚动条宽)。
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
# 2026-10-10
|
||||
|
||||
## 日历弹层返工 + 统计页排版(承接 10-09 的日期框改造)
|
||||
|
||||
用户反馈两点:① 日历「空间显示异常」且是英文、和项目割裂;② 类型分布与一天中的分布仍是
|
||||
一左一右、右边下面一大片空白。
|
||||
|
||||
### ① 日历:两个独立的坑
|
||||
|
||||
**a) 英文文案**:`flatpickr.localize(l10ns.zh)` 原先只写在三个后台页的 `whenReady` 里;
|
||||
昨天把 flatpickr 放到公共页(筛选区)之后就漏了 ⇒ 日历全是 Sun/Mon/January…
|
||||
修法:移到 `datetime-input.js` 的 `attachPicker` 里(`localizeOnce()`,全局只调一次),
|
||||
三个后台页里那三行重复调用删掉。
|
||||
|
||||
**b) 头部重叠(用户说的「空间异常」)**:月份下拉被撑满整行、压在年份输入上。
|
||||
根因是**站点全局的 `input/select` 样式扫进了日历内部** —— 那条规则带 `width:100%`、
|
||||
7px 内边距、边框与 16px 控件字号(`input.numInput` 是 `type=number`,`select.flatpickr-monthDropdown-months`
|
||||
是 select,都躲不过)。
|
||||
⚠️ 第一版修法是错的:我在后面补了一条 `.flatpickr-calendar input{...}` 去对冲,
|
||||
**压不过**——全局选择器带 10 个 `:not([type=…])`,特异性 (0,10,1),实测年份框仍是站点样式。
|
||||
正确做法是在**全局规则里排除**:`input…:not(.numInput)`、`select:not(.flatpickr-monthDropdown-months)`,
|
||||
`input:focus` 的焦点环同理(否则年份框上套一圈主色光圈)。
|
||||
实测日历内部只有 4 个控件:`select.flatpickr-monthDropdown-months` +
|
||||
`input.numInput.cur-year / .flatpickr-hour / .flatpickr-minute`。
|
||||
|
||||
实测结果:星期「周日 周一 …」、月份「十月」、`overlap=0`(月份 82px、年份紧接其后)、无 JS 报错。
|
||||
|
||||
### ② 统计页:体量差太多的卡片别并排
|
||||
|
||||
`align-items: start` 只消掉了**卡内**空白,消不掉并排本身的空 —— 类型分布 1411px 与
|
||||
一天中的分布 256px 并排,右侧下面必然空一大片。
|
||||
改成 `<div class="grid">`(单列):两张卡各占整行(1080px),24 根柱终于有宽度可用,
|
||||
列表也像「城市排行」那样横铺。实测 top=1183 → 2625,都全宽。
|
||||
|
||||
**回归**:verify.sh **PASS=349 FAIL=0 SKIP=0**、JS 单测 45/45、移动端 390 溢出全 0、
|
||||
桌面 1440 与改前一致(−15 是滚动条宽)。
|
||||
@@ -1061,5 +1061,22 @@ HTML,一行里必然带 `</script>`,一拒就把正常用法挡死了(我
|
||||
- `.temp-strip` 的柱子窄屏固定 36px + 横滚;**宽屏要 `flex: 1 1 36px; max-width: 96px` 并把轨道加高**。
|
||||
原来固定 36×84,10 个月只占 1042px 里的 396px,右边 600 多像素全空 —— 看着就是「图表很小」。
|
||||
|
||||
### 日历弹层的两处坑(2026-10-10)
|
||||
|
||||
- **中文文案要在共享入口设一次**:以前是各页 `whenReady` 里自己调 `flatpickr.localize(l10ns.zh)`,
|
||||
公共页开始加载 flatpickr 之后就漏了 —— 日历是英文的(Sun/Mon/January…),跟中文界面明显割裂。
|
||||
现在放在 `attachPicker` 里(`localizeOnce()`,全局只调一次)。
|
||||
- ⚠️ **站点全局的 `input/select` 样式会扫进日历内部**:那条规则带 `width:100%`、内边距与边框,
|
||||
落到日历里就是「月份下拉被撑满整行、压在年份输入上」(实测重叠成一团),时间格也变成方框输入框。
|
||||
修法是**在全局规则里排除** `input.numInput` 与 `select.flatpickr-monthDropdown-months`
|
||||
(实测日历内部只有这 4 个控件:`select.flatpickr-monthDropdown-months` + `input.numInput.cur-year`
|
||||
/ `.flatpickr-hour` / `.flatpickr-minute`)。
|
||||
⚠️ **不要**试图在 `.flatpickr-calendar input{...}` 里对冲 —— 那条全局选择器带 10 个 `:not([type=…])`,
|
||||
特异性 (0,10,1),普通对冲压不过(实测年份框仍是站点样式)。
|
||||
`input:focus` 的焦点环同理要一起排除,否则年份框上会套一圈主色光圈。
|
||||
- **体量差太多的卡片别并排**:类型分布(60 多行)与一天中的分布(24 根柱)并排时,右侧下面必然
|
||||
一大片空白 —— `align-items: start` 只能消掉**卡内**的空白,消不掉并排本身的空。各占整行才对
|
||||
(列表横铺、24 根柱也终于有宽度)。`align-items: start` 仍然保留:其它同行卡片也会体量不等。
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user