@ -4,7 +4,7 @@
<!-- Messages in the upper - right - https : / / g i t h u b . c o m / e m m a n u e l s w / n o t i w i n d - - >
< NotificationGroup group = "alert" >
< div
class = "fixed top-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
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"
>
< Notification
v - slot = "{ notifications, close }"
@ -144,10 +144,10 @@
<!--
This "group" of "modal" is the prompt for an answer .
Set "type" as follows : "confirm" for yes / no , and "notification" ones :
"-permission" , "-mute" , "-off"
"-permission" , "-mute" , "-off"
-- >
< NotificationGroup group = "modal" >
< div class = "fixed z-[100] top-0 inset-x-0 w-full" >
< div class = "fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full" >
< Notification
v - slot = "{ notifications, close }"
enter = "transform ease-out duration-300 transition"
@ -167,10 +167,10 @@
role = "alert"
>
<!--
Type of "confirm" will post a message .
With onYes function , show a "Yes" button to call that function .
With onNo function , show a "No" button to call that function ,
and pass it state of "askAgain" field shown if you set promptToStopAsking .
Type of "confirm" will post a message .
With onYes function , show a "Yes" button to call that function .
With onNo function , show a "No" button to call that function ,
and pass it state of "askAgain" field shown if you set promptToStopAsking .
-- >
< div
v - if = "notification.type === 'confirm'"
@ -539,4 +539,15 @@ export default class App extends Vue {
}
< / script >
< style > < / style >
< style >
# Content {
padding - left : 1.5 rem ;
padding - right : 1.5 rem ;
padding - top : calc ( env ( safe - area - inset - top ) + 1.5 rem ) ;
padding - bottom : calc ( env ( safe - area - inset - bottom ) + 1.5 rem ) ;
}
# QuickNav ~ # Content {
padding - bottom : calc ( env ( safe - area - inset - bottom ) + 6 rem ) ;
}
< / style >