Skip to content

Commit e75fbb5

Browse files
aitjcizeaitjcize
committed
apps/dashboard: improve mobile view
1 parent 8f6886c commit e75fbb5

File tree

4 files changed

+131
-1
lines changed

4 files changed

+131
-1
lines changed

‎apps/dashboard/index.html

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,30 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
66
<title>Overlord Dashboard</title>
77
<link rel="icon" href="/favicon.ico">
8+
<link rel="manifest" href="/manifest.json">
9+
<meta name="theme-color" content="#0f172a">
10+
11+
<!-- iOS Add to Home Screen meta tags -->
12+
<meta name="apple-mobile-web-app-capable" content="yes">
13+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
14+
<meta name="apple-mobile-web-app-title" content="Overlord">
15+
16+
<!-- iOS icons -->
17+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
18+
19+
<!-- iOS splash screens - you would need to create these images -->
20+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
21+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
22+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
23+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
24+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
25+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
26+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-1242-2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
27+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-750-1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
28+
<link rel="apple-touch-startup-image" href="/splash/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
829
</head>
930
<body>
1031
<div id="app"></div>

‎apps/dashboard/public/manifest.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "Overlord Dashboard",
3+
"short_name": "Overlord",
4+
"description": "Dashboard for Overlord system management",
5+
"start_url": "/apps/dashboard/",
6+
"display": "standalone",
7+
"background_color": "#0f172a",
8+
"theme_color": "#0f172a",
9+
"orientation": "portrait-primary",
10+
"icons": [
11+
{
12+
"src": "/icon-192x192.png",
13+
"sizes": "192x192",
14+
"type": "image/png"
15+
},
16+
{
17+
"src": "/icon-512x512.png",
18+
"sizes": "512x512",
19+
"type": "image/png"
20+
}
21+
]
22+
}

‎apps/dashboard/src/assets/mobile-viewport-fix.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* Fix for mobile Safari viewport height issue */
2+
:root {
3+
--vh: 1vh;
4+
--safe-area-inset-top: env(safe-area-inset-top, 0px);
5+
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
6+
--safe-area-inset-left: env(safe-area-inset-left, 0px);
7+
--safe-area-inset-right: env(safe-area-inset-right, 0px);
8+
}
9+
10+
/* Apply the custom viewport height to elements using min-h-screen */
11+
.min-h-screen {
12+
min-height: 100vh; /* Fallback */
13+
min-height: calc(var(--vh, 1vh) * 100);
14+
}
15+
16+
/* Apply to drawer component for full height */
17+
.drawer,
18+
.drawer-side {
19+
height: 100vh; /* Fallback */
20+
height: calc(var(--vh, 1vh) * 100);
21+
}
22+
23+
/* Apply to any other fixed height elements that use vh units */
24+
.floating-windows {
25+
bottom: 0;
26+
bottom: var(--safe-area-inset-bottom, 0px);
27+
height: calc(100vh - 4rem); /* Fallback */
28+
height: calc(
29+
calc(var(--vh, 1vh) * 100) - 4rem - var(--safe-area-inset-bottom, 0px)
30+
);
31+
}
32+
33+
/* Add padding to the top navbar for iOS notch */
34+
.navbar {
35+
padding-top: calc(0.5rem + var(--safe-area-inset-top, 0px));
36+
padding-left: calc(1rem + var(--safe-area-inset-left, 0px));
37+
padding-right: calc(1rem + var(--safe-area-inset-right, 0px));
38+
}
39+
40+
/* Add padding to the bottom of the main content for iOS home indicator */
41+
main {
42+
padding-bottom: calc(1rem + var(--safe-area-inset-bottom, 0px));
43+
}
44+
45+
/* Adjust sidebar padding for safe areas */
46+
.drawer-side > div {
47+
padding-top: calc(1rem + var(--safe-area-inset-top, 0px));
48+
padding-left: calc(1rem + var(--safe-area-inset-left, 0px));
49+
padding-bottom: calc(1rem + var(--safe-area-inset-bottom, 0px));
50+
}

‎apps/dashboard/src/main.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,45 @@ import { createApp } from "vue";
22
import { createPinia } from "pinia";
33
import App from "./App.vue";
44
import "./assets/tailwind.css";
5+
import "./assets/mobile-viewport-fix.css"; // Import mobile viewport fix
56
import "./services/axios"; // Import axios configuration
67

8+
// Fix for mobile Safari viewport height
9+
const setVhVariable = () => {
10+
// First we get the viewport height and multiply it by 1% to get a value for a vh unit
11+
const vh = window.innerHeight * 0.01;
12+
// Then we set the value in the --vh custom property to the root of the document
13+
document.documentElement.style.setProperty("--vh", `${vh}px`);
14+
15+
// Add a small delay for iOS "Add to Home Screen" mode to ensure correct height
16+
if (navigator.standalone) {
17+
setTimeout(() => {
18+
const vh = window.innerHeight * 0.01;
19+
document.documentElement.style.setProperty("--vh", `${vh}px`);
20+
}, 100);
21+
}
22+
};
23+
24+
// Set the height variable on initial load
25+
setVhVariable();
26+
27+
// Update the height variable on resize and orientation change
28+
window.addEventListener("resize", setVhVariable);
29+
window.addEventListener("orientationchange", () => {
30+
// Add a small delay after orientation change to get the correct height
31+
setTimeout(setVhVariable, 100);
32+
});
33+
34+
// Additional event for iOS "Add to Home Screen" mode
35+
if ("standalone" in navigator && navigator.standalone) {
36+
// iOS web app is running in "Add to Home Screen" mode
37+
document.addEventListener("visibilitychange", () => {
38+
if (document.visibilityState === "visible") {
39+
setVhVariable();
40+
}
41+
});
42+
}
43+
744
// Create the app instance
845
const app = createApp(App);
946

0 commit comments

Comments
 (0)