Products.cmfplone: modal dialogs are sized incorrectly on mobile devices

[tkimnguyen]

On iPhone 6 Plus and 5S (at least), the following modal dialogs are wider than the screen:

• [ ] login
• [ ] upload files
• [ ] TinyMCE Insert Image

See https://github.com/plone/Products.CMFPlone/issues/762 for screen shots. @plone/ux-team

[agitator]

a problem on smaller screens in general - like smaller notebooks

[envy7]

@tkimnguyen can I work on this?

[tkimnguyen]

@envy7 by all means! thanks :)

[envy7]

I figured out what the problem was at least for the login modal and maybe the same thing applies for the other modals too, I wasn't able to recreate the issue for iphone 6 plus, the issue is arising cause the width is set to 26em with the font size as 14px, the width being 26*14 = 364px but iphone 5,4 have screen widths of 320px, hence the overflow, i tried decreasing it to 20em for them and it looks good

[envy7]

@tkimnguyen how should I move forward with this problem, write media queries for size of devices less than 364px or something else? I looked into the other modals too the same problem is there, the upload files modal had a max-width of 500px set, it has to be reduced.

[tkimnguyen]

nice work @envy7 - perhaps @agitator has thoughts on how to proceed

[VerSooSet]

It the same thing 1217. In my view it solved this way too.

[nikandroff]

Yes, https://github.com/plone/Products.CMFPlone/issues/1217 seems to be the same issue. Is not https://github.com/plone/Products.CMFPlone/issues/1217 a duplicate?

[agitator]

@envy7 please check where to origin of the style attribute is - width as a style attribute probably comes from some javascript

[envy7]

@agitator okay I'll check on it

[envy7]

@agitator I found the function positionModal in plone-compiled.js which assigns the margin, padding, width etc.
modal dialog's width is assigned as self.options.width which in turn in defined as "" initially, and the width of the modal is not calculated anywhere. But in profiles/default/actions.xml I found this

<property name="modal" type="text">{"prependContent": ".portalMessage", "title": "Log in", "width":        "26em", "actionOptions": {"redirectOnResponse": true}}</property>

self.options.width is also assigned to modal content's width.
I think both 'plone-modal-content', 'plone-modal-dialog' are getting assigned width as 26em for all screen sizes.

[envy7]

@tkimnguyen @agitator am I on the right track or is it something else entirely? I have tried changing actions.xml but it dosen't reflect on the page

the width is still set to 26em

[tkimnguyen]

@envy7 I'm not familiar enough to have an opinion, but it's great that you've dug into it so quickly! Maybe you can make a pull request – having something to look at may get others' attention more quickly.

[agitator]

@envy7 maybe it's best if you add max-width-styles for the standard overlays in https://github.com/plone/plonetheme.barceloneta/blob/master/plonetheme/barceloneta/theme/less/modal.plone.less based on @plone-grid-float-breakpoint variable

@RobZoneNet @plone/usability-team opinions?

[davilima6]

@agitator, I think this is a good strategy: mediaquery using the LESS variable breakpoint.

@envy7, notice you have to edit the source file and then generate plone-compiled.js by running the grunt script in ./bin/plone-compile-resources (see: https://docs.plone.org/adapt-and-extend/theming/resourceregistry.html#compiling-bundles)

Disclaimer: I didn't dig into the relationship with profiles/default/actions.xml, nor how the JS reads from there. But it looks like it might be hard to use a media query if you're constrained to that hardcoded value so I'd try dropping it from the XML and defining global desktop&mobile styles in LESS only. Not sure if pat-plone-modal would be fine with that. If not, you could leave the desktop size there and make only the media query for mobile in LESS. Here's its definition: https://github.com/plone/mockup/blob/master/mockup/patterns/modal/pattern.js

[envy7]

@agitator @tkimnguyen @davilima6 While using the resourceregistry-controlpanel I came across another modal sized incorrectly on mobile devices, I added media queries in https://github.com/plone/plonetheme.barceloneta/blob/master/plonetheme/barceloneta/theme/less/modal.plone.less using @plone-grid-float-breakpoint variable and fixed it, but it dosen't seem to fix the login modal size, and for upload files and TinyMCE insert image I need to make changes in the https://github.com/plone/mockup/tree/master/mockup/patterns right? cause I can't find anything in plonetheme.barceloneta in relation to them

incorrect:

correct:

[tkimnguyen]

lol maybe this bug shouldn't have been tagged "easy" ... sorry @envy7 I can't really help you