bboysoul/dodo
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: improve task search reveal interaction
ci / gitleaks (push) Successful in 11s
Details
ci / docker (push) Successful in 3m45s
Details

Browse Source
This commit is contained in:
bboysoul
2026-09-11 07:07:15 +08:00
parent 64b8525720
commit 36952fdbcc
5 changed files with 151 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.test.ts
+14 -7
View File
@@ -620,19 +620,26 @@ describe('task and habit row decoration', () => {
expect(todayHabits).not.toContain('显示已完成')
})
it('keeps the pill at the topbar right and wraps only search when space is narrow', () => {
it('uses a full-width search row and hides it behind mobile pull-to-reveal', () => {
expect(css).toContain('main{container-type:inline-size;')
expect(css).toContain('.topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter";')
expect(css).toContain('.topbar:has(.search):has(.topbar-filter){grid-template-columns:44px minmax(0,1fr) minmax(180px,260px) auto;grid-template-areas:"menu title search filter"}')
expect(css).toContain('.topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter" "search search search";')
expect(css).toContain('.search-reveal{grid-area:search;width:100%;min-width:0}')
expect(css).toContain('.topbar .search{width:100%;margin:0}')
expect(css).toContain('.topbar-title{grid-area:title;min-width:0;width:100%}')
expect(css).toContain('.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;')
expect(css).toContain('.topbar-filter{grid-area:filter;justify-self:end;')
expect(app.indexOf('class="topbar-filter"')).toBeLessThan(app.indexOf('class="search"'))
expect(css).toContain('@container(max-width:640px){.topbar:has(.search):has(.topbar-filter){grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter" ". search search";grid-template-rows:auto auto;')
expect(css).toContain('.topbar>.icon{grid-area:menu}.topbar-title{grid-area:title}.topbar-filter{grid-area:filter}.topbar .search{grid-area:search;grid-row:2;justify-self:end;width:min(260px,100%);')
expect(css).toContain('@media(max-width:930px){.topbar:has(.search):has(.topbar-filter){grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter" ". search search";grid-template-rows:auto auto;')
expect(app.indexOf('class="topbar-filter"')).toBeLessThan(app.indexOf('class="search-reveal"'))
expect(app).toContain('@touchstart="startSearchPull"')
expect(app).toContain('@touchmove="moveSearchPull"')
expect(app).toContain('@touchend="finishSearchPull"')
expect(app).toContain('ref="searchInput"')
expect(app).toContain('class="search-pull-hint"')
expect(css).toContain('.search-reveal{max-height:0;opacity:0;overflow:hidden;visibility:hidden;pointer-events:none;')
expect(css).toContain('.search-reveal.mobile-search-open{max-height:52px;opacity:1;visibility:visible;pointer-events:auto;transform:none;overflow:visible}')
expect(css).toContain('.search-reveal.mobile-search-pulling{max-height:var(--search-pull);')
const mobileLayout = css.slice(css.indexOf('@media(max-width:930px){.shell'))
expect(mobileLayout).toContain('.completed-filter-pill{min-width:138px;height:44px')
expect(css).not.toContain('width:min(260px,100%)')
expect(css).not.toContain('.today-completed-toolbar{margin-top:8px}')
expect(css).not.toContain('.habit-toolbar{')
})