Fix mobile layout issues in admin bar and themes - #656
Merged
Conversation
- Admin bar: correct selector (#wp-admin-bar-friends-menu) and emit the mobile style in wp-admin too, so the Friends icon shows on mobile on both the frontend and admin screens. - Google Reader: stack header sections vertically below 640px so the chips no longer wrap into a column when the search field fills the row. - Twitter: drop the duplicated compose form from the mobile panel; the always-visible inline compose box already handles posting.
Contributor
Test this PR in WordPress PlaygroundYou can test this pull request directly in WordPress Playground: This will install and activate the plugin with the changes from this PR. |
Extracts the stylized "F" path from assets/friends-logo.svg, drops the gradient and decorations, and inlines it with fill=currentColor so it inherits the admin bar's text color (including color schemes and dark mode). Sized for both the desktop bar and the wider mobile bar.
- Render the Friends logo via a CSS mask on .ab-icon:before so background-color: currentColor picks up the admin color scheme's dashicon color (including hover tints); the inline SVG variant couldn't inherit those because the colors are set on :before. - Tighten the mask viewBox to the shape's bounds so it centers horizontally, and drop the desktop margin-top to 2px so it sits centered vertically in the 32px bar. - Reserve 46px (the mobile admin bar height) below 782px in the Twitter and Google Reader themes so content isn't hidden behind the masterbar.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
#wp-admin-bar-friends, but the node is registered with idfriends-menu, so the selector never matched and WP's default mobile rules (hiding.ab-icon/.ab-label) won. The same style was also only emitted onwp_head, so wp-admin screens didn't get it at all. Fixed both.@media (max-width: 640px)block that stacks the two navbar sections vertically and zeroes the search section's left margin.Test plan
Changelog
Type
Message
Mobile fixes: show the Friends icon in the admin bar on mobile; stack chips and search on separate rows in the Google Reader theme on narrow screens; remove duplicate compose box from the Twitter theme mobile panel.