Implemented vertical centering #66
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
Raidakarim
reviewed
Jun 10, 2023
| {withoutAcquireButton()} | ||
| {debugOptions()} | ||
| </View> | ||
| <View style={{ flex: 'auto', flexDirection: dimension, justifyContent: 'center', alignItems: 'center', width: '100%' }}> |
There was a problem hiding this comment.
Thanks for working on it. I really appreciate it. I tested this PR on Firefox and Chromium browsers in my Ubuntu VM in all 4 device layouts. Only BiteSelection page seems to have a problem in iPad's and laptop's Portrait orientation. PLease see the attached images below. These problems do not arise in iPhone and desktop monitor layouts. The "Locate Plate" and "Done Eating" buttons seem to overlap with the view. I tried adding a little bit margin below those two buttons, but the problem still exists. What do you think? I can also think more about it later after my PR is somewhat ready.
There was a problem hiding this comment.
Once this problem is solved, I will review this PR again looking through the code changes.
There was a problem hiding this comment.
Thanks for finding this. This is because locate plate and done eating is in a div (which is part of React) and not a view (which is part of React Native). These frameworks work best if we use only one of them, but this app uses a mix of both.
I’ll let you fix this bug by changing the div to a view and maybe adding some style components to the view.
Raidakarim
approved these changes
Jun 11, 2023
amalnanavati
added a commit
that referenced
this pull request
Jul 12, 2023
* add to PR template * add new .md * add md link * undo * Update ResponsivenessTesting.md * update md file * initial code for responsiveness * landscape views * landscape changes * add arrow code * rearrange buttons * biteSelect * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * Update ResponsivenessTesting.md * custom hook and landscape for video * review response * button width and height * add footer width * width * remove copied code in footer * add comments * variables of font size and wisth * change dependency * comma check done * biteSelection position fix * fix variables * add margin variable * footer width adjust * variable in-line * comments add * add format * add video in helper * callback add * useEffect for video and plateLocator lock * food image button fixes * acqusition button fix * bite done and seletion * skip button resize * skip fix * skip button space remove * mask * mask update * add * use percentage of size * mask updates * mask working now * some PR cooments responded * progress bar and text auto-sizing * make footer responsiveness and tested in all device * adjust header sizes in vw vh * add responsiveness changes * some PR response * PR responses * Implemented vertical centering (#66) * Implemented vertical centering * overlap fix * header fix * merged amals pr --------- Co-authored-by: Raida Karim <[email protected]> * add circle bar size * matching top bottom * small fix * footer fix * header fix * add phantom view * footer fix * Fixed circle bar size on RobotMotion page (#68) fixed circle bar size on RobotMotion page * responsiveness * add more * small changes * Fix Video Scaling Responsiveness (#69) fixed video scaling responsiveness * remove phantom view from footer and robotmotion * helper add * PR response * resizing * fix after test * add vw * lock fix * add comments * add height fix * height fix * use windoe size * useWindowSize and header fix * Fix iOS 100vh Bug & Other Responsiveness Bugs (#71) * Fixed header/footer height - Increased header/footer height in landscape - Made all header elements Nav.Link for consistent height * Fix RobotMotion - Remove all overrides of text font size from h1/h2/h3... These are already responsive. - Remove nested h1's, which is invalid DOM nesting * Fix RobotMotion Bug - Changing the screen height on resize introduced a bug where RobotMotion re-calls the action. The changes to Home.jsx address that. - Implements Raida's idea for a simple solution to the iOS '100vh' bug that uses existing helpers * Fix VideoFeed resizing bug * Fixed CircleProgressBar size in landscape * Address iOS orientation change bug * Remove unused package Div100vh * Lengthened the delay for window size due to iOS orientation change issue * Platelocator button height and live video font size increase and robotmotion fontsize modify * Fix footer font size --------- Co-authored-by: Raida Karim <[email protected]> --------- Co-authored-by: Amal Nanavati <[email protected]>
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.
Implements vertical centering on top of #60 . There were a few key insights to this PR:
index.jsdown.RobotMotion, which had the issue that the footer was fixed, and therefore had absolute position instead of relative position. I made it have relative position but always appear on the bottom, so that it would still work within a flex View.divandViewwill fit to the smallest space possible in order to fit its content. To avoid that, we need to specify awidthorheight.100vw/100vhvs.100%. The former are with regards to the whole screen, the latter is with regards to the parent component.justifyContent: 'center'is with respect to the parent element. Inspecting element is a great way to identify the width/height of the parent element and determine how to adjust it accordingly.<>and<React.Fragment>tags. These are only necessary if the returned HTML code consists of multiple sibling components, and even then only one of the above is necessary. React requires all returned HTML code to be within a single tag.divandViewwhen, in reality, they are equivalent but in different frameworks (React vs. React Native Web). Each framework works best with other components from the framework, so we should entirely use one or the other. Even flex in React Native Web is equivalent to Flexbox in CSS, with slightly different names. I created Issue Move to a Single Framework + Web App Revamp For Single-Screen Pages #67 for that.