Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make app more mobile friendly #469

Merged
merged 17 commits into from
Jan 24, 2024
Merged

feat: make app more mobile friendly #469

merged 17 commits into from
Jan 24, 2024

Conversation

katiestahl
Copy link
Contributor

@katiestahl katiestahl commented Dec 27, 2023

Opening this draft PR to help me keep track of my progress and what I still need to do.

This PR will close #461

Done so far:

  • added hook to return boolean value if a screen size we consider "mobile" size is used
  • made nav menu hamburger menu on small screen sizes + added a drawer and icons
  • fixed majority of issues on the gene, drug, and interaction pages (stack each component vertically at 100% width)
  • made components on home page not go off-screen
  • home page
  • fixed bug where search results were getting repeated (not mobile-specific but needed a bandaid)
  • point to ES6 because it's superior
  • fixed about page (added floating button to jump between sections for mobile)
  • browse sources - changed grid population to only display as many cards as possible given the space, otherwise it will wrap to next line. The noticeable change here will be that there will be more cards in a row for bigger screen sizes
  • make data tables fit nicely and scrollable on all screen sizes
  • make results pages functional + look nice on all screen sizes
  • reactive display for ambiguous/unmatched terms

Did not get to:

  • browse categories - make drawer for selecting/deselecting categories?
  • API page

@@ -67,7 +67,8 @@ export const AmbiguousMatchesCard: React.FC<Props> = ({ match }) => {
</Box>
) : (
<Typography fontStyle="italic">
STK1 is ambiguous. Please select context from drop down.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol i can't believe this has been in there for as long as it has

@katiestahl katiestahl marked this pull request as ready for review December 29, 2023 23:25
@katiestahl katiestahl requested a review from acoffman January 2, 2024 17:56
@jsstevenson
Copy link
Contributor

Looking great overall, this is awesome. A few thoughts that could be addressed here or broken out to separate issues

  • I think the logo on the top bar should downsize a bit when the menu switches to the hamburger. That would reduce the height of the top bar substantially which gives us more screen real estate
  • The "current contributors" section in the About page could probably collapse to one column once we're in mobile-width territory
  • I think it might look cleaner to make the API/downloads/GitHub links go vertically-stacked when width is minimal. Otherwise they look slightly offcenter from the text above:

Screenshot 2024-01-10 at 4 48 25 PM

  • It would be great if we could make this indentation flush with the header (also would be nice if the bottom of the download button was vertically aligned with the bottom of the number text:

Screenshot 2024-01-10 at 4 49 53 PM

@katiestahl katiestahl merged commit 0720dc1 into dev Jan 24, 2024
5 checks passed
@katiestahl katiestahl deleted the issue-461 branch January 24, 2024 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants