Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jayboodhun’s picture

I have added CSS for a narrow viewport to clear the float for display up to 540px wide.
Please find attached the patch

jayboodhun’s picture

Status: Active » Needs review

Please can you review the patch

rteijeiro’s picture

Status: Needs review » Needs work

Hi, 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.

rteijeiro’s picture

FileSize
128.19 KB

Sorry, forgot the image :P

rteijeiro’s picture

Issue tags: -Usability, -Responsive Design
FileSize
125.09 KB

I 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?

rteijeiro’s picture

Issue tags: +Usability, +Responsive Design

The tags were deleted due a unknown reason O_o

jayboodhun’s picture

The 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

rteijeiro’s picture

Status: Needs work » Reviewed & tested by the community

So, I think it should be considered as RTBC.

Is it right?

mbrett5062’s picture

Status: Reviewed & tested by the community » Needs work

Not until #5 is addressed, I believe these should be moved also.

LewisNyman’s picture

It 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.

Screen Shot 2013-01-26 at 16.55.37.png

LewisNyman’s picture

Status: Needs work » Needs review
rteijeiro’s picture

Status: Needs review » Needs work

Hi, 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 :)

echoz’s picture

Related, #1874982: CSS bugs in the Block Library UI possibly meant to be status postponed.

BWPanda’s picture

Status: Needs work » Needs review
FileSize
1.78 KB

Here'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

sidharthap’s picture

I 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.

echoz’s picture

@ sidharthap, it's the screen after you click the "Add block" button.

sidharthap’s picture

Thanks @echoz, Issue is replicated at my end. I applied the patch and it works for me.
Tested in Chrome and Firefox 16.0.2

sidharthap’s picture

Screen shot attached.

sidharthap’s picture

Status: Needs review » Needs work
FileSize
199.98 KB

#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.

echoz’s picture

Status: Needs work » Needs review

IE 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)

sarav.din33’s picture

Was unsuccessful applying patch Comment #14. Got the below error:

$ git apply leftrightcols_overlap-1888474-14.patch 
  error: patch failed: core/themes/seven/style.css:784
  error: core/themes/seven/style.css: patch does not apply
$ 
rteijeiro’s picture

Same error here with:
git apply leftrightcols_overlap-1888474-14.patch

But applies well with:
patch -p1 < leftrightcols_overlap-1888474-14.patch

Shyamala’s picture

Status: Needs review » Needs work

Resetting status to needs work!

bibeksahu’s picture

Status: Needs work » Needs review
FileSize
1.78 KB

Attached 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.

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

Patch applies well and it works like a charm. Maybe RTBC?

echoz’s picture

Status: Reviewed & tested by the community » Postponed

As 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"

Sumit kumar’s picture

Status: Postponed » Needs review

24: leftrightcols_overlap-24.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, 24: leftrightcols_overlap-24.patch, failed testing.

echoz’s picture

Issue summary: View changes
Status: Needs work » Postponed

Setting 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.

LewisNyman’s picture

Status: Postponed » Active
Issue tags: -mobile-novice, -CSS novice, -d8mux-admin +frontend, +CSS, +Novice
FileSize
488.38 KB

This still occurs, I think we just need to tweak the media query value a a bit do they collapse earlier??

echoz’s picture

@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.

echoz’s picture

Status: Active » Closed (cannot reproduce)

Closing 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.