Message not styled properly on interface translation page

I reviewed the patch and made a couple of changes:

• Removed the "localetranslate-changed-warning" class because nothing is styled using this class.
• Found some missing margin settings in the different modifiers of the .message class in system.theme.css so added that.
• Added a .console class because according to our CSS coding standards we should avoid using ID selectors as styling hooks. So I suppose that will be changed to a class in Seven (should be an other issue) and I did not want this message break again when this change happens.

@csakiistvan you are right, thanks for pointing this out!

I checked up the #console question and it seems that it may be removed (see #2017257-50: Create generic layout classes) but I did not find any relavant work yet.

Updating issue summary with embedded screenshot for easier review.

I tested the patch manually and it works well. I'm not 100% sure its the best idea to add a console here, for example, if you already have strings saved from this screen, you have a id="console" on the page above the form, now you change something, you have two elements with id="console". Looks like all that console does is it adds some margins so the message will not run into the form table (in this case). The same margins may be applied without the risk of duplicating the console / message container. I'll ask a few frontend people to take a look.

What tabledrag does for example is the following:

    tableDragChangedWarning: function () {
      return '<div class="tabledrag-changed-warning messages messages--warning" role="alert">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t('You have unsaved changes.') + '</div>';
    }

The tabledrag-changed-warning class has a bottom margin set. That sounds more compatible with an existing #console on the page compared to adding a #console in the markup. Also less markup :)

Adding a class for setting margins seems to be a better way to me too. (We can add back the class I removed and than add that selector in the CSS near to the table-drag's… :) )

Using the "role=alert" is also a good practice in the table-drag example, that should be added too!

See also: #2321121: Remove #console

The tabledrag class is system level, the locale class will be in locale's CSS I guess.

You're right I think because locale is not necessary switched on. Then we have to add a locale.admin.theme.css file.

So sounds like we should fix #2321121: Remove #console first and then come back here?

So we postponed this on #2321121: Remove #console but that was marked as dupilcate of #2213583: Misaligned Icons in Drupal 8.x. THAT one finally landed, so unpostponing this one. Looking forward to updates to this one so we can get it in :)

Looks great to me. Thanks!

Committed/pushed to 8.0.x, thanks!