julkascript / cardflow

The open-source Trading Card Game market
MIT License
14 stars 9 forks source link

Refactor new / edit listing pages and make them responsive #92

Closed RyotaMitaraiWeb closed 5 months ago

RyotaMitaraiWeb commented 5 months ago

This PR is part of my efforts to implement some of the mobile Figma wireframes. This PR focuses on the listing pages. Review the UI.

However, I have to note that there were some major rewrites that I had to do in order to achieve the current design, as there were a lot of things that were hardcoded. In addition, it was hard to follow what exactly was happening, so this rewrite is meant to make the code a bit more readable. Finally, there were a few bugs that outright interferred with my development, so I had to fix those to make my life easier.

===

The rewrite The rewrite includes the following:

As a result of the rewrite, there may be a few visual differences from the previous version due to MUI's default styling, though I think the main visual aspects have been preserved

The mobile UI This PR includes implementations of the edit listing and new listing pages. I have tried to match the Figma wireframes as much as possible. With that said, though, a few concessions had to be made. In particular, the card image doesn't look particularly good on very small screens. We can consider some different design if it's necessary, as the current one doesn't downscale perfectly without making certain elements too small.

The new listing page that holds the search field was made the way it is because, on smaller screens, the search results do not fit in the remainder of the container and the text starts overflowing.

I have hidden the necessary table cells in accordance to the wireframes.

Out of scope for the PR The following tasks have been left out of this PR, despite appearing in the wireframes and will be addressed another time. Those are:

Let me know if there are any issues

julkascript commented 5 months ago

LGTM! And don't be afraid to change stuff or go out of the design, ya know. :) It's just a "direction". We change when we feel we want to change, and I always vouch for that. It's always a collective vision and effort.