Opened 7 years ago
Closed 4 years ago
#42201 closed defect (bug) (fixed)
Admin Sidebar Text length Issue
Reported by: | jagirbaheshwp | Owned by: | audrasjb |
---|---|---|---|
Milestone: | 5.6 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | has-screenshots has-patch early commit |
Focuses: | ui, css | Cc: |
Attachments (40)
Change History (128)
#4
@
6 years ago
- Keywords needs-patch added; has-patch removed
The submitted patch does not fix the bug in responsive width.
#6
@
6 years ago
- Resolution set to worksforme
- Status changed from new to closed
The submitted patch fixed the bug in responsive width too.
Tested in WordPress( 5.1-beta3-20190207.100728 ).
This ticket was mentioned in Slack in #core by hareesh-pillai. View the logs.
6 years ago
#13
@
6 years ago
- Keywords needs-refresh added
Below css generate issue in responsive design but if we use height: auto
then it will fixed issue in responsive design.
@media only screen and (max-width: 960px) { .auto-fold #adminmenu a.menu-top { height: 34px; } }
This ticket was mentioned in Slack in #core by marybaum. View the logs.
6 years ago
#16
@
6 years ago
For me adding below padding fixes issue.
#adminmenu div.wp-menu-name { padding: 8px 8px 8px 35px; }
This ticket was mentioned in Slack in #core by audrasjb. View the logs.
6 years ago
This ticket was mentioned in Slack in #core by worldweb. View the logs.
5 years ago
This ticket was mentioned in Slack in #core by worldweb. View the logs.
5 years ago
This ticket was mentioned in Slack in #core by worldweb. View the logs.
5 years ago
This ticket was mentioned in Slack in #forums by worldweb. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-themes by worldweb. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-editor by worldweb. View the logs.
5 years ago
#31
@
5 years ago
- Keywords commit added; needs-refresh removed
Changing owner of the ticket.
I tested the proposed patch and it works fine (see screenshot).
However I refreshed the patch since the previous one doesn't apply to WordPress Dev sourcecode.
42201.5.diff
fix the implementation and refreshes the proposed patch against trunk.
Also @worldweb, youdon't need to copy patches to RTL CSS files since they are automatically generated during build process ;-)
Adding commit
keyword.
#33
@
5 years ago
- Keywords needs-patch added; has-patch commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
Looks like this change introduced a small regression when the admin menu items display the "counters": the spacing is now clearly smaller and the counters are almost attached to the menu item text.
See in the screenshot below: left: before the change, right: after the change that added display: flex
.
#34
@
5 years ago
Also, with longer translations and counters with multiple digits, the new display: flex
and word-break: break-word;
properties make the counter break.
On the left: the previous CSS where, at least, the counter goes to a new line and doesn't break.
On the right: the new CSS.
#36
follow-up:
↓ 37
@
5 years ago
- Keywords needs-patch added; has-patch removed
42201.6.patch
fixes the plugin counter problem only, still need to add #adminmenu .awaiting-mod, #adminmenu .update-plugins
for comment counter.
Also if we can add css to .wp-menu-name > span
then it will cover other menu(theme & plugins) too which have counter option.
#37
in reply to:
↑ 36
@
5 years ago
Replying to iqbalbary:
42201.6.patch
fixes the plugin counter problem only, still need to add#adminmenu .awaiting-mod, #adminmenu .update-plugins
for comment counter.
Also if we can add css to
.wp-menu-name > span
then it will cover other menu(theme & plugins) too which have counter option.
Thank you for testing, updating CSS.
#39
@
5 years ago
- Keywords commit added; needs-testing removed
Tested the most recent patch, and it works as intended. Marking this for commit
.
#41
@
5 years ago
- Keywords needs-patch added; has-patch commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
Sorry to reopen but [46453] doesn't seem to fully address the unnecessary visual changes introduced with the previous commit.
1
On WordPress 5.2 when the counters have only 1 digit, they're a 18 by 18 pixels circle. This is not a coincidence: it's intentional and the CSS should make sure it's a perfect circle. Instead, now the counters aren't a perfect circle: they have a slightly oval shape and the number is not perfectly centered. Screenshot:
2
The spacing between the text and the counters is still clearly different and doesn't help readability. Not to mention it's not great visually.
3
With longer menu items or longer translations the counter ends up in the middle of the page: this is undesirable. On WordPress 5.2 wasn't perfect as well but at least it went to a new line leaving just the text to overflow into the page.
Screenshot for 2 and 3:
4
#adminmenu .wp-menu-name > span
is now a flex item thus these properties applied on it:
display: inline-block; vertical-align: top;
don't make much sense. Alignment should be controlled with the properties that pertain to flexbox.
See also the attached animated GIF that better highlights the visual changes.
@
5 years ago
Latest patch fixes longer Menus and submenus text, rounded circle to counts till 9 number and it's 18px, spacing between menu text and count.
#43
@
5 years ago
- Keywords needs-patch added; has-patch removed
One more thing to address that happens also on trunk before applying 42201.9.patch:
When the menu is collapsed, the counters are not styled properly. See screenshot below. Actually, there is another counter within .wp-submenu-head
that is shown only when the menu is collapsed.
#44
@
5 years ago
- Keywords has-patch added; needs-patch removed
When menus is collapsed .wp-submenu-head fix added in recent patch.
#45
@
5 years ago
The updates count under Dashboard is no longer styled properly after [46453], see 42201.updates-count.PNG.
42201.10.patch appears to resolve the issue.
#46
@
5 years ago
The notification circle style is restored with 42201.10 in Chrome, Edge, Internet Explorer and Firefox (Windows 10).
This ticket was mentioned in Slack in #core by sabernhardt. View the logs.
5 years ago
#48
@
5 years ago
- Keywords commit added; needs-testing removed
Thanks for the testing @sabernhardt .
Safari 12, Chrome 77, and Firefox 69 all look good on macOS, as does latest Chrome on Android.
Those nested selectors aren't optimal but I can't immediately see a better way to do it, so +1 from me to get this in.
#49
@
5 years ago
- Owner changed from audrasjb to johnbillion
- Status changed from reopened to accepted
#51
@
5 years ago
- Resolution fixed deleted
- Status changed from closed to reopened
r46555 broke the use of :after
on #adminmenu .wp-submenu a
.
Specifically, changing from display: block;
to display: flex;
.
I help build or maintain several plugins that add styling to a pseudo element after
some specific anchors. This styling is applied specifically based on user feedback for plugins with large add-on ecosystems that add many sub-menus to a single top-level menu item.
/* Secondary Separators */ #adminmenu ul > li:not(:last-child) a[href^="admin.php?page=sugar-calendar"]::after, #adminmenu ul > li:not(:last-child) a[href^="post-new.php?post_type=sc_event"]::after { display: block; border-bottom: 1px solid rgba(255,255,255,0.2); height: 14px; margin: 0 -13px; content: ''; }
With these anchors now displaying as flexible instead of blocks, the :after
pseudo elements flex after them, even when display: block;
is applied to them.
#52
@
5 years ago
Some research from: https://www.w3.org/TR/css-flexbox-1/#flex-items
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered (just as if its text nodes were display:none).
If I am reading this correctly, anything now "inside" that now-flexed anchor is forced to be a flex element.
Using display: block !important;
even gets ignored in all browsers, confirming (to me) that child pseudo elements of a flexed element are forced to flex, meaning there is no alternative CSS to get this styling working again (a more strict hack could override the core anchor styling, but whack-a-mole priority juggling isn't a solution IMO.)
A flex item establishes an independent formatting context for its contents. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.
#53
@
5 years ago
I get a wrong styling in every color scheme besides the default one (looking at 5.3-RC1-46560).
Reason from colors.min.css (in this example):
#adminmenu .awaiting-mod, #adminmenu .update-plugins { color: #fff; background: #e1a948; }
#54
follow-up:
↓ 55
@
5 years ago
Personally, at this point of the release cycle (WordPress 5.3 is now in Release Candidate) I'd lean towards a complete revert of all the changes from this ticket.
This is not to blame anyone :) The intent was good but the WordPress admin menu is tricky, made of various "layers" of functionalities, HTML, and CSS that stratified across the years. It's a very good example of a place where changing even a very small detail can break many things.
Overall, this change doesn't seem ready for 5.3 and it can be explored better in the next release cycle.
#55
in reply to:
↑ 54
@
5 years ago
Replying to afercia:
Personally, at this point of the release cycle (WordPress 5.3 is now in Release Candidate) I'd lean towards a complete revert of all the changes from this ticket.
I tend to agree. Given that we're still discovering regressions after two follow-up commits, seems like we should consider reverting [46332], [46453], and [46555] for now, and trying again in a future release to allow for more testing.
This ticket was mentioned in Slack in #core by david.baumwald. View the logs.
5 years ago
#57
@
5 years ago
- Keywords revert added; has-patch commit removed
- Status changed from reopened to accepted
Agreed on the revert. Let's get this back into 5.4 as soon as we branch so it can be tested as-is and iterated upon.
This ticket was mentioned in Slack in #core by david.baumwald. View the logs.
5 years ago
#63
@
5 years ago
- Keywords needs-testing added
- Owner changed from johnbillion to desrosj
- Status changed from accepted to assigned
#64
@
5 years ago
- Keywords needs-testing removed
- Milestone changed from 5.4 to Future Release
- Owner changed from desrosj to johnbillion
Edited wrong ticket and falsely reassigned. Reassigning this to @johnbillion.
Since this ticket doesn't have any momentum, it's being moved to Future Release
. If any committer feels this can be moved up or can be owned during a specific cycle, feel free to update the milestone accordingly.
#67
@
4 years ago
- Keywords early added
- Status changed from assigned to reviewing
- Version 4.8.2 deleted
#68
@
4 years ago
- Keywords commit added; needs-testing removed
I tested the last proposed patch and it looks good to go on my side. Marking this for commit
.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
4 years ago
#70
@
4 years ago
Agreed, I tested this last night and it looks like a good approach. I think we can commit it so it gets a good amount of testing across browsers.
#71
@
4 years ago
- Keywords commit removed
I've uploaded a screenshot of the effects in the narrow viewport/mobile menu view, it's not great now but it seems even worse after. I'd like for that to be addressed before committing a patch here.
#73
@
4 years ago
- Keywords needs-testing added; needs-refresh removed
@helen thank you for test, patch refreshed to fix issue on narrow viewport.
#75
@
4 years ago
Could we have a screenshot of 42201.13.patch on a narrow viewport?
#76
@
4 years ago
- Keywords needs-testing removed
While I was taking screenshot of the last patch, I noticed a small remaining CSS issue. 42201.14.diff fixes this issue. See screenshot of the new patch above.
#77
@
4 years ago
42201.14.diff working fine in WP 5.6-alpha-48958 version.
#78
follow-up:
↓ 79
@
4 years ago
With the use of word-break: break-word;
has this been tested on IE11? To my understanding it doesn't support that css;
https://caniuse.com/mdn-css_properties_word-break_break-word
*I would but am on a mac.
#79
in reply to:
↑ 78
@
4 years ago
I have tested 42201.14.diff in IE11 and word-break: break-word;
is not working in IE11.
Replying to garrett-eclipse:
With the use of
word-break: break-word;
has this been tested on IE11? To my understanding it doesn't support that css;
https://caniuse.com/mdn-css_properties_word-break_break-word
*I would but am on a mac.
This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.
4 years ago
#81
@
4 years ago
- Keywords needs-testing added
Latest patch should be retested across browsers but looks good.
This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.
4 years ago
#84
@
4 years ago
- Keywords close commit added; needs-testing removed
- Owner set to audrasjb
- Status changed from reviewing to accepted
The refreshed patch looks good to go on my side.
It's basically the same than mine, but it adds cross browsers support.
Padding added to the left side of the label.