Improve scigateway mobile support #1281
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Drawer now behaves differently on mobile - Drawer is closed by default - Drawer overlaps the content instead of pushing the content aside - Drawer can be dismissed by clicking outside of it
App bar now behaves differently on mobile to prevent overcrowding: - Page links and action buttons are collapsed into a new overflow menu - Settings menu is embedded into the overflow menu for a unified experience
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## develop #1281 +/- ##
===========================================
- Coverage 96.98% 96.59% -0.40%
===========================================
Files 43 47 +4
Lines 1594 1701 +107
Branches 432 474 +42
===========================================
+ Hits 1546 1643 +97
- Misses 45 54 +9
- Partials 3 4 +1
☔ View full report in Codecov by Sentry. |
louise-davies
requested changes
Jul 7, 2023
There was a problem hiding this comment.
Looking good, just a minor issue:
The facility card is squished on mobile:
But otherwise, I believe it addresses all the issues raised in #1254
louise-davies
previously approved these changes
Jul 7, 2023
|
I actually think it should take up the whole width regardless of the content, as it looks more natural imo. Good catch! |
louise-davies
approved these changes
Jul 20, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR improves scigatway mobile support by tweaking the overall UI layout on mobile. The following components are modified:
Top app bar
The app bar contains several elements:
This is fine on larger viewports, but on smaller viewports there is not enough space to show everything at once. This PR introduces a new mobile overflow menu that consolidates page links, action buttons, and the settings menu into a single menu, accessible through a new menu overflow button that is only visible on small viewports. The app bar retains the current layout on larger viewports.
New mobile overflow menu:
Drawer
Currently, on larger viewports, the drawer appears next to the main content. On smaller viewports, however, this causes the main content to be too narrow to be readable or usable. This PR tweaks the behavior of the drawer so that it overlaps the main content instead. The drawer is dismissable by clicking outside of the drawer.
The drawer is also changed so that it is hidden by default on small viewports.
New drawer:
Home page
This PR improves the layout on the home page so that texts are not overflowing and are comfortably readable.
Footer
Footer is now hidden on mobile. I don't know if it is required to show the footer on mobile. If it is, a mobile version of the footer needs to be designed.
Testing instructions
Add a set up instructions describing how the reviewer should test the code
Agile board tracking
Closes #1254