Installation UI: Aligns header block, matches h1 colour.

[vingle]

Overview

The header on the installation screen used in Standalone, WordPress and others uses % positioning which creates variable alignment. This swaps to Flexbox to create consistent positioning, and a responsive fall back for small screens.

Before

Desktop:

Tablet:

Mobile:

After

Technical Details

The animation on the title text is adjusted to accommodate this (it's a smaller slide in from the other direction), with the h1 colour matching the rest of the text.

Comments

I did my best to avoid changing any other css / design, beyond removing the horizontal rule and changing 'font-family: Arial, sans-serif' to 'font-family: sans-serif' to give neater OS integration. @JGaunt – I really don't want to step on your work here, so please feel free to push back!

[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 🔗

[ufundo]

Thanks @vingle . Looking forward to doing more installs from my mobile 😁

Just dropping a Standalone ticket which hopefully fixed by this change https://lab.civicrm.org/dev/core/-/issues/5074

[vingle]

Looking forward to doing more installs from my mobile

It's so much fun. iOS is the perfect development OS.

Just dropping a Standalone ticket which hopefully fixed by this change

Yes it should definitely fix that. Not that I have a > 2000px screen to check (as I'm doing all my css work on my phone obvs)

[ufundo]

Can confirm this fixes title overlap on Standalone when I plug my phone into my 1024K HDTV (and on my 2256 x 1502 px laptop screen)

[ufundo]

Pre-install = all good

Standalone
(as above)

D7

WP

Post install

Standalone good

WP seems to redirect straight to dashboard after install, so no confirmation page? So trivially good

D7 is a bit unstyled - though as far as I can see that's the same/before after this PR
before

after

(part of this is it's using old font-awesome url so you don't have the tick)

D10 UI installer doesn't seem to use these screens. Didn't try Joomla

(For the above I:

• created a clean site using buildkit
• uninstalled the civicrm module for CMS (deleted civicrm.settings.php for Standalone)
• then reinstalled through UI (visited the main page for standalone

[ufundo]

Looks good to merge to me, but will hold off a bit in case @JGaunt has any comments.

[mattwire]

@vingle needs rebase

[vingle]

@mattwire done.