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

Screen height on tablet vs keyboard #1162

Draft
wants to merge 17 commits into
base: main
Choose a base branch
from
Draft

Screen height on tablet vs keyboard #1162

wants to merge 17 commits into from

Conversation

microbit-grace
Copy link
Contributor

@microbit-grace microbit-grace commented Apr 3, 2024

Aim

Previously (https://github.com/microbit-foundation/python-editor-v3/issues/11), "If we stick with a bottom toolbar then the keyboard on iPad is problematic. On Android the viewport resizes. On iOS it's overlapped."

This PR aims to update the tablet UI behaviour such that the keyboard now overlays the UI for iOS and Android. This behaviour is alines with the keyboard experiences in the Raspberry pi and MakeCode editor.

In the instance where the height is shorter than what the sidebar allows, the entire UI will become scrollable in the Y-direction such that the min-height of the UI is the height of the side bar.

In the instance where the width is shorter than what the simulator width + sidebar width allows, the entire UI will become scrollable in the X-direction such that the min-width will be simulator width + sidebar width.

Still to do

  • Fix space underneath when using Android phone
  • Fix scenario where the expanding of the sidebar option somehow adds space under and on the right. I think the right hand side gap is due to the Simulator expansion button. No idea what is causing the space underneath.
Screenshot 2024-04-04 at 16 27 56

To do for future

  • Spacing for bottom action bar buttons (hamburger-like mechanism for save and open)
  • "An error occurred loading the toolkit." when opening the Reference tab on the iPad when visiting review link of Python Editor.
Screenshot 2024-04-04 at 16 34 36

Copy link

github-actions bot commented Apr 3, 2024

Preview build will be at
https://review-python-editor-v3.microbit.org/keyboard/

@microbit-grace microbit-grace marked this pull request as ready for review April 3, 2024 16:28
Comment on lines +41 to 42
display={mode === "collapsed" ? "none" : undefined}
visibility={mode === "collapsed" ? "hidden" : undefined}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This fixes some of the extra space around the UI that is added when the simulator is collapsed. visibility: hidden does not change the layout of the document, display: none does.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not needed since we are aiming to have the keyboard overlay the UI instead of having a shifting action bar

@microbit-grace microbit-grace marked this pull request as draft April 4, 2024 15:42
@microbit-grace microbit-grace removed the request for review from microbit-matt-hillsdon April 4, 2024 15:42
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.

1 participant