jfcaiceo
Mobile optimization
I've been searching for something to replace fancyBox and so far this is the nicest light box I've found for React. However it has several issues on mobile devices.
- Switching from portrait to landscape landscape view and vice versa messes up the whole display. I haven't tried resizing a desktop browser, but usually the two can be taken care of in one event handler.
- In portrait mode, it looks great on mobile, but in landscape, not so much. One of the reasons I want to replace fancyBox is because it doesn't give me a full view of photos but gets in the way with padding and margins.
- There doesn't seem to be support for touch gestures to flip through galleries and to control zoom. That would also be a nice thing to have.
- You can still scroll behind the light box on mobile. It seems that there's a different way to disable scrolling on mobile than on desktops.
This issue is more of a dump of all my thoughts and would need to be broken down into individual issues. I just wanted to first give you an overview of what I see and ask if there are plans to implement/improve any of these things.
All these issues seem reasonable, and of course there are plans to improve these details. My initial efforts where only focused in desktop, so there is still a lot to do for mobile.
- [ ] Switching from portrait to landscape view and vice versa messes up the whole display
- [ ] Improve the view of the landscape mode
- [ ] Support for touch gestures to flip through galleries and to control zoom
- [x] You can still scroll behind the light box on mobile
I'm going to make a fork and start working on some of the things that bug me the most, then send some pull requests.
Question: how much ES2015 is allowed? In other words, what versions of Node.js are you aiming for? I personally tend to use const, Array.filter, arrow functions, and template strings a lot. I could go without, but if you're fine with those, I'll continue using them.
In the gulpfile I use babel to transform ES2015, so feel free to use it if you want.
I would propose hiding the controls and/or captions on mobile devices until a touch is received. That will probably be the easiest way to make it look good on mobile. Basically it would work similar to looking through the camera roll on an iPhone. Facebook takes this concept further and only shows controls on desktop devices on hover, but that would be encroaching on the style of the lightbox. For my personal app, I would apply my own stylesheet anyway.
Is there any particular reason why left and right padding isn't set on buttons? I'm going to normalize the padding for now, as it appears different in different browsers.
I've sent a pull request for the first item, but it's somewhat incomplete as it resets the zoom level. I've opened some issues about zoom (the first being most important) that would need to be fixed before making the window resize/device rotation be able not to reset the zoom level. I'll keep adding issues if there are any more interdependent issues come up that I'd like to run by you before attacking them right away.
The focus of my project has shifted a bit, so I probably won't get back to this for a while. To be more precise, management has a bit of an issue with figuring out the focus for this project. lol. I haven't implemented swipe yet, but it should be fairly simple if you want to do it, or when I can get back on it once the project gets back on track. I just wanted to let you know why I haven't done any more pull requests in a while.