v62：纪念日列表修正 / 分类图标与设置菜单 / 首页卡片体系
- 纪念日列表：display:flex 从 td 移到内层 div（写在 td 上会破坏表格列算法， 表现为关联人列与其它列高度不一致）；行内列序按表头对齐； 改完再点「新建」不再带出上次修改的数据；文案改为「与我相关」「来自名册」； 别人记的、把我挂成关联人的条目一并显示（split() 返回 hiddenIds， 路由层据此过滤「接下来的日子」，与两张表同一套可见性） - 分类图标：新增 app/AnnivIcon.php（17 个行内 SVG 图标 + 同 key 的 emoji 供日历纯文本处使用，内网无 CDN 不用 FontAwesome）；去掉「看日历」按钮； 设置按钮改为菜单，第一项进 days/settings 独立页；分类可自选图标， 列表徽标与日历条目都按分类显示 - 首页卡片：新增 app/HomeCards.php 与 templates/home_cards.php； 8 格宽 × 高 2/4/6/8；首页拆成 templates/home/_card_*.php 共 8 个片段； home/cards 可改尺寸、调顺序、开关
This commit is contained in:
@@ -6122,3 +6122,207 @@ h5.md-h, h6.md-h { font-size: 14px; }
|
||||
.view-choice-item input { margin-top: 3px; flex: 0 0 auto; }
|
||||
.view-choice-item .vci-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.view-choice-item .vci-body b { font-size: 14px; }
|
||||
|
||||
/* ==================================================================== */
|
||||
/* v62（用户 2026-10-18 第 2 条）：分类图标 */
|
||||
/* */
|
||||
/* 分类徽标 = 图标 + 名字。图标是行内 SVG（AnnivIcon），颜色取 currentColor */
|
||||
/* ⇒ 放在浅底徽标里就是灰字色，放在深色格子里自动变白，不需要第二套配色。 */
|
||||
/* ==================================================================== */
|
||||
.kind-badge {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
.kind-badge .ai { flex: 0 0 auto; opacity: .9; }
|
||||
.kind-badge .kind-name {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
max-width: 9em; /* 分类名最长 20 字，卡一行不撑破表格 */
|
||||
}
|
||||
.ann-ic { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--muted); }
|
||||
.ann-ic .ai { display: block; }
|
||||
|
||||
/* ---- 分类设置页（days/settings）---- */
|
||||
.kind-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
||||
.kind-row {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface);
|
||||
/* ⚠️ 行内每项都可能收缩（分类名输入框），flex 子项默认 min-width:auto 会顶破 */
|
||||
min-width: 0;
|
||||
}
|
||||
.kind-row.is-ro { gap: 10px; }
|
||||
.kind-move { display: inline-flex; gap: 2px; flex: 0 0 auto; }
|
||||
.kind-prev {
|
||||
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--line-2); color: var(--ink);
|
||||
}
|
||||
.kind-sel { flex: 0 0 auto; width: 190px; max-width: 46vw; }
|
||||
.kind-name-in { flex: 1 1 140px; min-width: 0; }
|
||||
.kind-name-ro { font-size: 14px; }
|
||||
.kind-use { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 46px; text-align: right; }
|
||||
/* 改过但没保存：保存按钮描一圈告警色 + 旁边一句小字（JS 加 .is-dirty / 去掉 hidden）
|
||||
⚠️ 用 `.btn-warn` 同一个 #E8A33D（全站"待处理"的语义色），不要另发明一个黄。 */
|
||||
.btn.is-dirty { box-shadow: 0 0 0 2px #E8A33D; }
|
||||
.kind-dirty { color: #b57a19; margin-left: 10px; }
|
||||
.kind-add {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
margin-top: 14px; padding: 10px; border-radius: var(--radius-s);
|
||||
background: var(--line-2);
|
||||
}
|
||||
.kind-add .select { flex: 0 0 auto; width: 190px; max-width: 46vw; }
|
||||
.kind-add .input { flex: 1 1 160px; min-width: 0; }
|
||||
.kind-add-lb { font-size: 13px; color: var(--muted); }
|
||||
.kind-icon-bank { display: none; }
|
||||
|
||||
/* ==================================================================== */
|
||||
/* v62（用户 2026-10-18 第 3 条）：首页卡片网格 */
|
||||
/* */
|
||||
/* 口径（与 app/HomeCards.php、templates/home_cards.php 的措辞一致）： */
|
||||
/* · 一排 8 格；宽 2/4/6/8 → 一排 4 张 / 2 张 / 一大一小 / 独占一排 */
|
||||
/* · 高 2/4/6/8 行；一行 76px、间距 10px */
|
||||
/* */
|
||||
/* ⚠️ 为什么用 `grid-template-columns: repeat(8, minmax(0,1fr))` 而不是 */
|
||||
/* flex + 百分比：8 格制下"宽 6"（一大一小）只有网格能自然表达； */
|
||||
/* `minmax(0,1fr)` 里的 0 对应 flex 那条 `min-width:0` —— */
|
||||
/* 少了它，卡片里的长标题会把整列顶宽（v54 那个坑的同源）。 */
|
||||
/* ⚠️ 高度用 `grid-row: span N` 而不是给每张卡片算像素： */
|
||||
/* 这样"高 4"的两张卡片并排时天然等高，不依赖内容多少。 */
|
||||
/* ==================================================================== */
|
||||
.hc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-auto-rows: 76px;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.hc-card {
|
||||
display: flex; flex-direction: column;
|
||||
min-width: 0; min-height: 0;
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* ⚠️ 必须单独写这一条，而且选择器要**比 `.card + .card` 更重**：
|
||||
上面 `.hc-card { margin: 0 }` 只有 0,1,0，而全局相邻间距
|
||||
`.card + .card { margin-top: 18px }` 是 0,2,0 —— 权重更高，会把
|
||||
每一张**非首张**的卡片顶下去 18px（实测症状：高 2 期望 162 对得上，
|
||||
高 4/高 8 恒少 18px，因为网格首个子元素不命中 `+ .card`）。
|
||||
间距本来就由 grid 的 `gap` 统一给，这里把相邻 margin 彻底清掉。 */
|
||||
.hc-grid > .card + .card { margin-top: 0; }
|
||||
.hc-w2 { grid-column: span 2; }
|
||||
.hc-w4 { grid-column: span 4; }
|
||||
.hc-w6 { grid-column: span 6; }
|
||||
.hc-w8 { grid-column: span 8; }
|
||||
.hc-h2 { grid-row: span 2; }
|
||||
.hc-h4 { grid-row: span 4; }
|
||||
.hc-h6 { grid-row: span 6; }
|
||||
.hc-h8 { grid-row: span 8; }
|
||||
|
||||
.hc-head {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
flex: 0 0 auto; min-width: 0; margin-bottom: 8px;
|
||||
}
|
||||
.hc-head .cinema-h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
|
||||
.hc-head .hd-more { flex: 0 0 auto; }
|
||||
/* 卡片正文：**自己滚**，不撑卡片（用户给的高度就是最终高度）。 */
|
||||
.hc-body {
|
||||
flex: 1 1 auto; min-height: 0; min-width: 0;
|
||||
overflow-y: auto; overscroll-behavior: contain;
|
||||
scrollbar-width: none; -ms-overflow-style: none;
|
||||
}
|
||||
.hc-body::-webkit-scrollbar { width: 0; height: 0; }
|
||||
/* 概述卡：左右两栏（问候/数字 ｜ 天气），与原来的信息面板一致 */
|
||||
.hc-body.home-brief { align-content: flex-start; }
|
||||
/* 日程卡：内部还要再分"全天区 + 时间网格"，所以它自己是一个纵向 flex，
|
||||
滚动交给内层 `.hd-pane-body`（这样全天区才能钉在上面不动）。 */
|
||||
.hc-body.hc-agenda { display: flex; flex-direction: column; overflow: hidden; }
|
||||
/* 卡片里的 pane 不再有 440px 的固定高（那是 v24 双栏时代的值） */
|
||||
.hc-card .hd-pane-body { flex: 1 1 auto; min-height: 0; }
|
||||
.hc-card .ag-allday { max-height: 40%; }
|
||||
|
||||
/* ---- 纪念日卡片 ---- */
|
||||
.hc-ann .ann-up-item { gap: 6px; padding: 7px 2px; }
|
||||
.hc-ann .ann-days { min-width: 52px; }
|
||||
.hc-ann .ann-title { font-size: 13.5px; }
|
||||
|
||||
/* ---- 观影卡片：海报 + 片名 ---- */
|
||||
.hc-mv-list, .hc-bk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
|
||||
.hc-mv, .hc-bk {
|
||||
display: flex; align-items: center; gap: 10px; min-width: 0;
|
||||
padding: 6px 2px; border-bottom: 1px solid var(--line-2);
|
||||
}
|
||||
.hc-mv:last-child, .hc-bk:last-child { border-bottom: 0; }
|
||||
.hc-mv-poster, .hc-bk-cover {
|
||||
flex: 0 0 auto; width: 34px; height: 46px; border-radius: 4px; overflow: hidden;
|
||||
background: var(--line-2); display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.hc-bk-cover { width: 32px; height: 44px; }
|
||||
.hc-mv-poster img, .hc-bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.hc-mv-ph, .hc-bk-ph { font-size: 16px; opacity: .7; }
|
||||
.hc-mv-main, .hc-bk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||
.hc-mv-t, .hc-bk-t {
|
||||
font-size: 13.5px; color: var(--ink); font-weight: 600;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.hc-bk-bar { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
|
||||
.hc-bk-bar i { display: block; height: 100%; background: var(--brand); }
|
||||
.hc-bk-st {
|
||||
flex: 0 0 auto; font-size: 11px; padding: 1px 7px; border-radius: 999px;
|
||||
background: var(--line-2); color: var(--muted);
|
||||
}
|
||||
.hc-bk-st.is-reading { background: #E7F0DA; color: #4A7226; }
|
||||
.hc-bk-st.is-done { background: #E3EAF5; color: #3A5B8C; }
|
||||
|
||||
/* ---- 联系人卡片：头像 + 名字，按卡片宽度自动折行 ---- */
|
||||
.hc-people { display: flex; flex-wrap: wrap; gap: 10px 12px; }
|
||||
.hc-person {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
||||
width: 56px; min-width: 0; text-decoration: none;
|
||||
}
|
||||
.hc-person-av {
|
||||
width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 15px; font-weight: 600;
|
||||
}
|
||||
.hc-person-nm {
|
||||
font-size: 11.5px; color: var(--muted); max-width: 100%;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.hc-person:hover .hc-person-nm { color: var(--ink); }
|
||||
|
||||
/* ---- 窄屏：8 格 → 4 格 → 1 列 ---- */
|
||||
@media (max-width: 1180px) {
|
||||
.hc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.hc-w2 { grid-column: span 2; }
|
||||
.hc-w4, .hc-w6, .hc-w8 { grid-column: span 4; }
|
||||
.hc-h8 { grid-row: span 7; }
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.hc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 64px; }
|
||||
.hc-w2, .hc-w4, .hc-w6, .hc-w8 { grid-column: span 1; }
|
||||
.hc-h6, .hc-h8 { grid-row: span 6; }
|
||||
}
|
||||
|
||||
/* ---- 首页卡片布局设置页 ---- */
|
||||
.hc-set-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
|
||||
.hc-set-row {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
|
||||
background: var(--surface); min-width: 0;
|
||||
}
|
||||
.hc-set-row.is-dragged { opacity: .5; }
|
||||
.hc-set-row.is-drop-before { border-top: 2px solid var(--brand); }
|
||||
.hc-set-order { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
|
||||
.hc-set-on {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
flex: 1 1 220px; min-width: 0; cursor: pointer;
|
||||
}
|
||||
.hc-set-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||||
.hc-set-name b { font-size: 14px; }
|
||||
.hc-set-name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.hc-set-dim { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
|
||||
.hc-set-dim .select { width: 66px; }
|
||||
.hc-set-n { width: 64px; }
|
||||
.hc-set-null { width: 0; }
|
||||
|
||||
Reference in New Issue
Block a user