Landing page visual requirements

[Hyperkid123]

Please post any requirements regarding the appearance of the landing pages here. I will add and update images of current progress. It would be better to consolidate all the requirements in one place and don't block the dev work. There are more important things to do before we can make it look perfect. These initial fixes are there to stop other teams from complaining that the landing page looks poopy.

Estate section:

Recommendation section

Footer section

TBD

cc @KendraMar

[Hyperkid123]

Estate

• There should be a max of 6 items in the Estate section
• items should not stretch in the widest viewport, but have a fixed width , with the overall width limited to 1160px (1450px total with the nav)
• items can stretch at the intermediate layout with 3 (out of 6) items per line
• Mobile view should go horizontal like it was before

taken from: https://github.com/RedHatInsights/landing-page-frontend/pull/213#issuecomment-806063417

Recomendation

• Can we make the buttons the same length? Hoping no one went crazy with long titles.

[Hyperkid123]

items should not stretch in the widest viewport, but have a fixed width , with the overall width limited to 1160px (1450px total with the nav)

@epwinchell @KendraMar Is there any specific reason why we limit the max-width? I am able to show 6 items always in one column at any page size (will go down on breakpoints). I am not sure that limiting the width of the container is a good move. Some apps have the text longer than just one or two words and we might end up with a nice noodle of a description and push the rest of the content down.

Here is an example:

[ryelo]

We limit max width of the section entirely so that the bottom section of the console page can be seen on the majority of layouts without scrolling. Too many people are against having that bottom section below the fold, so we need to make sure it has the space it needs so users know there is information down there.

[Hyperkid123]

Ok its a simple adjustment I was just curious why.

[Hyperkid123]

I've created a new Jira task for the finishing touches: https://issues.redhat.com/browse/RHCLOUD-13189 @epwinchell if you want to take it to feel free. @rvsia and I plan to do some JS refracting of the API tomorrow. But I am not sure if it's worth starting working on the visual detailing before we have the necessary information from applications. We are still missing permissions, icons, states, etc. It won't be 100% complete before then.

[epwinchell]

Here's the original doc they specs the top section. https://docs.google.com/document/d/1v7GWs-bD6Oret9kaZs06yWsM_4qwT0ZtkLiKystjeAE/ Spacing between Estate items are spelled out, giving us the total fixed width. We ended up dropping the extra spacing between "Application Services", "Platforms:, etc. because we don't know how many sections are actually coming in when dynamic, only that we can accommodate 6 times.

[KendraMar]

Kendra needs to provide priority/sev icons for recommendations + type icons for the config/try/learn section. It's on my list!