Skip to content

Commit 4dda721

Browse files
aitjcizeaitjcize
committed
apps/dashboard: more fix on mobile view
1 parent e75fbb5 commit 4dda721

File tree

6 files changed

+189
-14
lines changed

6 files changed

+189
-14
lines changed

‎apps/dashboard/src/App.vue

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<!-- Show dashboard if authenticated -->
66
<div
77
v-else
8-
class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800"
8+
class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 webapp-container"
99
>
1010
<SideBar>
1111
<NavBar />
12-
<main class="p-4">
12+
<main class="p-4 webapp-main">
1313
<router-view></router-view>
1414
<!-- Floating Windows Container -->
1515
<div class="floating-windows">
@@ -159,4 +159,17 @@ body {
159159
.floating-windows > * {
160160
pointer-events: auto;
161161
}
162+
163+
/* Ensure minimized windows are visible above Safari toolbar */
164+
@media (max-width: 1023px) {
165+
.floating-windows .window-header {
166+
margin-bottom: env(safe-area-inset-bottom, 0px);
167+
}
168+
169+
/* Adjust minimized windows to be visible above Safari toolbar */
170+
body.safari-mobile .floating-windows .window.minimized {
171+
bottom: var(--safari-bottom-bar) !important;
172+
transform: translateY(-50px) !important; /* Move up above Safari toolbar */
173+
}
174+
}
162175
</style>

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

Lines changed: 125 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,48 @@
55
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
66
--safe-area-inset-left: env(safe-area-inset-left, 0px);
77
--safe-area-inset-right: env(safe-area-inset-right, 0px);
8+
--status-bar-height: 0px; /* Default value */
9+
--navbar-height: 4rem;
10+
--total-top-height: calc(var(--navbar-height) + var(--status-bar-height));
11+
--safari-bottom-bar: 0px; /* Default to 0 for Chrome and other browsers */
12+
}
13+
14+
/* Set status bar height for standalone mode */
15+
@media all and (display-mode: standalone) {
16+
:root {
17+
--status-bar-height: 44px; /* Height of iOS status bar */
18+
--safari-bottom-bar: 0px; /* No Safari toolbar in standalone mode */
19+
}
20+
}
21+
22+
/* Additional class-based selector for standalone mode */
23+
body.standalone-mode {
24+
/* Add padding to the top of the body for the status bar */
25+
padding-top: var(--status-bar-height);
26+
}
27+
28+
/* Safari-specific adjustments */
29+
body.safari-mobile {
30+
/* Only apply bottom padding in Safari */
31+
padding-bottom: var(--safari-bottom-bar);
32+
}
33+
34+
/* Webapp container adjustments */
35+
.webapp-container {
36+
padding-top: var(--total-top-height);
37+
/* Add padding at the bottom only for Safari */
38+
body.safari-mobile & {
39+
padding-bottom: var(--safari-bottom-bar);
40+
}
41+
}
42+
43+
/* Main content area adjustments */
44+
.webapp-main {
45+
padding-top: 1rem !important; /* Override the default padding-top */
46+
/* Add padding at the bottom only for Safari */
47+
body.safari-mobile & {
48+
padding-bottom: calc(1rem + var(--safari-bottom-bar)) !important;
49+
}
850
}
951

1052
/* Apply the custom viewport height to elements using min-h-screen */
@@ -20,31 +62,107 @@
2062
height: calc(var(--vh, 1vh) * 100);
2163
}
2264

65+
/* Sidebar content adjustments */
66+
.sidebar-content {
67+
padding-top: calc(var(--total-top-height) + 1rem) !important;
68+
/* Add padding at the bottom only for Safari */
69+
body.safari-mobile & {
70+
padding-bottom: calc(1rem + var(--safari-bottom-bar)) !important;
71+
}
72+
}
73+
2374
/* Apply to any other fixed height elements that use vh units */
2475
.floating-windows {
25-
bottom: 0;
26-
bottom: var(--safe-area-inset-bottom, 0px);
27-
height: calc(100vh - 4rem); /* Fallback */
76+
bottom: 0; /* Default for Chrome and other browsers */
77+
height: calc(100vh - var(--navbar-height)); /* Fallback */
2878
height: calc(
29-
calc(var(--vh, 1vh) * 100) - 4rem - var(--safe-area-inset-bottom, 0px)
79+
calc(var(--vh, 1vh) * 100) - var(--total-top-height) -
80+
var(--safe-area-inset-bottom, 0px)
3081
);
82+
/* Adjust top position to account for navbar + status bar */
83+
top: var(--total-top-height);
84+
85+
/* Safari-specific adjustments */
86+
body.safari-mobile & {
87+
bottom: var(--safari-bottom-bar); /* Account for Safari bottom toolbar */
88+
height: calc(
89+
calc(var(--vh, 1vh) * 100) - var(--total-top-height) -
90+
var(--safe-area-inset-bottom, 0px) - var(--safari-bottom-bar)
91+
);
92+
}
3193
}
3294

33-
/* Add padding to the top navbar for iOS notch */
95+
/* Add padding to the top navbar for iOS status bar */
3496
.navbar {
35-
padding-top: calc(0.5rem + var(--safe-area-inset-top, 0px));
97+
padding-top: calc(
98+
0.5rem + var(--safe-area-inset-top, 0px) + var(--status-bar-height)
99+
);
36100
padding-left: calc(1rem + var(--safe-area-inset-left, 0px));
37101
padding-right: calc(1rem + var(--safe-area-inset-right, 0px));
102+
/* Increase height to accommodate status bar */
103+
min-height: var(--total-top-height);
104+
/* Fix position at the top in standalone mode */
105+
position: fixed;
106+
top: 0;
107+
left: 0;
108+
right: 0;
109+
z-index: 50;
110+
}
111+
112+
/* Specific adjustments for standalone mode */
113+
body.standalone-mode .navbar {
114+
padding-top: calc(0.5rem + var(--status-bar-height));
38115
}
39116

40117
/* Add padding to the bottom of the main content for iOS home indicator */
41118
main {
42119
padding-bottom: calc(1rem + var(--safe-area-inset-bottom, 0px));
120+
121+
/* Safari-specific adjustments */
122+
body.safari-mobile & {
123+
padding-bottom: calc(
124+
1rem + var(--safe-area-inset-bottom, 0px) + var(--safari-bottom-bar)
125+
);
126+
}
43127
}
44128

45129
/* Adjust sidebar padding for safe areas */
46130
.drawer-side > div {
47-
padding-top: calc(1rem + var(--safe-area-inset-top, 0px));
131+
padding-top: calc(
132+
1rem + var(--safe-area-inset-top, 0px) + var(--status-bar-height)
133+
);
48134
padding-left: calc(1rem + var(--safe-area-inset-left, 0px));
49135
padding-bottom: calc(1rem + var(--safe-area-inset-bottom, 0px));
136+
margin-top: var(--total-top-height); /* Push content below the navbar */
137+
138+
/* Safari-specific adjustments */
139+
body.safari-mobile & {
140+
padding-bottom: calc(
141+
1rem + var(--safe-area-inset-bottom, 0px) + var(--safari-bottom-bar)
142+
);
143+
}
144+
}
145+
146+
/* Specific adjustments for standalone mode */
147+
body.standalone-mode .drawer-side > div {
148+
padding-top: calc(1rem + var(--status-bar-height));
149+
}
150+
151+
/* Specific adjustments for minimized windows in Safari */
152+
body.safari-mobile {
153+
/* Only apply in Safari mobile browser */
154+
.minimized {
155+
bottom: calc(var(--safari-bottom-bar) + 5px) !important;
156+
}
157+
158+
.minimized-stacked {
159+
bottom: calc(
160+
var(--safari-bottom-bar) + 5px + var(--minimized-position, 0px)
161+
) !important;
162+
}
163+
164+
/* Safari-adjusted camera window */
165+
.safari-adjusted {
166+
max-height: calc(100vh - var(--safari-bottom-bar)) !important;
167+
}
50168
}

‎apps/dashboard/src/components/CameraWindow.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
<template>
22
<div
33
class="card bg-base-200 shadow-lg h-[400px] flex flex-col fixed inset-0 w-full h-full lg:static lg:inset-auto"
4-
:class="{ 'lg:h-[400px]': !isFullscreen }"
4+
:class="{
5+
'lg:h-[400px]': !isFullscreen,
6+
'safari-adjusted': document.body.classList.contains('safari-mobile'),
7+
}"
8+
:style="{
9+
'padding-bottom': document.body.classList.contains('safari-mobile')
10+
? 'var(--safari-bottom-bar, 0px)'
11+
: '0',
12+
}"
513
>
614
<div class="window-header">
715
<div class="flex flex-col">

‎apps/dashboard/src/components/SideBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
></label>
2121
<div
2222
ref="sidebarRef"
23-
class="bg-gradient-to-b from-slate-900 to-slate-800 w-80 min-h-full p-4 flex flex-col gap-6 border-r border-slate-700/50"
23+
class="bg-gradient-to-b from-slate-900 to-slate-800 w-80 min-h-full p-4 flex flex-col gap-6 border-r border-slate-700/50 sidebar-content"
2424
>
2525
<!-- Search Filter -->
2626
<div class="form-control">

‎apps/dashboard/src/components/TerminalWindow.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@
2222
: 'calc(100vh - 60px)',
2323
left: isLargeScreen ? position.x + 'px' : '0',
2424
top: isLargeScreen ? position.y + 'px' : 'auto',
25-
bottom: isMinimized ? `${minimizedPosition}px` : 'auto',
25+
bottom: isMinimized
26+
? document.body.classList.contains('safari-mobile')
27+
? `calc(${minimizedPosition}px + var(--safari-bottom-bar, 0px))`
28+
: `${minimizedPosition}px`
29+
: 'auto',
2630
'z-index': isMinimized
2731
? 1000 - (minimizedPosition || 0)
2832
: currentZIndex,

‎apps/dashboard/src/main.js

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,51 @@ import "./assets/tailwind.css";
55
import "./assets/mobile-viewport-fix.css"; // Import mobile viewport fix
66
import "./services/axios"; // Import axios configuration
77

8+
// Check if the app is running in standalone mode (added to home screen)
9+
const isInStandaloneMode = () => {
10+
return (
11+
window.navigator.standalone ||
12+
window.matchMedia("(display-mode: standalone)").matches
13+
);
14+
};
15+
16+
// Browser detection functions
17+
const isSafari = () => {
18+
const ua = navigator.userAgent.toLowerCase();
19+
return ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
20+
};
21+
22+
const isIOS = () => {
23+
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
24+
};
25+
826
// Fix for mobile Safari viewport height
927
const setVhVariable = () => {
1028
// First we get the viewport height and multiply it by 1% to get a value for a vh unit
1129
const vh = window.innerHeight * 0.01;
1230
// Then we set the value in the --vh custom property to the root of the document
1331
document.documentElement.style.setProperty("--vh", `${vh}px`);
1432

15-
// Add a small delay for iOS "Add to Home Screen" mode to ensure correct height
16-
if (navigator.standalone) {
33+
// Set Safari bottom bar variable based on device and browser detection
34+
if (isIOS() && isSafari() && !isInStandaloneMode()) {
35+
document.documentElement.style.setProperty("--safari-bottom-bar", "50px");
36+
document.body.classList.add("safari-mobile");
37+
} else {
38+
document.documentElement.style.setProperty("--safari-bottom-bar", "0px");
39+
document.body.classList.remove("safari-mobile");
40+
}
41+
42+
// Add a class to the body when in standalone mode
43+
if (isInStandaloneMode()) {
44+
document.body.classList.add("standalone-mode");
45+
46+
// Add a small delay for iOS "Add to Home Screen" mode to ensure correct height
1747
setTimeout(() => {
1848
const vh = window.innerHeight * 0.01;
1949
document.documentElement.style.setProperty("--vh", `${vh}px`);
2050
}, 100);
51+
} else {
52+
document.body.classList.remove("standalone-mode");
2153
}
2254
};
2355

0 commit comments

Comments
 (0)