oppia
Home Topic Card UI Regression
The Home screen topic cards looks weird in various devices and thats because of following reasons:
- Span count is not dynamic.
- If the extreme end margins of the screen is large then because of span count the cards look really bad. Because span count divides the entire screen in equal parts.
- We have to keep the inner margins consistent too which is not easy with span count.
Overall we are keep the extreme margins and span count constant and the width of the topic cars is dynamic and the inner margins are dynamic. Because of all these conditions the Ui looks bad.
Some References:
https://drive.google.com/drive/folders/1SLQVZD5FSJoZASWwpLNrkC_InQiq_61t?usp=sharing
Nexus 7 Device:
@sakets3010 This is not a good-first-issue. Suggest solving few good-first-issues before taking harder issues.
Per your question in #5185 @adhiamboperes, I think the problem here is that the way the home screen lays out the list of topics today doesn't work well on all device configurations. We use a fixed span count and static tile sizes which means certain devices are going to result in too small or too large margins between the tiles, or tiles that are too small. We partially manage this by increasing the fixed number of tiles to show or tile sizes for certain configurations (using layout qualifiers), but per the picture in the OP this isn't a perfect, device-wide solution.
A more flexible solution might be to instead:
- Revisit tile sizes across device configurations to ensure they're a reasonable size on all configurations (and not too small as shown in the screenshot above).
- Dynamically compute the number of tiles to show based on screen size, tile size, and required minimum margins between tiles.
(2) I think is the hard part to solve here, but we may not need to solve it if we can make (1) much better. If the tiles are larger targets for tapping and they look like they better fill their available space, then (2) might be less of an issue.
I also want to clarify one thing: Rajat and I spent a lot of time discussing ways of making both the tile size and tile counts dynamic based on screen size, but we decided it was too complicated. Instead, it's much more approachable to make one dynamic and the other static (however both are static today as mentioned above, and since that's the simplest solution we probably should stay with that unless there's some reason we can't solve (1) above).
@theMr17, Ben and I discussed this further, and here are some notes to improve your PR for this issue:
Re:
Revisit tile sizes across device configurations to ensure they're a reasonable size on all configurations (and not too small as shown in the screenshot above).
Since the tiles are fixed size, and the margins are minimum sized, we don’t want them too close together.
- The exercise is about having better tile sizing for different device configurations. We can pick different device densities and see how the tiles look at devices at the small and large ends of the spectrum within that display density profile, from mdpi to xxxhdpi, and tweak it for that density if it is too small or too large. This is about 12 different configs. We can most easily customize for hdpi, but we want to check the boundaries and come up with a value that looks nice on all the devices.
- It is important to make sure that tablet still looks good. We can pick a smaller and larger tablet to double check they both look okay.
- Do take screenshots of the before and after of all these cases.
- Even though the tile size is the main thing to configure here, feel free to tweak the other dimensions like margins to make it look right.
