Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Pages: display content frame in mobile when canvas is not edit #60409

Merged
merged 8 commits into from
Apr 5, 2024
Merged

Pages: display content frame in mobile when canvas is not edit #60409

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
32ee6a3
Display content frame in mobile when canvas is not edit
oandregal Apr 3, 2024
575dee9
Mobile layout: do not use widths from content in full layout
oandregal Apr 5, 2024
eaca957
Pages: give space for top-bar (with hub & search) in mobile
oandregal Apr 3, 2024
333374b
Templates & Parts: give space for top-bar (with hub & search) in mobile
oandregal Apr 3, 2024
f7fc9b2
Patterns: use sass variable for setting margin instead of raw value
oandregal Apr 5, 2024
e03b2d1
Extract margin rule to hub styles
oandregal Apr 5, 2024
98f0e48
Remove leftover from previous approach
oandregal Apr 5, 2024
7f86266
Scope styles to the Page component
oandregal Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,12 +294,7 @@ export default function Layout() {
<SavePanel />

{ isMobileViewport && areas.mobile && (
<div
className="edit-site-layout__mobile"
style={ {
maxWidth: widths?.content,
Copy link
Member Author

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.

Copy link
Contributor

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?

Copy link
Member Author

@oandregal oandregal Apr 5, 2024 •
edited
Loading

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

Copy link
Member Author

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

} }
>
<div className="edit-site-layout__mobile">
{ areas.mobile }
</div>
) }
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/layout/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export default function useLayoutAreas() {
mobile:
canvas === 'edit' ? (
<Editor isLoading={ isSiteEditorLoading } />
) : undefined,
) : (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Display the list on mobile.

<PagePages />
),
},
widths: {
content: isListLayout ? 380 : undefined,
Expand Down
7 changes: 7 additions & 0 deletions packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@
}
}

.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile) {
Copy link
Member Author

@oandregal oandregal Apr 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Depending on what component is displayed, the header sibling would be different:

  • a page component in the content frame: .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page
  • the sidebar frame: .edit-site-layout__content > interface-navigable-region edit-site-layout__sidebar-region
  • the editor: .edit-site-layout__content > .edit-site-layout__mobile > .edit-site-editor__interface-skeleton

margin-bottom: $header-height;
@include break-medium {
margin-bottom: 0;
}
}

.edit-site-layout__header-container {
z-index: z-index(".edit-site-layout__header-container");
}
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,6 @@
}

.edit-site-page-patterns-dataviews {
margin-top: 60px;
Copy link
Member Author

@oandregal oandregal Apr 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The 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;
Expand Down
Loading