-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pages: display content frame in mobile when canvas is not edit #60409
Changes from 6 commits
32ee6a3
575dee9
eaca957
333374b
f7fc9b2
e03b2d1
98f0e48
7f86266
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -52,7 +52,9 @@ export default function useLayoutAreas() { | |
mobile: | ||
canvas === 'edit' ? ( | ||
<Editor isLoading={ isSiteEditorLoading } /> | ||
) : undefined, | ||
) : ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Display the list on mobile. |
||
<PagePages /> | ||
), | ||
}, | ||
widths: { | ||
content: isListLayout ? 380 : undefined, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -26,6 +26,13 @@ | |
} | ||
} | ||
|
||
.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Depending on what component is displayed, the header sibling would be different:
|
||
margin-bottom: $header-height; | ||
@include break-medium { | ||
margin-bottom: 0; | ||
} | ||
} | ||
|
||
.edit-site-layout__header-container { | ||
z-index: z-index(".edit-site-layout__header-container"); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -43,12 +43,6 @@ | |
} | ||
|
||
.edit-site-page-patterns-dataviews { | ||
margin-top: 60px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of adding this bit of CSS to every page that displays the content frame in a mobile viewport, this PR moves it to the hub component. |
||
|
||
@include break-medium { | ||
margin-top: 0; | ||
} | ||
|
||
.page-patterns-preview-field { | ||
display: flex; | ||
flex-direction: column; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If widths become necessary for mobile, I think the router should declare them for this specific "area" the same it does for "content" — e.g.:
maxWidth: widths?.mobile
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So this change has no impact?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope. This only affected to pages that whose mobile area had content + had a width set for the content area (the existing logic only accounted for the list layout):
Gravacao.do.ecra.2024-04-05.as.11.13.47.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Was testing a different thing in
trunk
and this is what happened with this rule in place:Gravacao.do.ecra.2024-04-05.as.11.21.34.mov