fix(user/questions): 筛选标签改为「已读 是/否」,手机端条目标签行不再折行

- 筛选栏第 5 列标签「阅读状态」四字,在手机约 53px 的窄列里必然折成两行,
  改为「已读」,选项改为 全部/是/否(option value 仍是 read/unread,后端不变)。
  词条 qlist.readStatus 由 qlist.readFilter + qlist.filterYes/filterNo 取代,四语言同步。
- 条目行「时间 + 状态标签 + 标记/置顶」在手机上放不下:实测 360 宽可用 306px,
  完整时间单条就占 127px,2 标签 + 2 按钮需 343px。手机端时间改为「月-日 时:分」
  (tb-short/tb-text 复用状态标签的 640px 断点,桌面端仍显示完整年月日时分秒),
  同时把 .qlist-pill 的基础内边距 40/8 收到 34/6(桌面 @media 仍覆盖回 62/10)。
  结果:2 标签 + 2 按钮在 360 宽即单行;三标签(私密+待答+未读)在 ≤375 仍会折行。
This commit is contained in:
tamakyi
2026-10-23 21:02:37 +08:00
parent 86ea96e5ca
commit 812b70cb4c
6 changed files with 50 additions and 10 deletions
+12 -6
View File
@@ -89,8 +89,11 @@
align-items: center;
justify-content: center;
height: 24px;
min-width: 40px;
padding: 0 8px;
/* 手机端收窄横向内边距:一行要塞下「时间 + 状态标签 + 操作按钮」,
8px 的内边距在 360/390 宽下刚好差十几像素把按钮挤到第二行。
≥640px 的桌面样式在下面单独覆盖回 62px/10px,桌面端不受影响。 */
min-width: 34px;
padding: 0 6px;
box-sizing: border-box;
font-size: var(--tb-fs-xs);
line-height: 1;
@@ -257,11 +260,11 @@
</select>
</div>
<div style="width: 120px;">
<label class="uk-form-label uk-text-small">{{t .LangCode "qlist.readStatus"}}</label>
<label class="uk-form-label uk-text-small">{{t .LangCode "qlist.readFilter"}}</label>
<select name="read" class="uk-select uk-form-small" onchange="this.form.submit()" style="width: 100%;">
<option value="all" {{if eq .SelectedRead "all"}}selected{{end}}>{{t .LangCode "qlist.all"}}</option>
<option value="read" {{if eq .SelectedRead "read"}}selected{{end}}>{{t .LangCode "qlist.read"}}</option>
<option value="unread" {{if eq .SelectedRead "unread"}}selected{{end}}>{{t .LangCode "qlist.unread"}}</option>
<option value="read" {{if eq .SelectedRead "read"}}selected{{end}}>{{t .LangCode "qlist.filterYes"}}</option>
<option value="unread" {{if eq .SelectedRead "unread"}}selected{{end}}>{{t .LangCode "qlist.filterNo"}}</option>
</select>
</div>
</div>
@@ -278,7 +281,10 @@
<div class="uk-flex uk-flex-middle uk-flex-wrap qlist-pills" style="gap: 6px;">
<!-- 左:时间 + 状态标签 -->
<div class="uk-flex uk-flex-middle uk-flex-wrap" style="gap: 6px;">
<span class="uk-text-small uk-text-muted">{{Date .CreatedAt "Y-m-d H:i:s"}}</span>
<!-- 手机端只显示「月-日 时:分」:完整时间占 127px,配合状态标签 + 操作按钮后
一行放不下(360/390 宽实测会折行);桌面端仍显示完整年月日时分秒。
tb-short / tb-text 与右侧状态标签共用 640px 这一个断点。 -->
<span class="uk-text-small uk-text-muted"><span class="tb-short">{{Date .CreatedAt "m-d H:i"}}</span><span class="tb-text">{{Date .CreatedAt "Y-m-d H:i:s"}}</span></span>
{{ if .IsPinned }}
<span class="uk-label uk-label-warning qlist-pill" title="{{t $.LangCode "qlist.pinned"}}"><span class="tb-short">{{t $.LangCode "qlist.pinnedShort"}}</span><span class="tb-text">{{t $.LangCode "qlist.pinned"}}</span></span>
{{ end }}