-
-
Notifications
You must be signed in to change notification settings - Fork 280
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
Add web app support #49
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey, thanks for contributing!
Just a small query about the mobile navigation offset since there might be a more dynamic way of doing it.
internal/assets/static/main.css
Outdated
@media (display-mode: standalone) { | ||
@supports (-webkit-touch-callout: none) { | ||
.mobile-navigation { | ||
bottom: 15px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't have an iPhone so I can't test this, however could we use something like this?
env(safe-area-inset-bottom, 20px);
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/env
If it works, it should provide a more flexible approach to offsetting the mobile navigation. Might require some extra work as well to get the "SHOW LESS" labels to also account for this offset since they get stickied to the bottom.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done! Now the safe-area variables are used, but because of this I went a little further since the way of hiding the page bar caused it to be exposed due to the offset, that's why I made some adjustments to compensate for it, I hope you don't mind. This is the final result:
iOS:
ios.mp4
Chrome:
chrome.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for looking into it! There's a high likelihood that more stuff will end up going there in the future so a static height that only accounts for the navigation links won't work. I've changed the implementation so that it can work with content of any height:
(fake navigation bar btw)
mobile-navigation.mp4
Let me know if this works and I'll get it merged.
Bit too much whitespace in the app icon to be able to use it as a favicon, makes the G look quite small
Hi! I added the necessary changes for web app support:
background-color
fromglance.yaml
iOS:
Chrome:
Safari: