Adjust dashboard (on mobile devices) and foodbasket layout
Closes #610 (closed)
What does this MR do?
- Restructure how the dashboard segments are arranged on mobile devices / screens with low width
- Modernize food basket detail page CSS (that was some terrible layouting before)
How confident are you it won't break things if deployed?
I'm fairly confident, since the potentially more breaking changes are part of !1497 (merged) now :) There are several reports of mobile dashboard activity feeds loading "too fast" now after !735 (merged) which meant they couldn't reach the important information placed below those feeds.
Links to related issues
- https://yunity.slack.com/archives/C74JC2V26/p1587711683218300?thread_ts=1587151801.184100
- https://yunity.slack.com/archives/C74JC2V26/p1588108184235700?thread_ts=1587742850.223300
- (there's more, feel free to edit and link them here if you find them)
How to test
Steps a reviewer can take to verify that this MR does what it says it does e.g.
- Open a foodbasket page, check layout in different resolutions
- Login as foodsaver, check dashboard layout in different resolutions
- Login as foodsharer, check dashboard layout in different resolutions
- Login in a low-width resolution, check dashboard layout
Screenshots (if applicable)
Checklist
-
added a test, or explain why one is not needed/possible... -
no unrelated changes -
asked someone for a code review -
joined #foodsharing-beta channel at https://slackin.yunity.org -
added an entry to CHANGELOG.md (description, merge request link, username(s)) -
Once your MR has been merged, you are responsible to update the #foodsharing-beta Slack channel about what has been changed here. They will test your work in different browsers, roles or other settings
Edited by Alex