-
Notifications
You must be signed in to change notification settings - Fork 8
CRM: Align admin footer with the unified Jetpack footer #8
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
6 commits
Select commit
Hold shift + click to select a range
bf8131a
CRM: Replace admin footer credits with unified Jetpack footer markup
CGastrell 4833738
CRM: Style admin footer to match the unified Jetpack footer
CGastrell 98fdf0d
CRM: Fix admin footer layout on mobile
CGastrell ad45280
CRM: Tidy footer styles per review
CGastrell df8dcb9
CRM: Fix footer WPDS token names and fallbacks
CGastrell 3c94ad9
CRM: Update admin credits setting description
donnchawp 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| body.jpcrm-admin { | ||
|
|
||
| // Only restyle the footer when our branded footer content is present. When the | ||
| // "powered by" setting is off (or under white label) #wpfooter is left empty and | ||
| // keeps its default WordPress appearance. | ||
| #wpfooter:has( .jetpack-footer__logo ) { | ||
| align-items: center; | ||
| background-color: var(--wpds-color-bg-surface-neutral, var(--wpds-color-background-surface-neutral, #fcfcfc)); | ||
| border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4); | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| font-size: var(--wpds-typography-font-size-md, 13px); | ||
| gap: var(--wpds-dimension-gap-xl, 24px); | ||
| padding: var(--wpds-dimension-padding-xl, 20px) var(--wpds-dimension-padding-2xl, 24px); | ||
|
|
||
| // Wide footer: single row, Automattic by line pushed to the far right. | ||
| #footer-upgrade { | ||
| margin-inline-start: auto; | ||
| } | ||
|
|
||
| // WordPress core outputs an empty <div class="clear"> inside #wpfooter; | ||
| // as a flex item it would add a trailing gap that pushes the by line off | ||
| // the right edge, so drop it out of the layout. | ||
| .clear { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| // Below 782px WordPress core hides #wpfooter (common.css), but the base rule | ||
| // above keeps it shown — specificity (1,2,1) vs core's (1,0,0), and no media | ||
| // query — which is why these mobile rules are reachable at all. Core's | ||
| // `.auto-fold #wpfooter` also leaves a 36px icon-menu margin here (admin-menu.css, | ||
| // @media max-width: 960px); drop it so the footer sits flush with the screen edge. | ||
| @media ( max-width: 782px ) { | ||
|
|
||
| #wpfooter:has( .jetpack-footer__logo ) { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| // Phones: stack the logo and the Automattic by line onto their own left-aligned | ||
| // rows, matching the unified Jetpack footer. Unlike that footer we have no | ||
| // middle nav links to force the wrap, so we stack explicitly. | ||
| @media ( max-width: 480px ) { | ||
|
|
||
| #wpfooter:has( .jetpack-footer__logo ) { | ||
|
|
||
| #footer-left, | ||
| #footer-upgrade { | ||
| flex-basis: 100%; | ||
| } | ||
|
|
||
| #footer-upgrade { | ||
| margin-inline-start: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Left: Jetpack logo + wordmark. | ||
| .jetpack-footer__logo { | ||
| align-items: center; | ||
| display: inline-flex; | ||
| gap: 8px; | ||
|
|
||
| svg { | ||
| display: block; | ||
| flex-shrink: 0; | ||
| } | ||
| } | ||
|
|
||
| .jetpack-footer__logo-text { | ||
| color: var(--wpds-color-fg-content-neutral, var(--wpds-color-foreground-content-neutral, #1e1e1e)); | ||
| font-size: var(--wpds-typography-font-size-md, 13px); | ||
| line-height: 1; | ||
| } | ||
|
|
||
| // Right: Automattic "by line". | ||
| a.jetpack-footer__a8c { | ||
| align-items: center; | ||
| display: inline-flex; | ||
|
|
||
| svg { | ||
| display: block; | ||
| fill: var(--wpds-color-fg-interactive-neutral-weak, var(--wpds-color-foreground-interactive-neutral-weak, #707070)); | ||
| } | ||
| } | ||
| } | ||
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
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.
Do we really need to do this? I don't see a element with a clear class that was added.
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.
Keen eye! If it stays visible, it becomes a trailing flex item and the gap pushes the Automattic byline 24px off the right edge. So the rule is doing real work.
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.
Added a comment to make it clear, but we can remove that as well