You are here

Define some dialog CSS classes for common dialog sizes

In #1821548: Add a "diff" of some kind to the CMI UI, we're opening a dialog with a hard-coded width of 700px. That's not very mobile friendly. Instead of doing that, let's define some dialog classes (e.g., small, medium, large) and figure out good CSS for them. Any volunteers?

I'm not sure this should happen. Instead each modal should be given a specific class and all the sizing should be done via CSS (and media queries within that CSS). #1851414: Convert Views to use the abstracted dialog modal introduces a dialog.theme.css file, I think it would make sense to simply specify a default width in there and try to avoid any manual setting of width at all.

Right now default width is 300px set by jQueryUI. However it would be nice to have different default widths for different screen widths/devices (e.g. mobile, desktop). This should be done using @media in css.

Ok, so here are couple of concerns when passing width directly into dialog:

A. It is hard to adopt such dialog to the smaller screen.
B. Dialog is not centered when screen is resized.

So I almost agree with @effulgentsia re introducing classes, but I also like idea of @quicksketch to use default width and be able to override it. Also I want to make dialog responsive. Here is a patch that can do all of this.

We would rather have strictly defined width so the appearance of dialog box is predictable. When it starches to much the content can "swim" to the borders of the monitor. Using media queries we can easily control width of the dialog box for smaller device.

We would like to have more reviews and opinions. So I am settings status back to needs review, otherwise this ticket can be ignored.

The unfortunate thing however is that jQuery UI loads FIRST on pages where Edit module is present, since it depends on jQuery UI at page load time and editor.css is loaded on-the-fly after the page load. So we ended up with !important in there until we fix that issue or (better yet) just stop loading the default CSS for jQuery UI (which we override everywhere anyway already).