-
Notifications
You must be signed in to change notification settings - Fork 314
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
Apple Icon Dropdown should overlap Windows. #3
Comments
Got it, will be fixed later. Thank you! |
Hmmm it seems harder than I thought. Before making the dropdown menu always overlay windows, I have to limit the movement boundary of windows below topbar, or the ui will seem strange. However, I use react-rnd for dragging and resizing windows and it's not easy to set boundaries in react-rnd... I'll try to find out a solution but this issue may not be solved immediately. (Also, pull requests are welcome |
I recommend looking for something to overlay the dropdown so that it is always rendered on top of things at a fixed positive. Is this what you tried? |
I never use react before(always using vue), so it maybe hard to change the code directly and properly for me. I just read the doc of react-rnd and I understand the question is to ensure that the x and y of the window do not extend beyond the desktop area. And I find that the problem can be solved with putting the rnd in a div. I try to write a example. Hope it can help you deal with this issue. |
@AXiLiYa Thank you for your detailed explanation and example. Yes, theoretically, movement boundaries can be set using div in react-rnd. But this would be difficult in practice in this case, because the size and position of the boundary div should adapt according to the window size. Here's a simple sketch: For window1 (blue), the boundary div should be the blue box. But for window2 (another window, or resized window1), the boundary div transforms to the red box. So in my opinion, this way is neither easy nor elegant. I guess it would be much easier if react-rnd provides a way to set bounds prop with a position object, just like what react-draggable (one of react-rnd's dependencies) does. I'll try to submit a pr to react-rnd when I have time (although I hope some others could do it hahaha |
@mirkoRainer @AXiLiYa Hi, finally I took @AXiLiYa's advice and added a boundary for rnds via putting them in a parent div. In fact it's much easier than I thought hahaha. Now this problem should be solved, have a look at the website. Thank you! |
Nice! |
Photo from screenshot using Edge browser in iOS on iPhone XS Max.
In true MacOS, the Apple icon dropdown in the top left would overlay windows. This is not the case in your site.
Either way, awesome site! Good job!
The text was updated successfully, but these errors were encountered: