[Spike] - Breakpoints across the application
I3uckwheat opened this issue · comments
Currently it's the wild west with breakpoints, we need a system in place to have standardized breakpoints so the application continues to be consistent on all screen sizes and breaks at the same points across different screens. A few things we need to look at and figure out a good balance for:
- text
- We need to ensure that one screen isn't readable when another is.
- Consistency is key here
- minimum screen sizes
- Each screen has a realistic minimum size we can support without major re-work in the design, we need to find the largest minimum so we can cut off support on those sizes and focus on feasible screen sizes
- We need to make sure everything is readable within reason
NOTE: Hosts may resize their screens and stream only one window, so we have to support all intermediate sizes to some extent, they however don't have to be perfect, good breakpoints and some clever use of flex/grid should alleviate a lot of the issues and struggle.
We should base our findings for the those on the screen below because it is the most complicated host screen we have:
This should also account for refactoring the screen above to show all the text on the white cards at all times.
We should show a large card when it's just the black card on the screen like so:
Then shrink the black card to make room for the white cards on the subsequent screens, like so:
The mobile views are also something to consider, we need to support iPhone 5 size screens. We can let minimums break on this without having to tell the user, but we should consider the Player's screens breakpoints the same way we consider the Host screens. Players may use desktops for the Player screen at many different sizes as well. Consider if the host uses this layout for their windows to host and play on the same machine:
When doing this, try to account for as many situations as possible to build out a re-usable system for screens.
Goal
- Find a reusable way to handle different screen sizing and breakpoints as well as common breakpoints for font sizes.
Link to my solution: https://www.notion.so/Breakpoints-e5e263ddc14f49fc8505b26c54f26c90