Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Meta Issue: #1870944: [Meta] Mobile friendly admin pages
Problem/Motivation
Admin URL: admin/structure/block/list/%/add
The Left col and Right col overlap in Narrow screens
Proposed resolution
To be determined.
Remaining tasks
To be determined.
Comment | File | Size | Author |
---|---|---|---|
#30 | Screen Shot 2015-01-10 at 09.45.25.jpg | 488.38 KB | LewisNyman |
#24 | leftrightcols_overlap-24.patch | 1.78 KB | bibeksahu |
#19 | leftrightcols_overlap-1888474-17.jpeg | 199.98 KB | sidharthap |
#18 | leftrightcols_overlap-1888474-16.jpeg | 416.63 KB | sidharthap |
#15 | leftrightcols_overlap-1888474-15.jpg | 81.23 KB | sidharthap |
Comments
Comment #1
jayboodhun CreditAttribution: jayboodhun commentedI have added CSS for a narrow viewport to clear the float for display up to 540px wide.
Please find attached the patch
Comment #2
jayboodhun CreditAttribution: jayboodhun commentedPlease can you review the patch
Comment #3
rteijeiro CreditAttribution: rteijeiro commentedHi, I have applied the patch and I can see that the blocks table header scrolls over the table (look the attached screenshot). I don't know if it's the right behavior.
Tested with Chrome, Safari, Firefox and Opera and everything looks okay except that.
Comment #4
rteijeiro CreditAttribution: rteijeiro commentedSorry, forgot the image :P
Comment #5
rteijeiro CreditAttribution: rteijeiro commentedI also think the search box should be smaller and the "Next" and "All Blocks" buttons should be next the search box, as seen on the attached image.
What do you think?
Comment #6
rteijeiro CreditAttribution: rteijeiro commentedThe tags were deleted due a unknown reason O_o
Comment #7
jayboodhun CreditAttribution: jayboodhun commentedThe Floating Table Headers are due to the Toolbar not being fixed on smaller screens.
I have created another issue for this:
http://drupal.org/node/1899616#comment-6986924
There is also a patch attached on that issue.
Thanks
Comment #8
rteijeiro CreditAttribution: rteijeiro commentedSo, I think it should be considered as RTBC.
Is it right?
Comment #9
mbrett5062 CreditAttribution: mbrett5062 commentedNot until #5 is addressed, I believe these should be moved also.
Comment #10
LewisNyman CreditAttribution: LewisNyman commentedIt looks like this button issue was introduced by #1845728: Refactor and introduce generic button CSS styles for forms and links, I've fixed that problem so the blocks search form should inherit the default styling for all buttons.
I've also refactored the layout CSS slightly, mobile first media queries for the win!
I would have some UX concerns about the filter functionality appearing at the bottom of the page but as a quick bug fix this patch seems good enough.
Comment #11
LewisNyman CreditAttribution: LewisNyman commentedComment #12
rteijeiro CreditAttribution: rteijeiro commentedHi, I applied the patch and it seems correct and the button issue of #1888474-5: Left col and Right col overlap in Narrow screens is amended too.
It only needs to follow the CSS coding standards so, please, add a single space after the property name and before the property value and try to indent correctly the final line of the comment block.
Thanks :)
Comment #13
echoz CreditAttribution: echoz commentedRelated, #1874982: CSS bugs in the Block Library UI possibly meant to be status postponed.
Comment #14
BWPanda CreditAttribution: BWPanda commentedHere's an updated patch that:
- Adds space between property name & value
- Indents final line of comment block
- Alphabetises properties
- Rewords the comment to be more concise
Comment #15
sidharthapI tried to replicate the issue before applying patch. I have the fresh D8 clone on my local and used ie8 to test. My screen is looks something different from the screens attached previously here.
Comment #16
echoz CreditAttribution: echoz commented@ sidharthap, it's the screen after you click the "Add block" button.
Comment #17
sidharthapThanks @echoz, Issue is replicated at my end. I applied the patch and it works for me.
Tested in Chrome and Firefox 16.0.2
Comment #18
sidharthapScreen shot attached.
Comment #19
sidharthap#14, Tested in IE8 with fresh D8 clone. It seems the narrow screens problem is resolved but it is not working in wider screen. Please find the attached screen. marking as needs work.
Comment #20
echoz CreditAttribution: echoz commentedIE 8 is getting the mobile layout here, as there is no polyfill present to allow it to understand media queries, and besides, #1787012: [policy, no patch] Write D8 JS against ECMAScript 5. Prevent errors with feature detection (drop IE8 support)
Comment #21
sarav.din33 CreditAttribution: sarav.din33 commentedWas unsuccessful applying patch Comment #14. Got the below error:
Comment #22
rteijeiro CreditAttribution: rteijeiro commentedSame error here with:
git apply leftrightcols_overlap-1888474-14.patch
But applies well with:
patch -p1 < leftrightcols_overlap-1888474-14.patch
Comment #23
Shyamala CreditAttribution: Shyamala commentedResetting status to needs work!
Comment #24
bibeksahu CreditAttribution: bibeksahu commentedAttached is a new patch, which is basically #14 applied to the newest codebase (as of 30-May-2013, 11am CDT). Hopefully this one applies more cleanly for folks.
Comment #25
rteijeiro CreditAttribution: rteijeiro commentedPatch applies well and it works like a charm. Maybe RTBC?
Comment #26
echoz CreditAttribution: echoz commentedAs anticipated in #13, marking as postponed since #1874982: CSS bugs in the Block Library UI is postponed again "since the current prototype eliminates this UI entirely"
Comment #27
Sumit kumar CreditAttribution: Sumit kumar commented24: leftrightcols_overlap-24.patch queued for re-testing.
Comment #29
echoz CreditAttribution: echoz commentedSetting back to postponed as in #26 (from a year ago). Both this issue and #1874982: CSS bugs in the Block Library UI should likely be closed, but I'll leave that to those who are more up on block interface progress.
Comment #30
LewisNyman CreditAttribution: LewisNyman commentedThis still occurs, I think we just need to tweak the media query value a a bit do they collapse earlier??
Comment #31
echoz CreditAttribution: echoz commented@LewisNyman, On the screen shown in your screenshot, I get the right column bumping below the first at the same viewport width that the vertical admin menu kicks in. Tested on Safari and Chrome, so I can't replicate the issue in your screenshot. Also, this issue was originally about a next screen after clicking "Add custom block" which used to lead to a two column layout but no longer exists.
Comment #32
echoz CreditAttribution: echoz commentedClosing since 1) the screen this 2 yr old issue started with is no longer a two column layout so doesn't have an overlap problem, and 2) if there in fact is an overlap issue in another screen (as shown in #30), it deserves it's own issue, although I can not reproduce, as described in #31.