trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 20 Releases 5 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 0e65431f43
commit 7b1d4c4849
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 --> <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
<NotificationGroup group="alert"> <NotificationGroup group="alert">
<div <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 <Notification
v-slot="{ notifications, close }" v-slot="{ notifications, close }"
@@ -541,13 +541,13 @@ export default class App extends Vue {
<style> <style>
#Content { #Content {
padding-left: 1.5rem; padding-left: max(1.5rem, env(safe-area-inset-left));
padding-right: 1.5rem; padding-right: max(1.5rem, env(safe-area-inset-right));
padding-top: calc(env(safe-area-inset-top) + 1.5rem); padding-top: max(1.5rem, env(safe-area-inset-top));
padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem); padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
} }
#QuickNav ~ #Content { #QuickNav ~ #Content {
padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
} }
</style> </style>

2
src/components/TopMessage.vue
View File

@@ -1,5 +1,5 @@
<template> <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="align-center text-red-500 mr-2">{{ message }}</span>
<span class="ml-2"> <span class="ml-2">
<router-link <router-link