collapsed Customize sidebar , showing empty while we change page view from desktop to responsive mobile view

[mostafas]

Hello
I'm new in bug report.and don't know exactly this is a bug or somethings else.
Well...
While i try to test new WordPress 4.5 trunk version , going to customize sidebar, after that i collapse customize sidebar and use responsive design mode on Firefox and resize windows width to 460px(in fact 640x502) and customize collapsed sidebar will expand with no text on sidebar.

I also test on chrome, clear Firefox cache.but problem yet exist.it this ok...or i maybe shouldn't ever do that like this.

[mostafas]

problem on firefox on responsive designe mode at 640x502

[mostafas]

Better Screenshot

[afercia]

At a screen width of 640 pixels and below the Customizer two columns layout:

switches to a "responsive view" with a one column layout:

where the sidebar has a width of 100%, the "Collapse" button disappears, and there's a new UI control to switch from the Customizer sidebar to the preview.

By the way, when the sidebar is collapsed and then the screen width becomes less or equal to 640 pixels (for example users may change orientation on a mobile device) the sidebar is still collapsed and this rule in themes.css will still set a negative left margin on the sidebar so the sidebar text will be off screen:

.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
	margin-left: -300px;
}

This rule should be simply reset to margin-left: 0; in a CSS media query. By the way I'm not sure why it's in themes.css in the first place. Any feedback welcome :)

Please consider also that in the Theme installer the UI works differently and there's a bit of inconsistency: there's no responsive view and the layout is always a two columns layout. Maybe it should work in the same way as the Customizer?

[westonruter]

@jtsternberg This is closely related to the work you've been doing on the resizer.

[mostafas]

I found the solution , but i dont know how to fix it

when screen width is reach 640px , then add expanded class to main customize div
i mean <div class="wp-full-overlay expanded"></div>
.expanded{
margin-left; 300px;
}

but how to do this _{what css i must edit? i see that css load from load-styles.php file}

I think this bug dont happen for usual users...just happen if a users have a tablet and change orientation of tablet while she/he on previous orientation change customize sidebar to collapsed and now in new orientation it encounter this bug

[westonruter]

@mostafas the CSS can be found in https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/customize-controls.css

[rittesh.patel]

Patch for #35220

[rittesh.patel]

In 35220.diff instead of .wp-full-overlay-sidebar css selector, #customize-controls is used as to increase the element specificity.

[rittesh.patel]

Add missing rtl CSS fix.

[westonruter]

@rittesh.patel FYI: the RTL CSS is automatically generated as part of the build, along with the minified CSS.

[rittesh.patel]

Oh, didn't know that, it must have been added recently. Thanks @westonruter for pointing out. If that's the case we can ignore 35220.2.diff and consider 35220.diff.

[westonruter]

Please review.

[danlouw]

Hi @rittesh.patel and @afercia ,

I had a look at this as well and as far as I could tell the patch fixes the issue from a functional point of view, but I was wondering about what the intended behaviour should be.

If the Customizer sidebar was collapsed in the two-column layout (width of more than 640px), should the sidebar not remain out of view when the layout converts to one-column when re-sizing to 640px or less?

In other words the page preview should be displayed and “Customize” UI control should appear, instead of the Customiser sidebar re-appearing to fill the whole one-column layout, shouldn’t it?

[rittesh.patel]

Hi @danlouw

I think your point makes sense and the behavior would be to show the Customizer in Preview mode and let the sidebar remain collapsed. If user clicks on Customize (width is 640px or less) than Customize sidebar will be shown and if layout is re-sized and width is greater than 640px then we can consider the sidebar to be expanded.

[afercia]

@danlouw @rittesh.patel yeah, "keeping the current state" when switching to the responsive view and vice-versa would make sense. I think it can't be done with CSS only though and would require some more investigation. At this point of the release (we're in Beta 2) I'd propose to go for a simple fix and improve in future iterations.

@westonruter refreshed the patch just to rebuild it from the root and added a comment. Looks good to me.

[afercia]

Side note: wondering if we should move this rule to customize-controls.css (also there's already a media query at 640px there).

[westonruter]

Replying to afercia:

Side note: wondering if we should move this rule to customize-controls.css (also there's already a media query at 640px there).

Makes sense to me. Would you like to make the change?

[afercia]

Replying to westonruter:

Makes sense to me. Would you like to make the change?

There you go :) See 35220.4.diff​

Thinking at the idea about "keeping the current state", maybe when under 640px the .collapsed view (screenshot on the left) should be the same as the .preview-only view (screenshot on the right). They're not exactly the same thing though, see the top toolbar. Maybe something worth considering for the next release cycle?

[westonruter]

@afercia looks good. I think you should commit. @mostafas if you could confirm that the patch fixes the issue as you experienced it as well, that would be great.

[afercia]

In 36877:

Customizer: Improve the collapsed view when switching to the responsive view.

Props rittesh.patel, afercia.

Fixes #35220.