Make the old modal system responsive and always centered without JS #23693
Conversation
| // doesn't center the modal.g | ||
| var self = this; | ||
|
|
||
| // doesn't center the modal. |
| // sometimes the modal can be displayed outside of the current viewport, in this case | ||
| // we scroll to it to make sure it's visible. this isn't a perfect workaround, since it | ||
| // doesn't center the modal.g | ||
| var self = this; |
There was a problem hiding this comment.
ℹ️ Variable not used. That was already he case before my development.
| var centerPopover = function () { | ||
| if (container !== false) { | ||
| $('.ui-dialog').css({margin: '0 0'}); | ||
| container.dialog("option", "position", {my: 'center', at: 'center', of: '.ui-widget-overlay', collision: 'fit'}); | ||
| // in some cases jQuery UI fails to place the dialog correctly and set the top values to something negative | ||
| if ($('.ui-dialog').position().top < 0) { | ||
| $('.ui-dialog').css('top', '0'); | ||
| } | ||
| $('.ui-dialog').css({margin: '15px 0'}); | ||
| } | ||
| }; |
There was a problem hiding this comment.
ℹ️ I was able to keep a perfect centering in pure CSS, so I removed this calculation. Since the width/height measurement is blocking the browser, it is a performance gain.
|
|
||
| @media (max-width: 600px) { | ||
| padding: 15px; | ||
| } |
There was a problem hiding this comment.
ℹ️ Remove the left padding that was here to display the icon. Make it smaller in the same time
| display: block; | ||
| margin-bottom: 0.5em; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
ℹ️ Make the icon on top instead on the left of the message on mobile. It will take less space.
| @media (max-width: 600px) { | ||
| position: static; | ||
| display: block; | ||
| } |
There was a problem hiding this comment.
ℹ️ Avoid stacking the link on top of the content.
| before | after |
|---|---|
 |
 |
tzi
added
Needs Review
| z-index: 1001; | ||
| inset: 15px !important; | ||
| margin: auto; | ||
| width: min-content; |
There was a problem hiding this comment.
ℹ️ Tag Manager modals do not have explicit width defined with style attribute.
So we are setting a default width here, to keep a small modal in these cases.
tzi
force-pushed
the
ux-287
branch
2 times, most recently
from
cfeda93 to
e463739
Compare
tzi
force-pushed
the
ux-287
branch
9 times, most recently
from
937cb7b to
6f2ed13
Compare
tzi
added
Pull Request WIP
tzi
force-pushed
the
ux-287
branch
3 times, most recently
from
6009781 to
467cc66
Compare
| width: calc(80%); | ||
| left: calc(10%) !important; | ||
| height: auto; |
There was a problem hiding this comment.
ℹ️ Overriding this breaks the automatic centering.
| width: calc(80%); | ||
| left: calc(10%) !important; | ||
| height: auto; | ||
| background: #fafafa; |
There was a problem hiding this comment.
ℹ️ Replace this with a color from the theme
| if (!$('#Piwik_Popover_Wrapper').length) { | ||
| $(document.createElement('div')).attr('id', 'Piwik_Popover_Wrapper').appendTo('body'); | ||
| } | ||
| }); |
There was a problem hiding this comment.
ℹ️ To center the modals AND to be sure there is no content off-screen, we need a wrapper. This wrapper is added to the document root if it is not already here.
tzi
force-pushed
the
ux-287
branch
2 times, most recently
from
50aeafc to
94ee552
Compare
tzi
added
Needs Review
Description:
The old modal design had 2 big responsive design:
Plugin/Submodule update
1 PR is open in plugin/submodule to update UI screenshots:
Visits log | desktop
ℹ️ Better vertical centering, and more intuitive scroll
Visits log | mobile
ℹ️ No content outside of the screen.
Performance | desktop
ℹ️ Better vertical centering.
Performance | mobile
ℹ️ Vertical centering always up to date
Row evolution | desktop
ℹ️ No hidden content.
Row evolution | mobile
ℹ️ Vertical centering always up to date
Review