Rewrite subject details page with adaptive multi-column layouts#3127
Open
Him188 wants to merge 8 commits into
Open
Rewrite subject details page with adaptive multi-column layouts#3127Him188 wants to merge 8 commits into
Him188 wants to merge 8 commits into
Conversation
… clarity and coverage in new and updated tests
…WindowSizeClass` for extra-large breakpoint detection
Implement the Figma redesign of the subject details page with three breakpoints: compact (<600dp, existing header/tabs with new details tab content), two-pane (600-1600dp, sidebar + content stream) and three-pane (>=1600dp, sidebar + content + rail with rating/reviews/staff cards). - Compute breakpoints from the actually available width, so the page renders correctly when embedded in the episode page bottom sheet and the search list-detail pane; add a narrow two-pane tier (600-1000dp) - Unified whole-page scrolling with an M3 sticky top bar that shows the subject title after the in-page title scrolls away - Desktop reviews path: preview cards (two-pane footer / three-pane rail) opening a full comment sheet with a write-review entry backed by the extracted EditableRatingDialogsHost; rating summary is clickable and the rating card has an explicit rate entry - Paged episode grid on desktop (max 2 rows per page, initial page contains the current episode) and a horizontal episode strip on mobile, with an episode-count link opening the episode list - View-all sheets for characters, staff and related subjects - Delete the obsolete DetailsTab and align section metrics (spacing, paddings, card sizes, tag style, rating histogram) with the design - Add deterministic Skiko screenshot tests covering all breakpoints and the scrolled state, plus EpisodePaging unit tests Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The episodes section item was emitted conditionally, so when episode data arrived it was inserted above the LazyColumn's scroll anchor and the connected-scroll setup prevented scrolling back up to reveal it (reproduced on a real device). Emit the item unconditionally and gate the content inside instead, so it expands in place when data loads. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Remove the episode-list icon button next to the play button (not in the design; episode interactions go through the content grid) and make both the play button and the collection type button fill the sidebar width. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Character medium images are mostly tall full-body renders; the 76dp circular crop cut figures at the hip. Render them in a 2:3 rounded card with ContentScale.Fit instead so the whole image is visible. SubjectCollectionTypeButton applied the caller's modifier to a wrapper Box while the inner button hugged content, so fillMaxWidth never reached the button; propagate min constraints so the sidebar button actually fills. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements the Figma redesign of the subject details page (design source: Figma 「💡 条目详情重设计(定稿)」, three-pane 1600dp board as the baseline) with three adaptive layouts, replacing the previous single-column-at-all-sizes UI. The data layer (
SubjectDetailsState/factory/loader/VM and all interaction state holders) is reused as-is; only the UI/layout layer is rewritten. Navigation contract is unchanged.Layouts
< 600dp600–1600dp>= 1600dpBreakpoints are computed from the actually available width, not the window width, so the page renders correctly when embedded in the episode-page bottom sheet (max 640dp) and the search list-detail pane.
Highlights
你的评分: N/打分)DetailsTab.kt; section metrics (paddings, gaps, card sizes, histogram, tag style) aligned to measured Figma valuesEpisodePagingunit testsScreenshots
All screenshots below are the packaged desktop app running against the production API (subject: Dr.STONE SCIENCE FUTURE Part 3, real account data).
单栏 Compact (420dp 窗口)
选集横滑自动定位到当前集 36,「看过 11 (35) · 全 13 话 ›」打开完整选集列表:
双栏 Medium (1400×900)
行内评分直方图右对齐;13 集一页容纳,header 显示集数文案:
三栏 Expanded (1680×1000)
右栏:评分卡(含「你的评分: 6」打分入口)/ 热门评价(真实评论 + 查看全部)/ 制作人员:
窄双栏 (700×900, 播放页 bottom sheet / 分屏场景)
侧栏收缩、隐藏行内直方图;选集分页且初始页含当前集(7 – 12 / 13):
整页滚动 + M3 粘性标题栏 (1680, 滚动后)
内嵌场景:搜索页 list-detail 详情栏 (无职转生)
按可用宽度(而非窗口宽度)选择布局的效果——详情栏内正确渲染双栏并启用选集分页:
Verification
:app:shared:ui-subject+:app:sharedcompile on desktop and Android; full Skiko screenshot test suite green🤖 Generated with Claude Code