govin/paper-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: move the second-level menu to the left of the content

Browse Source 
The rail was on the right. It now leads the row instead, so the section menu
reads as a conventional left-hand navigation column.

Which side it lands on was never a stylesheet decision: `.app-body` is a flex
row and the aside is simply its first child now, with `.app-main` after it.
The only style change that had to follow is the rail's separator, which moves
from its left edge to its right, plus the collapse tooltip's placement.

The global shell contract in base.css now says this explicitly, so the next
person to move the rail knows the side comes from DOM order rather than from a
rule in that file.
This commit is contained in:
govin
2026-09-18 16:35:24 +08:00
parent 9ded3bd574
commit 4b826567b8
4 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/base.css
+6 -3
View File
@@ -86,9 +86,12 @@ samp {
The shape is:
.app-shell column: header over .app-body
.app-body row: .app-main over .app-aside (if present)
.app-body row: .app-aside (if present) then .app-main
.app-main the single scroll container
.app-aside fixed-width rail, scrolls independently
Which side the rail lands on is decided by its DOM order inside the row,
not by a rule here: first child means left.
--------------------------------------------------------------------------- */
.app-shell {
@@ -156,8 +159,8 @@ samp {
background-color: var(--el-text-color-placeholder);
}
/* The second-level menu on the right. Its own width is set by the component,
so only the shrink behaviour belongs here. */
/* The second-level menu, to the left of the content. Its own width is set by
the component, so only the shrink behaviour belongs here. */
.app-aside {
flex: 0 0 auto;
min-height: 0;