Updates to the ecosystem page

[oraNod]

Resolves #376

[oraNod]

@tiyiprh Please take a look and let me know what you think: https://ansible-community-website--420.org.readthedocs.build/ecosystem/#

I didn't include the right arrow fa icon in the anchors. That made the cards a little too busy I think. I guess we could add them back and see if you're curious how it turns out.

[oraNod]

Yeah I just played around with adding the right arrow in just to see. Not only does it make the page seem a little busy we're going to encounter the situation where the arrow gets orphaned below the anchor text like this:

This happens because the anchor text wraps when it hits a certain point. We could set the style to "nowrap" but that causes overflow with the logo and the description when the page resizes.

[tiyiprh]

@oraNod Looking good! Removing the arrows is fine. Just a few things that still need some updating:

1. The header needs to be changed to match the mockup (don't need the logo)
2. There should be a bit more padding between the cards
3. There should be more padding on all sides of the card. It should match the padding of the ecosystem cards on the home page.

[tiyiprh]

@oraNod Sorry didn't catch this earlier. But we do have a logo for Galaxy NG: https://github.com/ansible/logos/blob/main/galaxy/galaxy-logo-ansibull.svg

[oraNod]

@tiyiprh no worries. thanks for catching that galaxy logo. I've made a few more changes as you suggested. please take another look.

[tiyiprh]

Awesome, thanks! Is there anyway to add some more padding on all sides of the cards to match more like the cards on the home page?

This is the ecosystem card on the home page

This is the card on the ecosystem page. It looks a little squished.

[oraNod]

@tiyiprh Please take another look. I think if we want to have the same padding / consistent look and feel with the ecosystem cards on the homepage, we need to have 2 cards on each row. If 3 cards per row it gets difficult to increase padding and avoid issues where the logo overlaps text.

With 2 cards per row then we can float the image on the right like we do on the homepage. But with 3 cards per row we need to make the position of the logo absolute and fix it to the top right of the card, otherwise the logo actually pushes outside the boundary of the card when the screen resizes. Increasing the padding in this case only makes it more difficult to keep the logo size consistent. We'd need to add a good few media queries and stuff to make it work and that just increases complexity.

Not sure how much all that makes sense but the changes I just pushed with 2 cards per row make things a lot more consistent with the ecosystem band on the homepage - both from the user experience as well as in the source code. So I think it's a winner although it does lead to more scrolling. We can always revisit this when we tackle the ecosystem categories / use cases.

[tiyiprh]

@oraNod Thanks for taking the time to make the updates and explain! I think it looks great!! Just a few things:

• I noticed that the EDA logo on the homepage now looks kind of cut off

  

• How are the logos implemented? Do they all fit into some kind of bounding box to maintain a similar size?

[oraNod]

@tiyiprh Could it be that it's a caching issue? I noticed that with the EDA logo before but it shouldn't be doing that. Here's what I see:

[tiyiprh]

@oraNod The logo on the ecosystem page looks fine! I was just looking at other areas of the website with this build and noticed that on the homepage in the ecosystem section the logo was a bit cut off. It's not really related to this issue so if it's more helpful to create a separate issue for that, I can do that.

[oraNod]

bah. I see what you mean now. doh!

[oraNod]

@tiyiprh Thanks for catching that one. I've updated the homepage logos to be the same as the ecosystem page. That seems to fix it. Let me know what you think please.