vikunja/vikunja
5
48
Fork 86
Code Issues 150 Pull Requests 37 Packages Releases 37 Activity

wip: fix(ios): add save space to add to homescreen #2399

Draft
dpschen wants to merge 1 commits from dpschen/vikunja:fix/ios-spacing-for-add-to-homescreen into main
pull from: dpschen/vikunja:fix/ios-spacing-for-add-to-homescreen
merge into: vikunja:main
Conversation 1 Commits 1 Files Changed 1 +2 -3
dpschen commented 2024-06-13 20:58:32 +00:00
Member
Copy Link
No description provided.
dpschen added 1 commit 2024-06-13 20:58:37 +00:00
fix(ios): add save space to add to homescreen
All checks were successful
continuous-integration/drone/pr Build is passing
Details
0c77a09218
frederick commented 2024-06-13 21:15:03 +00:00
Member
Copy Link

Hi dpschen!

Thank you for creating a PR!

I've deployed the frontend changes of this PR on a preview environment under this URL: https://2399-fix-ios-spacing-for-add-to-homes--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somewhere. The easiest to use is https://try.vikunja.io/.

This preview does not contain any changes made to the api, only the frontend.

Have a nice day!

Beep boop, I'm a bot.

Hi dpschen! Thank you for creating a PR! I've deployed the frontend changes of this PR on a preview environment under this URL: https://2399-fix-ios-spacing-for-add-to-homes--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somewhere. The easiest to use is https://try.vikunja.io/. This preview does not contain any changes made to the api, only the frontend. Have a nice day! > Beep boop, I'm a bot.
konrad reviewed 2024-06-14 09:22:51 +00:00
frontend/src/components/home/AddToHomeScreen.vue
@ -52,3 +52,3 @@
// the highest z-index of a modal is .hint-modal with 4500
z-index: 5000;
bottom: 1rem;
bottom: max(env(safe-area-inset-bottom), 1rem);
konrad commented 2024-06-14 09:22:51 +00:00
Owner
Copy Link

are those css properties or preprocessed? What happens when the browser does not support them?

are those css properties or preprocessed? What happens when the browser does not support them?
dpschen commented 2024-06-14 10:17:26 +00:00
Author
Member
Copy Link

These are called user-agent defined environment variable and they are widely supported. The value changes dynamically (e.g. if I remember correctly e.g. when you rotate the screen the value of safe-area-inset-left changes because of the dynamic island).

On iOS this is necessary because the bottom drag indicator that allows you to switch between apps is on top of the AddToHomeScreen component, when the app is opened from a dedicated home screen icon (aka PWA). Probably this should also be added in other occasions.

It's possible to add a fallback to env, but the default fallback is already 0.

But you still might have a point, I think it should be calc(env(safe-area-inset-bottom) + 1rem);. Will check again with real device (I did already, but I don't remember if I changed the values later again).

These are called `user-agent defined environment variable` and they are [widely supported](https://developer.mozilla.org/en-US/docs/Web/CSS/env#browser_compatibility). The value changes dynamically (e.g. if I remember correctly e.g. when you rotate the screen the value of `safe-area-inset-left` changes because of the dynamic island). On iOS this is necessary because the bottom drag indicator that allows you to switch between apps is on top of the AddToHomeScreen component, when the app is opened from a dedicated home screen icon (aka PWA). Probably this should also be added in other occasions. It's possible to add a fallback to env, but the default fallback is already 0. But you still might have a point, I think it should be `calc(env(safe-area-inset-bottom) + 1rem);`. Will check again with real device (I did already, but I don't remember if I changed the values later again).
dpschen reviewed 2024-06-14 10:23:29 +00:00
frontend/src/components/home/AddToHomeScreen.vue
@ -72,3 +72,3 @@
&.has-update-available {
bottom: 5rem;
bottom: calc(max(env(safe-area-inset-bottom), 1rem) + 4rem);
dpschen commented 2024-06-14 10:23:29 +00:00
Author
Member
Copy Link

@konrad I was not sure how this looks when this is applied, so I'm not sure if these are the correct values.

Why do we reserve more bottom space in case that there is an update available?

@konrad I was not sure how this looks when this is applied, so I'm not sure if these are the correct values. Why do we reserve more bottom space in case that there is an update available?
dpschen changed title from fix(ios): add save space to add to homescreen to wip: fix(ios): add save space to add to homescreen 2024-06-15 11:31:32 +00:00
All checks were successful
continuous-integration/drone/pr Build is passing
Required
Details
This pull request is marked as a work in progress.
This branch is out-of-date with the base branch
View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u fix/ios-spacing-for-add-to-homescreen:dpschen-fix/ios-spacing-for-add-to-homescreen
git checkout dpschen-fix/ios-spacing-for-add-to-homescreen
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
dependencies
duplicate
This issue or pull request already exists
help wanted
Need some help
invalid
Something is wrong
kind/bug
Something is not working
kind/feature
New feature
needs reproduction
question
More information is needed
security
wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vikunja/vikunja#2399
No description provided.
Delete Branch "dpschen/vikunja:fix/ios-spacing-for-add-to-homescreen"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?