UHF-11181: Toggleable header element improvements

[teroelonen]

UHF-11181

What was done

• Search form drop down functionality was made smoother. Especially on Safari that was quite buggy.
• Changed the background hiding functionality to hide the content AFTER the toggleable element has covered the visible area to reduce blinking on mobile screen sizes.
• Updated css-declaration-sorter.
• Changed other languages drop down to use same shade of gray as the rest of the site.
• Fixed issue where the language navigation would disappear on "tablet" sizes when opening the main navigation. This was visible in instances that are NOT using global menu.
• Fixed profile menu double borders on mobile sizes.
• Fixed issue with Profile menu preventing users to click on items on the same height as the menu was open.

How to install

• Make sure your instance is up and running on latest dev branch. I recommend testing this with one core instance. There is a separate PR in Avustukset and there you can check the issues that are fixed on the profile menu.
  • git pull origin dev
  • make fresh
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-11181
• Run make drush-cr

How to test

• Open the front page or any other page for that matter in Safari.
• Check that in Safari the Other languages, Search and Menu elements open smoothly in desktop/tablet/mobile sizes. The content should scroll down nicely, there shouldn't be any white content flashing on the background when opening the elements and all the content should appear to slide down from behind the header and NOT appear all of sudden. The menu might take a few seconds and have the spinner visible but this is ok.
• Next test the same thing with Chrome. It should be just as smooth.
• Next test the same thing with Edge if you have it. Same thing - should be nice and smooth.
• Next test the same thing with Firefox. Firefox doesn't support transition-behavior: allow-discrete; yet so the white background will flash 0.3 seconds before the animation has time to cover the whole area.
• Check that the other languages drop down background color is now #f2f2f2 on all screen sizes.
• Check that code follows our standards.

Continuous documentation

• This feature has been documented/the documentation has been updated
• This change doesn't require updates to the documentation

Other PRs

• UHF-11181: Toggleable header element improvements hel-fi-drupal-grants#1691
• UHF-11181: Toggleable header element improvements #1219

[github-actions]

✅ Tests passed! You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt-visual-regression/pull/1219/html_report/

[khalima]

Excellent! 🚀