diff --git a/src/components/MobileAppView/MobileAppView.css b/src/components/MobileAppView/MobileAppView.css index 1035fe0..84a9361 100644 --- a/src/components/MobileAppView/MobileAppView.css +++ b/src/components/MobileAppView/MobileAppView.css @@ -1,6 +1,9 @@ .mobile-app-view { position: fixed; - inset: 0; + top: var(--mobile-statusbar-height); + left: 0; + right: 0; + bottom: 0; background: #0d0d1a; display: flex; flex-direction: column; @@ -20,15 +23,21 @@ .mobile-back-btn { font-family: var(--font-mono); - font-size: 10px; - color: var(--pixel-cyan); - letter-spacing: 0.5px; + font-size: 11px; + color: #0d0d1a; + background: var(--pixel-cyan); + border: 2px solid var(--pixel-cyan); + box-shadow: 2px 2px 0 #000; + padding: 4px 10px; cursor: pointer; - background: none; - border: none; - padding: 0; - -webkit-tap-highlight-color: transparent; + letter-spacing: 0.5px; flex-shrink: 0; + -webkit-tap-highlight-color: transparent; +} + +.mobile-back-btn:active { + box-shadow: none; + transform: translate(2px, 2px); } .mobile-app-title { diff --git a/src/components/MobileAppView/MobileAppView.tsx b/src/components/MobileAppView/MobileAppView.tsx index f8c2698..df9ff67 100644 --- a/src/components/MobileAppView/MobileAppView.tsx +++ b/src/components/MobileAppView/MobileAppView.tsx @@ -10,22 +10,12 @@ interface Props { export default function MobileAppView({ appId, onBack }: Props) { const app = APPS.find(a => a.id === appId); - const dragStartY = useRef(null); + const touchStartY = useRef(null); if (!app) return null; const AppComponent = app.component; - function handleDragStart(y: number) { - dragStartY.current = y; - } - - function handleDragEnd(y: number) { - if (dragStartY.current === null) return; - if (y - dragStartY.current > 60) onBack(); - dragStartY.current = null; - } - return ( handleDragStart(e.touches[0].clientY)} - onTouchEnd={e => handleDragEnd(e.changedTouches[0].clientY)} - onMouseDown={e => handleDragStart(e.clientY)} - onMouseUp={e => handleDragEnd(e.clientY)} + onTouchStart={e => { touchStartY.current = e.touches[0].clientY; }} + onTouchEnd={e => { + if (touchStartY.current !== null && e.changedTouches[0].clientY - touchStartY.current > 60) onBack(); + touchStartY.current = null; + }} >
{app.title}