jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Adjusted iOS-specific paddings

Browse Source 
- Switched to CSS max() for proper conditional padding when dealing with screens that have a notch, dynamic island, gesture bar, etc.
- Top padding should now appear more compact in iOS
This commit is contained in:
Jose Olarte III
2025-06-06 18:14:56 +08:00
parent eeb3485589
commit c056eb1188
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@@ -4,7 +4,7 @@
<!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
<NotificationGroup group="alert">
<div
class="fixed top-[calc(env(safe-area-inset-top)+1rem)] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
>
<Notification
v-slot="{ notifications, close }"
@@ -541,13 +541,13 @@ export default class App extends Vue {
<style>
#Content {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: calc(env(safe-area-inset-top) + 1.5rem);
padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
padding-left: max(1.5rem, env(safe-area-inset-left));
padding-right: max(1.5rem, env(safe-area-inset-right));
padding-top: max(1.5rem, env(safe-area-inset-top));
padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
#QuickNav ~ #Content {
padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
}
</style>

2
src/components/TopMessage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="absolute right-5 top-[calc(env(safe-area-inset-top)+0.75rem)]">
<div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
<span class="align-center text-red-500 mr-2">{{ message }}</span>
<span class="ml-2">
<router-link