gantgarrett
commented
1 year ago This is a possible solution we can do using Flexbox.
The left column container will be {display: flex; justify-content: center; align-items: flex-start;}
The middle column container will be {display:flex; flex-direction:column;} -- .top-item{align-items:start; justify-content-center} .bottom-item(align-items:end; justify-content-center}
The right column container will be {display: flex; justify-content: center; align-items: flex-end;}
mawil583
Background
Typical use-case for this app is a substitution for a scoresheet. Usually only one person uses the scoresheet. So the best UX is for information to be presented in a way that most caters to that user.
Problem
The way that my app is currently set up:
As is, this app requires that the user search for his name among 4 names. If the user hears multiple people rapidly tell him their results, it can be a bit of a burden to quickly find each person to enter an input. I attempted to solve this problem by dividing teams into two columns and color-coding them, but it's still a bit of a hassle.
Solution
Orient the UI in a way that displays the position of each player relative to the user. For example:
I am always bottom center. If the person to the left of me tells me their bid, I can locate them on the app instantly.
But I still want all of the data to be displayed. So some of that data will need to go into the center of the "spades table". And put a "Bid" button and an "Actual" button nest to each player. Try displaying it like this, except include the Actuals too:
If that design makes it difficult to display in a visually pleasing way (it might get a bit too crowded with all the data I want to show), let me know and we can brainstorm a better design.
Technical Details
Rewrite
<CurrentRound>while preserving the logic found in<BidSection>and<ActualSection>. The current CSS comes from ChakraUI's<SimpleGrid>component. That may not be the right tool for the job, but please use ChakraUI for your solution.