Ecosystem as table

[jlaehne]

This PR renders the Ecosystem section as table with banner logos.

Might actually help us also to assess the new banners for how they fit here!

[ericpre]

Is it possible to a minimum width to the left columns? When the width of the page is small, the logo appear very small. The advantage of the page is that it responds well to the width and the number of card on a line is reduce as the page width is reduce.

[CSSFrancis]

@ericpre also on mobile you have the same problem :)

[jlaehne]

It would have to switch to icons, when the size of the logos gets too small, but I am not sure if that is possible.

[CSSFrancis]

It would have to switch to icons, when the size of the logos gets too small, but I am not sure if that is possible.

Hmm.... There is probably a way but I don't think it's a big enough deal to stop this from merging, It does make me realize that pyxem probably needs a more banner like logo :)

[jlaehne]

• For pyxem it would be easy, just make a version, where the name is to the right of the crystal.
• For HyperSpy, I would propose to make a version of the banner, where the hypercube is the same height as the text as otherwise it gets too small.
• Atomap could also use a banner version with the name to the right.
• For HyperSpyUI, I would tend just make a variant of the HyperSpy logo with UI added (where it is again good that with Noto we chose a font with a clear capital I).

I am pretty happy with the eXSpy logo in this context. But I am less happy how the holographic effect in the holoSpy logo renders here. I need to touch that one again.

[jlaehne]

If I increase the size of the banners and first column a little more, like in the last commit. It already looks better for a scaled down width.

[ericpre]

If banner style logo are used with a large aspect ratio, the second column can be removed? The alternative is to used the non-banner logo with a 1:1 aspect ratio and keep the second column.
Is it worth putting some badges (pypi, zenodo)?

[CSSFrancis]

• For pyxem it would be easy, just make a version, where the name is to the right of the crystal.

Done here: pyxem/pyxem#984 (comment)

• For HyperSpy, I would propose to make a version of the banner, where the hypercube is the same height as the text as otherwise it gets too small.
• Atomap could also use a banner version with the name to the right.

@magnunor I might take a crack at a redesign to the atomap logo if you are interested. (I really want to make the logo into an A...)

• For HyperSpyUI, I would tend just make a variant of the HyperSpy logo with UI added (where it is again good that with Noto we chose a font with a clear capital I).

What about if we do the Rosttasciio thing and put the UI in the hypercube?

I am pretty happy with the eXSpy logo in this context. But I am less happy how the holographic effect in the holoSpy logo renders here. I need to touch that one again.

I made some suggestions in hyperspy/holospy#20

[CSSFrancis]

I need to stop making logos... @magnunor thoughts?

It needs a little more cleaning up but I think the idea is there.

[magnunor]

I need to stop making logos... @magnunor thoughts?

It needs a little more cleaning up but I think the idea is there.

Looks cool! I'll have a more thorough look at it after I sort out the HyperSpy 2.0.0 compatible Atomap release (my current dev-time is sadly quite small at the moment...)

[jlaehne]

If banner style logo are used with a large aspect ratio, the second column can be removed? The alternative is to used the non-banner logo with a 1:1 aspect ratio and keep the second column.

I still see a point in having the additional spelled out package name, as it is read quicker than a logo with varying font.

At the same time, the banners look better than 1:1 icons in the table. Would be only if one replaces that for narrow windows, but then that would require quite some customization that could break more easily.

Is it worth putting some badges (pypi, zenodo)?

I am not a fan of badges, as they do not match so well with the pydata-sphinx style. We could however think about adding more button-links instead. The gitter badge I would simply remove, because there is a link already!

[jlaehne]

By the way, on a small mobile screen, the banners in the table are simply left out, which is not a too bad solution, because the essential information remains!

[ericpre]

On a small screen, the banners are not removed but they are squeezed:

[jlaehne]

Interesting, I get a view without the logos (maybe because it is zoomed further?):

[jlaehne]

By the way, in your screenshot the SVGs are scaled correctly, while the PNGs (pyxem, Atomap) are squeezed.

[ericpre]

Interesting, I get a view without the logos (maybe because it is zoomed further?):

I don't know but from reading the documentation of list-table, there is no mention of removing a column when the page width is too small and I am not sure that this is expected behaviour.

[jlaehne]

I don't know but from reading the documentation of list-table, there is no mention of removing a column when the page width is too small and I am not sure that this is expected behaviour.

OK, I checked on a few more devices. In some cases the images are reduced in size, in some they seem to disappear when they are scaled too small.

[jlaehne]

I adapted the css so that it drops the second column (text titles) when the screen is not wide enough. When it becomes less than 400px wide it switches to text titles and drops the images.

Now to look really good we only need banners for:

• Atomap
• ParticleSpy
• HyperSpyUI

And an svg version (because it properly scales in contrast to png) for:

• pyxem

[ericpre]

It seems that this is now working as expected. Using a table instead of the tile of the cards better fit the content but I find it visually less pleasing but maybe it simply needs tweaking of the table formatting? For example:

• the logos look to be packed quite close to each other, maybe add more space around them?
• add lines to separate rows, for example: https://getbootstrap.com/docs/5.3/content/tables/#accented-tables
• hooverable rows : for example https://getbootstrap.com/docs/5.3/content/tables/#hoverable-rows or https://getbootstrap.com/docs/5.3/components/list-group/#links-and-buttons, maybe for another time?

If we add any other links (such as link to source code, pypi, documentation, etc.) in the rows, we should make each row a button and that will allow us to remove the second column.

[jlaehne]

It seems that this is now working as expected. Using a table instead of the tile of the cards better fit the content but I find it visually less pleasing but maybe it simply needs tweaking of the table formatting? For example:

* the logos look to be packed quite close to each other, maybe add more space around them?

* add lines to separate rows, for example: https://getbootstrap.com/docs/5.3/content/tables/#accented-tables

* hooverable rows : for example https://getbootstrap.com/docs/5.3/content/tables/#hoverable-rows or https://getbootstrap.com/docs/5.3/components/list-group/#links-and-buttons, maybe for another time?

I managed to do all proposed tweaks in the css - adapted for both dark and light mode.

If we add any other links (such as link to source code, pypi, documentation, etc.) in the rows, we should make each row a button and that will allow us to remove the second column.

The links are all going to the documentation (for HyperSpy still has to be adapted, because it goes back to the website currently). From there you can access source code, etc. - So for the moment, I do not see a need for additional links.

[CSSFrancis]

@jlaehne Does this work?

[ericpre]

If we add any other links (such as link to source code, pypi, documentation, etc.) in the rows, we should make each row a button and that will allow us to remove the second column.

The links are all going to the documentation (for HyperSpy still has to be adapted, because it goes back to the website currently). From there you can access source code, etc. - So for the moment, I do not see a need for additional links.

Sorry if didn't make sense what I said because I forgot a negation... I meant to say "If we don't add any other link" to suggest to remove the link as the whole line could be used as a button when hoovering.

[ericpre]

The holospy logo bright and dark doesn't seem to be aligned?

[jlaehne]

The holospy logo bright and dark doesn't seem to be aligned?

Thanks, should be fixed, now also added to hyperspy/holospy#26

Also, the pyxem logo works nice (just had to set :class: sd-bg-transparent to avoid some white in the corners)

For Atomap, ParticleSpy and HyperSpyUI I created some placeholder banners so that we can merge this. Can be replaced once proper banners are available for the respective packages.

[jlaehne]

Sorry if didn't make sense what I said because I forgot a negation... I meant to say "If we don't add any other link" to suggest to remove the link as the whole line could be used as a button when hoovering.

Well, though the logos are visually appealing, with the different fonts and stylized letters, one needs longer to read the names. To get a quick overview of the extension names, I believe people would actually be reading the second column with its uniform font. Therefore, when the window is wide enough, I would leave that column.

[ericpre]

Is it worth doing something about the alignment of the holospy logos when switching between bright and dark theme?

[jlaehne]

Is it worth doing something about the alignment of the holospy logos when switching between bright and dark theme?

Should be fine now. I fixed the dark one to match the light one.