Broken layout

[DavidOliver]

In Symphony 2.7.x branch in both Firefox and Chromium.

[nitriques]

Hum, you are the one who proposed to break it ! 0f72a2ca732d6c56a0e49e4f3ef146e65310696c haha

Jokes aside, how would you fix it ? with a <br /> ?

[nilshoerrmann]

Why don't you add the help text in an additional row right after the label (using a classic line-break)?

[DavidOliver]

Ah :)

I don't think having the info aligned to the right works very well in general for these checkboxes, even when the info text is much shorter.

Make it left-aligned and under the main label text, as I think Nils is suggesting?

Also, the labels aren't vertically aligned with the checkboxes in my Firefox.

[nitriques]

Also, the labels aren't vertically aligned with the checkboxes in my Firefox.

Damn floats :p

add the help text in an additional row right after the label

Sold! Thanks guys!

[nitriques]

Adding a simple line-break in the i worked for screens > 950. I can live with that!

[nitriques]

Are alignement problems fixed @DavidOliver ?

[DavidOliver]

Technically, yes, though as mentioned the warning being aligned right doesn't work well here; it appears to relate to the 'Add recipe' UI when the viewport is reasonably wide.

Ideas:

• move warning below the main label text
• use an info icon with a title (browser hover/"tooltip" text) - rough mockup:

Perhaps it's not the usual Symphony way to hide information like this. On the other hand, this necessarily lengthy warning only really needs to be seen once by a developer, not every time they visit the Preferences.

[nilshoerrmann]

I'm not sure if you misread my idea, but I was thinking about something like this:

[nitriques]

I'm not sure if you misread my idea

I totally did. That's better!

[nitriques]

434f7be is the closest I can get without creating new css classes or using inline styles. The only difference with @nilshoerrmann's proposal is the fact that the warning label's text is not aligned with the checkbox label's text.

Are we ok with it ?

[nitriques]

BTW, the screen shot has selected text, (backend), sorry about that.

[DavidOliver]

I'm still of the opinion that we don't need to show this all the time in the Preferences page. (See my (i) idea above.) But if it's included in full then I think your new version is a lot better than the right-aligned version. :)

[nitriques]

Great. Thanks. @nilshoerrmann any comments ?

[nilshoerrmann]

434f7be is the closest I can get without creating new css classes or using inline styles.

From a designer's perspective, these two lines should be aligned properly – using CSS classes of course :)

I'm still of the opinion that we don't need to show this all the time in the Preferences page. (See my (i) idea above.)

I'm not sure if this changed in the meantime, but in the past Symphony never hid this kind of content. So a tooltip-like layout sounds counter-intuitive in the context of the Symphony 2 design system. I'm not saying that this shouldn't be changed, but if it was to be changed, this features should be introduced consitently across the system. And I actually don't see a need for this.

[nitriques]

:) That's how you can tell I am no designer! I'll see what I can do. If I add this class in the core or not. Thanks!

[nitriques]

@nilshoerrmann I am having troubles aligning this: the checkbox is width auto, which makes it non-deterministic.

Also, I really wonder how we never got this problem before.

In vlad's multilingual extension, he simply used a p to create space between the warning and checkbox. But the text is align with the container, not the checkbox's label...

Any ideas ?

[nilshoerrmann]

If this gets too complicated, change the markup as follows:

<label><input name="settings[image][disable_regular_rules]" value="yes" type="checkbox"> Disable dynamic URLs and use named recipes only</label>
<p class="help">Warning: this includes backend image previews using dynamic URLs. Consider making a named recipe for backend image previews.</p>

This will properly set the paddings and margins, only the indentation will be missing. It's not the best structural solution (it breaks the list character of the checkboxes) but it would at least be consistent with the other help texts of this settings group (see the Leave empty to …).

It's not up to this extension to fix Symphony's layout weakness.

[nitriques]

This is exactly what we already have in the multilingual extensions. I am ok with it. Thanks Nils.

[nitriques]

@nilshoerrmann what about changing the order of the checkboxes to put disable dynamic last in the list ?

[nitriques]

[nilshoerrmann]

Looking good 👍

[nitriques]

Great!

[nitriques]

31ac2c6 implements the code need to get the screenshot.