-
Notifications
You must be signed in to change notification settings - Fork 2k
Hosting Dashboard v2: view transitions (part 1) #103278
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
Merged
Merged
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
a0e9b3b
Hosting Dashboard v2: view transitions (part 1)
ellatrix 2bf4d69
Fix main content issues
ellatrix a839ab6
Fine tune the header animations
ellatrix 0e4d23c
tweak some profile things
ellatrix 379f9f5
centre smaller cards
ellatrix 79b2c20
Also disable shrinking for main content
ellatrix 4ca09f3
Remove sliding the layout title
ellatrix a63afcf
Restore button resize
ellatrix df5f638
Add page layout header prop
ellatrix 17112d5
format css
ellatrix c779bfe
Fix spacing
ellatrix File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
::view-transition-old(root), | ||
::view-transition-new(root) { | ||
animation-duration: 250ms; | ||
} | ||
|
||
// The main and sub headers must be separate view transitions, othervise the sub | ||
// header won't slide in! | ||
header.dashboard-header-bar { | ||
view-transition-name: main-header; | ||
} | ||
main div.dashboard-header-bar { | ||
view-transition-name: sub-header; | ||
} | ||
|
||
// Headers should show on top of the rest of the page (important for sticky). | ||
::view-transition-group(main-header), | ||
::view-transition-group(sub-header) { | ||
z-index: 1; | ||
} | ||
|
||
// Do not let the browser transform (slide in) the main hear. This is important | ||
// for sticy positioning (when the page is scrolled down) and gently switching | ||
// between the main and sub headers. | ||
::view-transition-group(main-header) { | ||
transform: none !important; | ||
} | ||
|
||
::view-transition-image-pair(main-header), | ||
::view-transition-image-pair(sub-header) { | ||
height: auto; | ||
} | ||
|
||
// Large and small must be separate so they don't cross-animate. | ||
.dashboard-page-layout.is-large .client-dashboard-components-page-header { | ||
view-transition-name: page-layout-header-large; | ||
} | ||
.dashboard-page-layout.is-small .client-dashboard-components-page-header { | ||
view-transition-name: page-layout-header-small; | ||
} | ||
|
||
.dashboard-page-layout.is-large .client-dashboard-components-page-header .components-button.is-primary { | ||
view-transition-name: page-layout-header-large--button; | ||
} | ||
|
||
::view-transition-old(page-layout-header-large--button), | ||
::view-transition-new(page-layout-header-large--button) { | ||
height: 100%; | ||
} | ||
|
||
.dashboard-page-layout__content { | ||
view-transition-name: page-layout-content; | ||
} | ||
|
||
::view-transition-old(page-layout-content), | ||
::view-transition-new(page-layout-content) { | ||
// Never expand the main content horizontally, but allow it to shrink. | ||
width: auto; | ||
// Also disable shrinking. Leaving it commented out to test. | ||
// max-width: 100%; | ||
height: auto; | ||
} | ||
|
||
::view-transition-image-pair(page-layout-content) { | ||
display: flex; | ||
justify-content: center; | ||
} |
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
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
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
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
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
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
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
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
Oops, something went wrong.
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.
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.
I like that it feels not intrusive like that. It's its own CSS file that we can remove and iterate on as needed. I don't like that we have to use classnames for things that are rendered in different places to achieve it though.
I'm not sure yet what's the best approach.