Posted by Shyamala on January 30, 2013 at 10:00am
9 followers
| Project: | Drupal core |
| Version: | 8.x-dev |
| Component: | CSS |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
| Issue tags: | d8mux, d8mux-admin, mobile, Responsive Design, Usability |
Issue Summary
Meta Issue:#1870944: [Meta] Mobile friendly admin pages
Problem/Motivation
When viewing node/add pages (node/add/%) in small screens, the text formatter block has misaligned text and excessive padding on its list of text formats.
Note: the odd wrapping on “More information on text formats” link and the excessive indenting on the bulleted list.
Proposed resolution
Catch suggested that we didn't need the bullet list padding for any viewport sizes (not just a mobile thing.) So we need to remove the padding from the bullet list and also remove the padding from the left side of the more info link.
Remaining tasks
None.
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| node add- text formats.PNG | 10.06 KB | Ignored: Check issue status. | None | None |
Comments
#1
#2
The last submitted patch, filter-tips-narrow-1902872.patch, failed testing.
#3
#1: filter-tips-narrow-1902872.patch queued for re-testing.
#4
#5
It's not clear to me what the issue actually is. When I added the the padding from the patch to the tips class (via Firebug and/or in Chrome's Developer tools) I didn't see any change, even for very narrow viewports.
#6
@jmarkel, I do see it as the screenshots show the before (in issue summary) + after (in #1). There's a browser default 40px margin on a ul. The patch removes it on narrow viewports. Sometimes you need to reload while in the narrow width to see it as it would load narrow.
#7
Got it - it wasn't obvious what to look for even when looking at the screenshots, since the text wasn't really mis-aligned at all, there was just too much whitespace to the left (or right on rtl).
Looks good!
Thanks!
#8
Is the padding really needed for wider screen sizes?
#9
#catch, I figured indented is normal list display, but it will certainly be just as readable either way.
#10
Agreed - the padding could certainly be eliminated for all widths but, in the interest of treading lightly with UX changes, perhaps it shouldn't be...
#11
#12
keyhitman - why are you assigning to yourself? There's a good patch - just a question about whether it should apply for all viewports or only narrow ones. Do you have an opinion on that?
#13
Following discussion at #10 I reworked the patch to apply to all viewports.
#14
Attached screenshots of before and after.
#15
The "More information about text formats" link was also displaying weirdly in the mobile screenshot in the initial summary. Can I get a screenshot for narrow viewports after the patch?
#16
Fixed the "More Information about text formats" link as per #15. Screenshots are attached
#17
+++ b/core/modules/filter/filter.admin.css@@ -32,7 +32,7 @@
- padding: 0 20px;
+ padding: 0 20px 0 0;
This is exactly the change we need to make. But it adds a left-to-right specific styling. So you need to add a
/* LTR */comment after the declaration and then add the -rtl version to filter.admin-rtl.css.#18
Have added -rtl version styling and a /* LTR */ comment as per #17.
#19
Drupal.org is pissing me off. I'm uploading the image from the initial posting again, so I can embed it.
[edit: whoops. didn't mean to RTBC it yet.]
#20
Ok. I've updated the issue summary because I've confirmed that the patch uses the proper solution.
The patch is still in the testing bot queue, but it is a CSS-only fix, so it can't possibly affect any tests. This is RTBC and safe to commit. :-)
#21
Wow, that looks much better! RTL support too! :D
Committed and pushed to 8.x. Thanks!
#22
Automatically closed -- issue fixed for 2 weeks with no activity.