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.

Sign up for GitHub

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

Jump to bottom

[Docs] Navigation responsiveness issues on tablet/mobile #7519

Closed
Andreyco opened this issue May 11, 2016 · 5 comments
Closed

[Docs] Navigation responsiveness issues on tablet/mobile #7519

Andreyco opened this issue May 11, 2016 · 5 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@Andreyco
Copy link
Contributor

In current state, docs navigation on touch devices (or small screens) is anything but ideal. Actually, it could be improved for larger screens as well.
Working on PR

simulator screen shot 11 may 2016 22 47 13
@Andreyco
Copy link
Contributor Author

Early version, basically proof of concept
simulator screen shot 12 may 2016 01 28 17

@Andreyco Andreyco changed the title Improve docs navigation [Docs] Navigation responsiveness issues on tablet/mobile May 12, 2016
@Andreyco
Copy link
Contributor Author

Andreyco commented May 15, 2016 •
edited
Loading

Got it working nicely on handheld devices. Submitting code soon, see attached GIF.

iPhone
iphone

iPad
ipad

@Andreyco
Copy link
Contributor Author

cc @vjeux @damusnet any thoughts on this?

@damusnet
Copy link
Contributor

It does look nicer :)

@vjeux
Copy link
Contributor

vjeux commented May 16, 2016

Omg, this looks so good! I'd definitively love to get this in. If you send the pull request I'll review it and get it merged. Please cc me (otherwise I'll probably not see it).

@Andreyco Andreyco mentioned this issue May 19, 2016
Closed
@ghost ghost closed this as completed in 00c7780 May 20, 2016
zebulgar pushed a commit to nightingale/react-native that referenced this issue Jun 18, 2016
@Andreyco @zebulgar
Improve Docs navigation on handheld devices.
a16e6f4 
Summary:
Fixes facebook#7519

JS detects handheld device by sniffing UA string (very primitive detection). If on handheld device, event listener is registered. Event handler toggles Docs Navigation overlay after clicking on "Docs" nav button.
Original Docs Navigation panel is taken out of the natural page flow using pure CSS and is styled to look "good" on device.  As a result of this, Navigation overlay is ONLY visible when you are at Docs page, otherwise "Docs" nav button takes you Docs page first.

iPhone/iPad previews
![iphone](https://cloud.githubusercontent.com/assets/829963/15409630/f1a64b1a-1e15-11e6-92eb-f85c5cd06754.gif)
![ipad](https://cloud.githubusercontent.com/assets/829963/15409631/f1a6f952-1e15-11e6-8f5c-6f89f54e6814.gif)
Closes facebook#7640

Differential Revision: D3325440

Pulled By: vjeux

fbshipit-source-id: a06b21d743d56bfea5db5b750836856c3af9bbe2
bubblesunyum pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
@Andreyco @bubblesunyum
Improve Docs navigation on handheld devices.
3bf4cf5 
Summary:
Fixes facebook#7519

JS detects handheld device by sniffing UA string (very primitive detection). If on handheld device, event listener is registered. Event handler toggles Docs Navigation overlay after clicking on "Docs" nav button.
Original Docs Navigation panel is taken out of the natural page flow using pure CSS and is styled to look "good" on device.  As a result of this, Navigation overlay is ONLY visible when you are at Docs page, otherwise "Docs" nav button takes you Docs page first.

iPhone/iPad previews
![iphone](https://cloud.githubusercontent.com/assets/829963/15409630/f1a64b1a-1e15-11e6-92eb-f85c5cd06754.gif)
![ipad](https://cloud.githubusercontent.com/assets/829963/15409631/f1a6f952-1e15-11e6-8f5c-6f89f54e6814.gif)
Closes facebook#7640

Differential Revision: D3325440

Pulled By: vjeux

fbshipit-source-id: a06b21d743d56bfea5db5b750836856c3af9bbe2
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
@Andreyco
Improve Docs navigation on handheld devices.
b2d8143 
Summary:
Fixes facebook#7519

JS detects handheld device by sniffing UA string (very primitive detection). If on handheld device, event listener is registered. Event handler toggles Docs Navigation overlay after clicking on "Docs" nav button.
Original Docs Navigation panel is taken out of the natural page flow using pure CSS and is styled to look "good" on device.  As a result of this, Navigation overlay is ONLY visible when you are at Docs page, otherwise "Docs" nav button takes you Docs page first.

iPhone/iPad previews
![iphone](https://cloud.githubusercontent.com/assets/829963/15409630/f1a64b1a-1e15-11e6-92eb-f85c5cd06754.gif)
![ipad](https://cloud.githubusercontent.com/assets/829963/15409631/f1a6f952-1e15-11e6-8f5c-6f89f54e6814.gif)
Closes facebook#7640

Differential Revision: D3325440

Pulled By: vjeux

fbshipit-source-id: a06b21d743d56bfea5db5b750836856c3af9bbe2
@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 19, 2018
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@vjeux @damusnet @Andreyco @react-native-bot