feat: /kubernetes/compare redesign

[mtruj013]

Done

• applied redesign as per doc and design

QA

• View the site locally in your web browser at: https://ubuntu-com-14660.demos.haus/kubernetes/compare
  • Be sure to test on mobile, tablet and desktop screen sizes
• Check against doc and design

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12877

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.58%. Comparing base (cab1ea7) to head (64adde8).
Report is 2182 commits behind head on k8s-bubble-refresh.

Additional details and impacted files

@@                  Coverage Diff                   @@
##           k8s-bubble-refresh   #14660      +/-   ##
======================================================
- Coverage               74.46%   72.58%   -1.89%     
======================================================
  Files                     107      120      +13     
  Lines                    2847     3392     +545     
  Branches                  948     1169     +221     
======================================================
+ Hits                     2120     2462     +342     
- Misses                    703      906     +203     
  Partials                   24       24              

see 35 files with indirect coverage changes

[mattea-turic]

thank youu @mtruj013, pretty much perfect!

just one tiny comment:

Table section:

• Is it possible for the text "Some categories are rated out of 5 for easy comparison." at the bottom of the table, to add a muted hr above it? Right now it looks a little floaty, so having a hr (maybe even col-6) to anchor it might help.

[eliman11]

Thanks @mtruj013! Just some comments on the copy:

• Change "&" to "and" in "Automated updates & patches" and "Multi-cloud deployments & operations" - also noted the changes in the copydoc
• In the table, under the "Multi-cloud deployments" row I think the input fields should be formatted "5*" instead of "5/5*" based on the copydoc
• Change to US spelling: Licence -> license in "Just count the number of physical or virtual machines you want support for and get coverage through Ubuntu Pro, without any additional licence or support fees." and "Predictable pricing model. No licence fees. Enterprise support."

Edit: Sorry I just checked how it looks on smaller screens and it seems to cut off the text that doesn't fit within the containers. Is it possible to wrap the text so we don't lose any content?

[eliman11]

Thanks for the quick changes @mtruj013, looks great! Just one comment - could you change & to "and" in the "Multi-cloud deployments & operations" heading as well? Super minor though so will add UX+1. Thanks!

[immortalcodes]

Minor difference from design.

[immortalcodes]

Inconsistent headings on medium screen in the table, for large screen the column name was "MicroK8s,
Charmed Kubernetes" if we were to change it we shall change it for all the rows.

[immortalcodes]

Hey, did you try out hero_macro here?
https://vanillaframework.io/docs/patterns/hero

[mtruj013]

Yes, but it doesn't have the option for 50/50 split with just text unfortunately

[mtruj013]

ticket opened here

[jmuzina]

Thanks for the ticket! I've raised a PR to implement a fix that supports 50/50 with no image.

[immortalcodes]

I may be wrong but are we not removing thank-you pages and replacing them with the #success tags.
Like this one https://ubuntu-com-14660.demos.haus/kubernetes/compare#success

[mtruj013]

It actually routes to the banner as is but indeed probably better to explicit 🙂

[immortalcodes]

To be changed according to copydoc

Suggested change

	<h2>Multi-cloud deployments &amp; operations</h2>
	<h2>Multi-cloud deployments and operations</h2>

[mtruj013]

Thanks @immortalcodes! Could you have another look? I applied all changes except the one suggested in this first screenshot as anchoring the text with a col-6 hr was requested during design review

[immortalcodes]

LGTM! Nice work 🎆