polish(v0.6): put Sessions/Projects toggle on the filter row (kill whitespace)
The toggle sat on its own dedicated row, leaving a large empty band above the
project grid. On desktop (>=769px) float it top-right on the SAME row as the
filter box / launcher header: panels fill from the top (inset 0), launcher-head
reserves right padding for the pill. Mobile keeps the centred stacked toggle to
avoid overlapping the full-width filter on narrow screens. Also reclaim the
hidden key-bar's space on the home view (body.home-open #term { bottom: 0 }).
CSS-only (style.css is served directly). Verified in-browser: toggle and filter
share a row on Projects, no overlap with New/Manage on Sessions.
This commit is contained in:
@@ -151,7 +151,7 @@
|
||||
- **状态**: `[x]` DONE。415 测试全绿 · 双 typecheck 干净 · `build:web` OK · 真浏览器验证通过。
|
||||
- **反馈**(用户): ① Sessions/Projects 段控在 UI 上"有点别扭"(原为两个独立描边方块浮在顶部);② 首页(Sessions/Projects 视图)底部那排终端快捷键栏没必要显示。
|
||||
- **修复**(纯前端,`public/style.css` + `public/tabs.ts`): ① `.home-seg` 重设计为 **iOS 风分段控件**——一个圆角"轨道"(`surface-2` 底 + 圆角 999px + 内边距)内含两个 pill 按钮,激活项填 Amber;`width:fit-content + margin:auto` 居中;去掉 first/last/only-child 圆角拼接;面板 `inset` 44→68px 适配新高度。② `TabApp.updateHomeView` 在显示首页时给 `document.body` 加 `home-open` 类,CSS `body.home-open #keybar{display:none}` 隐藏键栏;打开 tab(终端激活)即恢复。
|
||||
- **验证**: `npx tsc`(双)干净;`npx vitest run` 415/415;真浏览器:Projects 视图段控为圆角分段 pill(Projects 高亮)、键栏隐藏、83 卡片正常;开 tab 后键栏恢复。
|
||||
- **追加**(用户反馈"段控独占一行、空白太多"): 桌面端(`@media min-width:769px`)把段控 `position:absolute` 浮到**右上角**,与过滤框/启动器表头**同一行**;面板 `inset` 归 0(从顶部铺满),`.launcher-head` 留 240px 右内边距避开段控;移动端保持居中堆叠(防止与全宽过滤框重叠)。另:首页隐藏键栏时 `body.home-open #term{bottom:0}` 收回键栏占位。纯 CSS(`style.css` 直出,无需打包)。真浏览器实测:Projects 段控与过滤框同行(seg.top 56 / filter.top 62)、卡片在其下;Sessions 视图段控不与 New/Manage 重叠。
|
||||
- **commit**: (本次提交)
|
||||
|
||||
### 2026-06-30 · v0.6 UX 修复 — 会话内无法返回 Projects 首页
|
||||
|
||||
@@ -684,7 +684,7 @@ body {
|
||||
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
|
||||
.launcher {
|
||||
position: absolute;
|
||||
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
|
||||
inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */
|
||||
overflow-y: auto;
|
||||
padding: 22px 18px 40px;
|
||||
box-sizing: border-box;
|
||||
@@ -898,7 +898,7 @@ body {
|
||||
/* Panel wrapper (same host as .launcher; toggled via display) */
|
||||
.proj-panel {
|
||||
position: absolute;
|
||||
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
|
||||
inset: 52px 0 0 0; /* mobile: reserve a row for the stacked .home-seg (desktop overrides to 0) */
|
||||
overflow-y: auto;
|
||||
padding: 22px 18px 40px;
|
||||
box-sizing: border-box;
|
||||
@@ -1122,7 +1122,7 @@ body {
|
||||
* the active one filled (iOS-style). Centred with fit-content + margin auto. */
|
||||
.home-seg {
|
||||
width: fit-content;
|
||||
margin: 14px auto 18px;
|
||||
margin: 10px auto 12px;
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
@@ -1164,3 +1164,29 @@ body {
|
||||
body.home-open #keybar {
|
||||
display: none;
|
||||
}
|
||||
/* Home chooser hides the key-bar, so reclaim its reserved space at the bottom. */
|
||||
body.home-open #term {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Desktop: float the Sessions/Projects toggle top-right, on the SAME row as the
|
||||
* panel's filter/header — instead of a dedicated row that left a big empty band.
|
||||
* The panels fill from the top; the launcher header reserves room for the pill.
|
||||
* (Mobile keeps the stacked, centred toggle — see .home-seg above — to avoid
|
||||
* overlapping the full-width filter box on narrow screens.) */
|
||||
@media (min-width: 769px) {
|
||||
.home-seg {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
margin: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
.launcher,
|
||||
.proj-panel {
|
||||
inset: 0;
|
||||
}
|
||||
.launcher-head {
|
||||
padding-right: 240px; /* clear the absolutely-positioned .home-seg */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user