Currently the overlay will not render under a screen size of 640px. Using a hard-coded pixel value was necessary when the issue of the overlay rendering poorly on small screens was addressed: #1260800: Kill the overlay for widths below 640 pixels

Since #1260800 was committed, we've seen breakpoint management committed to core #1734642: Move breakpoint module into core as well as support for media query detection in the client #1815602: Introduce a polyfill for matchMedia.

We can now vary the presence, behavior and styling of the overlay based on configurable breakpoints rather than hard-coded viewport width values into JavaScript.

This issue enables #1827330: Fix overlay placement which is broken in the current D8 ToolBar patch.

Dependencies

#1847084: Measure/track displacing elements better + provide change events for them (fix overlay + toolbar)

CommentFileSizeAuthor
#13 responsive-overlay-1829236-12.patch12.68 KBjessebeach
#1 1829326_overlay-breakpoints_1.patch11.41 KBjessebeach

Comments

jessebeach’s picture

jessebeach commented
Status: Active » Needs review
StatusFileSize
new 1829326_overlay-breakpoints_1.patch11.41 KB

I added breakpoint support to overlay, replacing the hard-coded 640px breakpoint in the JavaScript.

I also added some responsive goodness so that the overlay looks good at smaller screen sizes (even though it won't load at those smaller sizes) for the case that a user reduces their screen width.

The last submitted patch, 1829326_overlay-breakpoints_1.patch, failed testing.

attiks’s picture

attiks commented
Status: Needs work » Needs review

#1: 1829326_overlay-breakpoints_1.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +mobile, +#d8mux

The last submitted patch, 1829326_overlay-breakpoints_1.patch, failed testing.

eigentor’s picture

eigentor commented

Hm this needs some structural rethinking if and how the overlay can work on narrow screens, especially together with the vertical toolbar. It emphasizes even more the efforts to make Seven and all admin forms fit on even very narrow screensizes.

kika’s picture

kika commented

For a reference: #885690: Reverse the overlay implementation (put the parent page in an iframe underneath the administrative page)

shyamala’s picture

shyamala commented
Issue tags: +toolbar-followup

+toolbar-followup

shyamala’s picture

shyamala commented
Issue summary: View changes

Updated issue summary.

shyamala’s picture

shyamala commented
Status: Needs work » Postponed

Need to freeze on #1847084: Measure/track displacing elements better + provide change events for them (fix overlay + toolbar), before working on this.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Issue tags: -#d8mux +d8mux

Issue tags aren't Twitter hashtags. :-)

attiks’s picture

attiks commented
Status: Postponed » Needs review

#1: 1829326_overlay-breakpoints_1.patch queued for re-testing.

rteijeiro’s picture

rteijeiro commented
Status: Needs review » Needs work

Hi.

I have tested the #1 patch but the overlay doesn't load on any screen size. Is there something I have to do before?

Regards.

jessebeach’s picture

jessebeach commented

Rerolled for freshness.

rteijeiro, would you mind testing again? The overlay loads fine for me with this patch.

This proposed change still needs some work below 450px width. Specifically what to do with the tabs.

jessebeach’s picture

jessebeach commented
StatusFileSize
new responsive-overlay-1829236-12.patch12.68 KB

aaaaaaaand the patch.

attiks’s picture

attiks commented
Status: Needs work » Needs review

Looking good, but 

+++ b/core/modules/overlay/overlay-child-rtl.cssundefined
@@ -12,18 +12,20 @@ html {
+@media screen and (min-width: 50em) {

Is the 50em a 'default' in case breakpoint isn't active/defined?

+++ b/core/modules/overlay/overlay-child.cssundefined
@@ -68,17 +67,33 @@
+@media screen and (min-width: 50em) {

dito

nod_’s picture

nod_
Primary language French
Location Lille
commented
Issue tags: -mobile, -d8mux, -toolbar-followup

#13: responsive-overlay-1829236-12.patch queued for re-testing.

Status: Needs review » Needs work

The last submitted patch, responsive-overlay-1829236-12.patch, failed testing.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Adding dependency: http://drupal.org/node/1847084

jessebeach’s picture

jessebeach commented
Issue summary: View changes
jessebeach’s picture

jessebeach commented
Issue summary: View changes
klonos’s picture

klonos
he/him
Primary language English
Location 90% Melbourne, Australia - 10% Larissa, Greece
commented
Related issues: +#1260800: Kill the overlay for widths below 640 pixels, +#1734642: Move breakpoint module into core, +#1815602: Introduce a polyfill for matchMedia, +#1847084: Measure/track displacing elements better + provide change events for them (fix overlay + toolbar)
nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs work » Closed (won't fix)

Overlay is dead to D8 #2088121: Remove Overlay.