Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-18 20:24:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2916 from lukasbableck/master

Browse Source 
Add safe-area-inset-bottom padding to bottom-nav
This commit is contained in:
Louis Lam 2023-05-25 17:53:44 +08:00 committed by GitHub
commit 36942de329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />

6
src/layouts/Layout.vue
View File

@ -95,7 +95,7 @@
</main> </main>
<!-- Mobile Only --> <!-- Mobile Only -->
<div v-if="$root.isMobile" style="width: 100%; height: 60px;" /> <div v-if="$root.isMobile" style="width: 100%; height: calc(60px + env(safe-area-inset-bottom));" />
<nav v-if="$root.isMobile && $root.loggedIn" class="bottom-nav"> <nav v-if="$root.isMobile && $root.loggedIn" class="bottom-nav">
<router-link to="/dashboard" class="nav-link"> <router-link to="/dashboard" class="nav-link">
<div><font-awesome-icon icon="tachometer-alt" /></div> <div><font-awesome-icon icon="tachometer-alt" /></div>
@ -182,14 +182,14 @@ export default {
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
height: 60px; height: calc(60px + env(safe-area-inset-bottom));
width: 100%; width: 100%;
left: 0; left: 0;
background-color: #fff; background-color: #fff;
box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
padding: 0 10px; padding: 0 10px env(safe-area-inset-bottom);
a { a {
text-align: center; text-align: center;