dashboard ui design

[github-actions[bot]]

Welcome to new-connect! Make sure to:

• read the contributing guidelines
• mark your PR as a draft until it's ready to review
• post the preview on Discord; feedback from users will speedup the PR review

deployed preview: https://21.connect-d5y.pages.dev

[ugtthis]

Trip card UI

Im a fan of the proportions that resemble the golden ratio. Having a 60/40 split with the map taking up 60% and the drive-info taking 40% is not ideal for this context in my opinion.

My reasoning is that most users use the drive-info more frequently than the map since drive-info has more concrete info that can differentiate from the other drives(ex. time, duration, % engaged, etc). For the new route format where it does not include time for the 0.9.7 update, we will need to come up with a solution which will be a different convo than this message

Having the map smaller while keeping the drive-info side larger benefits the user to help find what they are looking for. Airports are complex but their signs are great at making sure people get where they need to, just by looking up. Text is large, icons/visualization support the text.

This is great when a user has a specific destination in mind. In the airport, the destination in mind is something like the terminal or Baggage Claim. When using comma connect its the specific past drive they want to get more info about.

Will post more comments soon

[ugtthis]

Align center for desktop-sized screens. For mobile, full-width.

I tested it on the devices below. Content should have equal padding on both the left and right sides. If on mobile, screen-sized device, the width can be 100%. For an iPhone it does do 100% width but for iPad in portrait mode it does not. But when iPad is in landscape mode the content should be aligned center.
<p align"center">

[ugtthis]

Right panel for trip details - Shane's idea

Shane's idea should work on most desktop screens. Like my laptop screen (16in MacBook) shown in previous comment has enough room to fit a right panel that would show the trip-details. Discord comment here for reference.

[incognitojam]

It would be better to create some smaller self-contaned PRs and we can get features merged 🙂 Some things to split out:

• Route Card redesign
• Route list "sort by"
• Permanent drawer on wider screens