Navis Slideshow expand-on-click styles, again. #1695

benlk · 2019-04-25T03:03:15Z

Changes

Implements Navis Slideshow JS is broken from recent changes in Gutenberg; styles are misapplied #1664 (comment):
- makes sure Gutenberg image captions don't display in Navis slideshows
- makes sure global nav falls under the Navis image presentation
- fixes alignment for images
hides sticky nav when opening Navis slideshow
update changelog for this
bumps Largo version number to 0.6.3-pre

Testing to be completed pre-merge:

on MST: works locally; staging experienced a deploy problem with git push and we're talking with the host.
on C
fullwidth block
align left/right/center/none block
gallery block?
Classic Editor slideshow gallery shortcode
Featured Gallery in Largo

…hows in image blocks Implements #1664 (comment)

benlk · 2019-04-25T16:25:34Z

Bug that appeared in testing: An image in a block that's aligned full will revert to single-column width when the gallery closes.

Before:

<figure class="wp-block-image alignfull"><img src="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg" alt="Two genders do the bopping" class="wp-image-129823" srcset="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg 1170w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-336x224.jpg 336w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-768x512.jpg 768w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-771x514.jpg 771w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h.jpg 1600w" sizes="(max-width: 1170px) 100vw, 1170px"><figcaption>This is a full-width image. It should be preceded by a single paragraph tag.</figcaption></figure>

Upon click:

<figure class="wp-block-image alignfull navis-slideshow navis-single navis-full" style="max-width: 100%;"><span class="navis-before">X</span><img src="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg" alt="Two genders do the bopping" class="wp-image-129823" srcset="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg 1170w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-336x224.jpg 336w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-768x512.jpg 768w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-771x514.jpg 771w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h.jpg 1600w"><figcaption>This is a full-width image. It should be preceded by a single paragraph tag.</figcaption></figure>

After closing:

<figure class="wp-block-image alignfull" style="max-width: 100%;"><img src="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg" alt="Two genders do the bopping" class="wp-image-129823" srcset="http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-1170x780.jpg 1170w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-336x224.jpg 336w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-768x512.jpg 768w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h-771x514.jpg 771w, http://mstoday.test/wp-content/uploads/2018/02/24496652921_1108fff3b7_h.jpg 1600w" sizes="(max-width: 1170px) 100vw, 1170px"><figcaption>This is a full-width image. It should be preceded by a single paragraph tag.</figcaption></figure>

This appears to be because style="max-width: 100%;" is added to the gallery parent in the initial click:

https://github.com/INN/largo/blob/c487ba7b2ec3b455cc519f4f85421c3dcc310bf0/lib/navis-slideshows/js/navis-slideshows.js#L231-L240

But I'm not sure why the gallery.attr call in the close handler isn't removing the style attribute:

https://github.com/INN/largo/blob/c487ba7b2ec3b455cc519f4f85421c3dcc310bf0/lib/navis-slideshows/js/navis-slideshows.js#L145-L155

benlk · 2019-04-25T16:31:49Z

The attrs argument passed in this case are:

 ["(max-width: 1170px) 100vw, 1170px", undefined, undefined, undefined]

which based on the docs in https://api.jquery.com/attr/#attr2, appears to be undefined behavior when undefined is passed as the value for .attr( attributeName, value ).

if typeof value === 'undefined': value = null;

Resolves #1695 (comment)

benlk · 2019-04-25T17:01:09Z

@joshdarby this is ready for review

benlk · 2019-04-25T17:16:34Z

Are we worried that the user can scroll the page when the popup is open, and can thereby trigger the sticky nav to appear, covering the slideshow's close button?

joshdarby · 2019-04-25T17:23:57Z

Are we worried that the user can scroll the page when the popup is open, and can thereby trigger the sticky nav to appear, covering the slideshow's close button?

@benlk I'd think we'd probably want to disable scrolling when the popup is triggered. That might also help with our other issues of overlapping menus and whatnot.

benlk · 2019-04-25T17:37:18Z

Also, with a Gallery block, the image is cropped:

… Gallery blocks not having correct zoom of images

benlk · 2019-04-25T17:54:48Z

Current to-do list:

stop scroll when the modal is open from an image block
stop scroll when the modal is open from a gallery block
stop scroll when the modal is open from post featured gallery
prevent overzoom of images when modal is open from a gallery block

…vis slideshow

benlk · 2019-04-25T18:03:01Z

Gallery Block has margin-left:

CSS fix for this

joshdarby · 2019-04-25T18:21:41Z

@benlk One more issue with this that I noticed is that if you have an image expanded and start to resize the window, the sticky nav pops up again. Maybe we should add a check to it to not display if any figure has the .navis-full class.

benlk · 2019-04-25T18:24:16Z

Or we should change the hide/show functions in this JS to hide a parent of the sticky nav element that's currently being shown/hidden.

benlk · 2019-04-25T18:28:02Z

Regarding the gallery image cropping, this isn't a JS fix; it's a CSS fix for this monstrosity of a default style:

.wp-block-gallery.is-cropped .blocks-gallery-image a,
.wp-block-gallery.is-cropped .blocks-gallery-image img,
.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img {
    height: 100%;
    flex: 1;
    -o-object-fit: cover;
    object-fit: cover;
}

The 100% height I'm not sure we should change, but looking at object-fit we could use object-fit: scale-down; so that small images aren't blown up and large images don't overflow.

object-fit doesn't work in IE though, which is probably why the 100% height.

joshdarby · 2019-04-25T18:37:58Z

@benlk One more: On the sandbox, whenever I click to expand an image inside the Full Width Gallery Block, I just get a white screen with no exit button.

benlk · 2019-04-25T18:39:14Z

a white screen with no exit button.

Is that from clicking on one of the light-grey images?

If it is, and if this is a contrast issue, should we do something to make sure that this X is more visible?

#1695 (comment)

benlk · 2019-04-25T18:42:25Z

Nope, this is not just a contrast issue.

image in full width gallery block,
"at if you have an image expanded and start to resize the window, the sticky nav pops up again. " change the show/hide element on the sticky nav

joshdarby · 2019-04-25T18:42:25Z

Is that from clicking on one of the light-grey images?

If it is, and if this is a contrast issue, should we do something to make sure that this X is more visible?

@benlk Yes, I did click on one of the light gray images but I don't believe it's a contrast issue. If you click on one of the light gray images above in the Three Column, Four Images block, you're still able to see the exit button.

I also tried replacing one of the images with a darker image and it still showed a white screen with no exit.

…sizing window Fixes #1695 (comment)

benlk · 2019-04-25T18:53:51Z

Wit that white-page error, there are clearly elements on the page:

They're just ... not showing up?

joshdarby · 2019-04-25T18:58:13Z

@benlk I think it's the transform attribute on the .alignfull class on the parent wp-block-gallery messing with it. Removing that attribute will make the image appear.

benlk · 2019-04-25T19:06:47Z

The transform problem here is another instance of #1685, which means that we need a general solution for this. Which should be doable.

…for light images that nearly match the window aspect ratio

…that are aligned full

benlk · 2019-04-25T19:15:59Z

Hmm, the change in 4ddfab0 doesn't seem to have taken when I deployed that to staging.

cachebusters ahoy!

…s for various slides and Gutenberg assets

benlk · 2019-04-25T20:07:38Z

Note: When pushing LESS changes, remember to go to Dashboard > Appearance > CSS Variables and click "Save Variables".

benlk · 2019-04-25T21:10:54Z

A thing that may help to understand code flow in the slideshow js:

https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbmllb1tpbWcuZWFjaCBvbmNsaWNrXVxuaXNfdXNlcl9sb2dnZWRfaW5cbm1heWJlSGlkZVN0aWNreU5hdlxubWF5YmVTaG93U3RpY2t5TmF2XG5ib2R5U3RvcFNjcm9sbFxuYm9keVN0YXJ0U2Nyb2xsXG5jcmVhdGVTbGlkZXJcbmNyZWF0ZVNsaWRlci0tPmV4cGFuZFNsaWRlclxuY3JlYXRlR2FsbGVyeS0tPmNyZWF0ZVNsaWRlclxuY3JlYXRlR2FsbGVyeS0tPmFkZENsb3NlWFxuYWRkQ2xvc2VYLS0-Y2xvc2VGdWxsXG5leHBhbmRTbGlkZXItLT5tYXliZUhpZGVTdGlja3lOYXZcbmV4cGFuZFNsaWRlci0tPmJvZHlTdG9wU2Nyb2xsXG5leHBhbmRTbGlkZXItLT5hZGRDbG9zZVhcbmNsb3NlU2luZ2xlLS0-bWF5YmVTaG93U3RpY2t5TmF2XG5jbG9zZVNpbmdsZS0tPmJvZHlTdGFydFNjcm9sbFxuY2xvc2VGdWxsLS0-Y3JlYXRlU2xpZGVyXG5jbG9zZUZ1bGwtLT5hZGRDbG9zZVhcbmNsb3NlRnVsbC0tPmNsb3NlU2luZ2xlXG5cbmVzY2FwZXtkb2N1bWVudC5rZXl1cCBlc2NhcGV9XG5lc2NhcGUtLT58aWZ8aXNfdXNlcl9sb2dnZWRfaW5cbmVzY2FwZS0tPmNsb3NlRnVsbFxuXG5kb2N1bWVudC5yZWFkeXtkb2N1bWVudC5yZWFkeX0tLT5pbWcuZWFjaFxuaW1nLmVhY2gtLT58aWZ8aXNfdXNlcl9sb2dnZWRfaW5cbmltZy5lYWNoLS0-bWF5YmVIaWRlU3RpY2t5TmF2XG5pbWcuZWFjaC0tPmJvZHlTdG9wU2Nyb2xsXG5pbWcuZWFjaC0tPnxpZiB1bmxpbmtlZCBpbWFnZXxpZW9cbmllby0tPm1heWJlU2hvd1N0aWNreU5hdlxuaWVvLS0-Y2xvc2VTaW5nbGVcblxuZG9jdW1lbnQucmVhZHktLT4ubmF2aXMtc2xpZGVzaG93LmVhY2hcbi5uYXZpcy1zbGlkZXNob3cuZWFjaC0tPnxoYXNDbGFzcyBub25lLXVwfHNsaWRlc2hvd1xuc2xpZGVzaG93LS0-Y3JlYXRlU2xpZGVyXG4ubmF2aXMtc2xpZGVzaG93LmVhY2gtLT58ISBoYXNDbGFzcyBub25lLXVwfGdyaWRcbmdyaWQtLT5jcmVhdGVHYWxsZXJ5IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0

Be better at alignment/transforms/positioning/display on navis slides…

9131ad8

…hows in image blocks Implements #1664 (comment)

benlk added type: bug status: in progress category: styles affects lots of styles, requiring visual testing category: gutenberg Relating to general Gutenberg compatibility labels Apr 25, 2019

benlk added this to the 0.6.3 milestone Apr 25, 2019

benlk requested a review from joshdarby April 25, 2019 03:03

benlk self-assigned this Apr 25, 2019

benlk added 2 commits April 25, 2019 12:11

Use JS to maybe hide/show the sticky nav when opening a slideshow

6fdf6f9

Use Largo show/hide classes for showing/hiding sticky nav

c487ba7

benlk added 3 commits April 25, 2019 12:34

Fix for style/height/width not being unset by closing a gallery

464594e

Resolves #1695 (comment)

Update changelog for Largo 0.6.3 and #1695

064231f

Bump largo version number to 0.6.3-pre

3405967

Disable scroll when an image-based slideshow opens. Attempt a fix for…

a7f9bdc

… Gallery blocks not having correct zoom of images

Hide sticky nav and stop scroll from a post featured media gallery Na…

cc06e1e

…vis slideshow

Cleanup in navis slideshow JS

2b78fb3

CSS fix for cropping of images in gallery block in navis slideshow

4ddfab0

#1695 (comment)

Fix for sticky nav reappearing while Navis slideshow is open, when re…

3a17456

…sizing window Fixes #1695 (comment)

benlk added 2 commits April 25, 2019 15:07

Add text shadow to the Navis slide-close 'X' to make it more visible …

8e2ba73

…for light images that nearly match the window aspect ratio

Expand upon #1685 to solve slidehsow transform problem in all blocks …

271b091

…that are aligned full

benlk added 2 commits April 25, 2019 15:56

A few more filemtime cachebusters, for faster reader-side cachebuster…

0895f40

…s for various slides and Gutenberg assets

Fix a comma that's a problem in some versions of PHP but not others

496663c

Fix minor typo in gallery block styles.

8e70ad1

benlk merged commit c41e28e into 0.5-dev Apr 25, 2019

benlk deleted the 1664-navis-post-1675 branch April 25, 2019 21:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navis Slideshow expand-on-click styles, again. #1695

Navis Slideshow expand-on-click styles, again. #1695

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019

Navis Slideshow expand-on-click styles, again. #1695

Navis Slideshow expand-on-click styles, again. #1695

Conversation

benlk commented Apr 25, 2019 • edited Loading

Changes

benlk commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019

joshdarby commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019 • edited Loading

joshdarby commented Apr 25, 2019

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 • edited Loading

joshdarby commented Apr 25, 2019

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 • edited Loading

joshdarby commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019 • edited Loading

joshdarby commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 • edited Loading

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading

joshdarby commented Apr 25, 2019 •

edited

Loading

benlk commented Apr 25, 2019 •

edited

Loading