Rid us of id crm-container

[artfulrobot]

Replacement for #27805

These commits focus on what should be non-changing changes to CSS, tpls and JS.

Note that this PR does not remove id="crm-container" from templates, but where it was found, it does ensure that there's a crm-container class as well. This should mean that all CSS/JS still works.

There's more to do, but I stopped here to see if there's much interest. Some of the remaining bits make the assumption that #crm-container is a single element, which it should be, however .crm-container I have a feeling may be found nested, on occasion. I could be wrong, but I'm sure I've seen that somewhere. This gives problems for Jquery based code that does things like $('.crm-container').append(somethingWeNeedOnlyOneOf) since then it might append 2+ - e.g. the menu.

We could solve that by

• using another class name like .crm-main-page-container. Or a similarly named ID.
• identifying some other way to target "the first .crm-container you find in the document" - I don't think CSS has a way to do that at time of writing. The first way is better.

As a reminder of why all this needs to change: too much CSS relied on the #crm-container class when a .crm-container would have done, leading to increased specificity which in turn is harder to override in themes. Also, a mix of rules for no reason. Also, the div#crm-container element does not always contain all the HTML generated by Civi - e.g. jQuery modals etc - which led to theming woes.

@vingle

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[colemanw]

@artfulrobot .crm-container can be found multiple times on the page:

1. On the main #crm-container content area
2. On popup dialogs (to ensure their contents inherit crm styling)
3. On drupal blocks on the sidebar (for the same reason)

So IMO it's useful to keep the id=crm-container on the main content area for exactly the reason you described: sometimes you need to target it specifically and not the other sidebar-ish stuff.

[artfulrobot]

So IMO it's useful to keep the id=crm-container on the main content area for exactly the reason you described: sometimes you need to target it specifically and not the other sidebar-ish stuff.

I agree with both the needs: (a) something to apply CRM styles within, (b) something to locate the specific, main page container.

I just disagree that this should be the same token "crm-container". Because it's confusing and leads to devs inc themers not knowing which to use. In a project that wants to encourage lots of input, we need this clarity.

I suppose "class=crm-styling", id="crm-page-container" or such might be two useful names. Changing all those crm-container classes is hard and of course extensions/themes will also be affected. So let's leave class=crm-container alone. id=crm-container should be much easier to change, for the benefits outlined above.