@ -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 - - > <!-- 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" > < NotificationGroup group = "alert" >
< div < 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 < Notification
v - slot = "{ notifications, close }" v - slot = "{ notifications, close }"
@ -144,10 +144,10 @@
<!-- <!--
This "group" of "modal" is the prompt for an answer . This "group" of "modal" is the prompt for an answer .
Set "type" as follows : "confirm" for yes / no , and "notification" ones : Set "type" as follows : "confirm" for yes / no , and "notification" ones :
"-permission" , "-mute" , "-off" "-permission" , "-mute" , "-off"
-- > -- >
< NotificationGroup group = "modal" > < 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 < Notification
v - slot = "{ notifications, close }" v - slot = "{ notifications, close }"
enter = "transform ease-out duration-300 transition" enter = "transform ease-out duration-300 transition"
@ -167,10 +167,10 @@
role = "alert" role = "alert"
> >
<!-- <!--
Type of "confirm" will post a message . Type of "confirm" will post a message .
With onYes function , show a "Yes" button to call that function . With onYes function , show a "Yes" button to call that function .
With onNo function , show a "No" 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 . and pass it state of "askAgain" field shown if you set promptToStopAsking .
-- > -- >
< div < div
v - if = "notification.type === 'confirm'" v - if = "notification.type === 'confirm'"
@ -539,4 +539,15 @@ export default class App extends Vue {
} }
< / script > < / 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 >
Jose Olarte III
6 months ago