Some thoughts or improvements ideas about the new Splinterlands Collection / Marketplace / Card Details Page

Splinterlands has released on Monday a new design and new features for the own collection page, the marketplace pages and the detail pages of each card. The reason for this is the modernization of the frontends so that they can be seamlessly adapted to mobile devices like smartphones and tables. Gradually, the entire Splinterlands webpage will be rebuilt to operate on the new modern framework.

However, while reviewing the said pages, I noticed a few things that can be improved or optimized in some places. So that I don't spam the Mavericks chat, I'll just put my ideas and thoughts about it here in the post, so that the frontend/Dev/UI-UX team can have a look at it. Whether SL will implement this, no idea, but feedback would be good.

Unused icons for Abilities of the Units

On the detail page of a unit, there is a tab for the stats. Here graphics are used that are not used on the Marketplace, Collection pages and are only used on the Gameplay FAQ page as well as on the Stats and can therefore be replaced by graphics previously loaded in the view. This also leads to using a consistent visual language when it comes to the abilities of the Splinterlands cards.

---

Align everything in a grid

Currently, the content area looks very untidy, there are elements / divs larger than they actually should or should. In this example, the area can be adjusted, at least on the desktop variant, which we actually use for the most part - The area with the button to come back, the name of the card, all this can be gladly to the left to the layout end - the same also on the other side with the foil selection and the navigation within the card.

To accomplish this, all you need to do is set the content width of the top area to 1130px instead of 1030px. The result is tidier and clearer:

Rent a Card

When you want to rent a card, and select a card, the layout above the available offers breaks because more text is displayed at the location

However, if you select a card that contains only 1 BCX instead of, for example, a card with 750 BCX, everything looks OK.

If you remove the unnecessary graphic, which symbolizes that you can filter here, there is enough space again. But if the graphic should remain there, you could at least make the width of the dropdown fields a bit narrower, because they are unnecessarily long.

Hover Cards - z-Index

In the overview, e.g. in the Rental Market, the cards overlap strangely. Here the z-index values do not fit, because the upper card still remains visible when mouse-over over the actually selected card, which should not be so.

Own Collection - Interaction Bar

This is just a personal opinion - I personally would like to see the filter info on the right side, rather on the top left above Collection, so that all filter possibilities are visible at a glance and accordingly are on one page. Here is my customized representation with a little CSS.

But, to make it easier to see that this is also a kind of navigation area, you should also choose the same background color as the left filter navigation bar. It would look like this:

---

The above are a few things that caught my eye. Whether they are all easy to implement for the team or need a lot of dev work, I don't know. Anyway, they are things I would personally adjust - At least for the desktop variants.

Greetings

---