General principles main view #24
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
…ick-App into GeneralPrinciplesMainView
…obalSearch SearchBarComponent and rewrote styles for Global Search and General Principles to base off of device dimensions, implemented grid structure using Pressables with precise Figma measurements
Anthonyp0329
requested review from
a team,
PiXlRAM and
meganleongg
and removed request for
a team
meganleongg
requested changes
Mar 8, 2024
There was a problem hiding this comment.
I'm using an Iphone 15 emulator and I noticed that "General Principles" and "Browse by Category" seem like they're of the wrong font weight/size. They look mismatched from the Figma designs--I don't think rewriting the styles to integrate device dimensions is accurate as of now. The pressable components also seem to be currently centering the titles, but the Figma designs are left-top-aligned and have a taller overall height for each box.
what my emulator shows:
figma design:
PiXlRAM
approved these changes
Mar 11, 2024
Anthonyp0329
approved these changes
Mar 11, 2024
… container as per Figma measurements
…orizontal to fix search result alignment
…ing SafeAreaView to regular View in general principles main view to keep consistency between Android and iOS
meganleongg
approved these changes
Mar 14, 2024
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.
Tracking Info
Resolves #17
Changes
Implement the discussed page by passing a title prop to the GlobalSearch SearchBarComponent for the top section, with Browse By Category subheader/subtitle, and a two column grid of Pressable components below that also integrates scrolling functionality. Rewrote styles for Global Search to use device dimensions (as opposed to fixed hardcoded values); wrote General Principles to use device dimensions in conjunction with precise Figma measurements for devices of varying size.
Testing
We confirmed that the changes worked by deploying on a mobile phone and to confirm layout as well as baseline search and scrolling functionality. You can test this change by pressing on the bottom right button of the three buttons on the navbar below and looking at the layout while trying out scrolling and search. Currently, buttons do not have any functionality yet.
Confirmation of Change
Screenshots are attached below that illustrate adaptation between phone and iPad/tablet and some accommodation of varying device sizes while remaining in the two column format prescribed by the designers. Format is phone first then iPad and one photo each of top, bottom, and search: