github/endurain
1
1
Fork 0
mirror of https://github.com/joaovitoriasilva/endurain.git synced 2026-01-12 09:17:58 -05:00
Code Issues 45 Packages Projects Releases Wiki Activity

Attempt fix for PWA

Browse Source
This commit is contained in:
João Vitória Silva
2025-05-20 13:28:26 +01:00
parent a2b1ee6789
commit ad98f7f32b
2 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/index.html
View File

@@ -15,14 +15,6 @@
<link rel="icon" href="/logo/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/logo/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<style>
body {
/* Try constant() first as it's the older syntax */
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
/* Then fallback to env() for newer iOS versions */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
</style>
</head>
<body>
<div id="app"></div>

33
frontend/app/src/App.vue
View File

@@ -22,12 +22,12 @@ import {
</Notivue>
<div class="d-flex flex-column min-vh-100">
<!-- Top Navbar with safe-area padding -->
<div class="bg-body-tertiary shadow-sm">
<NavbarComponent class="container"/>
<div class="bg-body-tertiary shadow-sm safe-area-top">
<NavbarComponent class="container safe-area-container"/>
</div>
<!-- Main content -->
<main class="container py-4 flex-grow-1">
<main class="container safe-area-container py-4 flex-grow-1">
<RouterView />
</main>
@@ -36,7 +36,30 @@ import {
<!-- Bottom Mobile Navbar with safe-area padding -->
<NavbarBottomMobileComponent
class="d-lg-none d-block sticky-bottom shadow-sm"
class="d-lg-none d-block sticky-bottom shadow-sm safe-area-bottom"
/>
</div>
</template>
</template>
<style>
/* Top navbar safe area */
.safe-area-top {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
/* Bottom mobile navbar safe area */
.safe-area-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-clip: padding-box;
}
/* Main container safe areas */
.safe-area-container {
padding-left: max(0.75rem, constant(safe-area-inset-left));
padding-left: max(0.75rem, env(safe-area-inset-left));
padding-right: max(0.75rem, constant(safe-area-inset-right));
padding-right: max(0.75rem, env(safe-area-inset-right));
}
</style>