Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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?
Comment | File | Size | Author |
---|---|---|---|
#10 | dialog-width-responsive-1918744-10.patch | 3.51 KB | dealancer |
#9 | dialog-width-responsive-1918744-9.patch | 0 bytes | dealancer |
#5 | dialog-width-responsive-1918744-5.patch | 2.77 KB | dealancer |
Comments
Comment #1
effulgentsia CreditAttribution: effulgentsia commentedand another tag
Comment #2
quicksketchI'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.
Comment #3
quicksketchComment #4
dealancer CreditAttribution: dealancer commentedRight 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.
Comment #5
dealancer CreditAttribution: dealancer commentedOk, 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.
Usage examples:
Comment #6
dealancer CreditAttribution: dealancer commentedComment #8
rteijeiro CreditAttribution: rteijeiro commented#5: dialog-width-responsive-1918744-5.patch queued for re-testing.
Comment #9
dealancer CreditAttribution: dealancer commentedOk, looks like we need to fix a test.
Here is re-rolled patch!
Comment #10
dealancer CreditAttribution: dealancer commentedLast one was empty.
This patch contains updated test.
Comment #11
oresh CreditAttribution: oresh commentedEverything looks ok,
Can you please just change px to % ?
Comment #12
effulgentsia CreditAttribution: effulgentsia commentedI'm not a front-end developer, so don't have an opinion on #11, but otherwise, I think #10 looks good. I'm curious what @quicksketch thinks though, given #2.
Comment #13
dealancer CreditAttribution: dealancer commentedRe #11, also can't find use cases when we need this option.
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.
Comment #14
valdo CreditAttribution: valdo commentedThe patch does not apply to me. When trying to apply I get these errors:
Looks as in the meantime filesystem as changed,
core/modules/config/config.admin.inc
doesn't exist anymore.Comment #15
LewisNyman CreditAttribution: LewisNyman commentedI think we should be writing the widths in percentages, all our core CSS is.
Looking at the initial problem, it seems that we only need one fluid size in order to make it mobile friendly. Why are we adding different sizes?
Comment #16
quicksketchFYI in Editor module we just used CSS ultimately:
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).
So I think this is a won't fix. Just use CSS to set dialog widths.
Comment #16.0
quicksketch.