feat(mobile): iOS polish — theme-color, safe-area, dvh, tap-highlight
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 52s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 52s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
MOB-19: Add a viewport Viewport export with viewportFit: 'cover' and themeColor entries for light (#faf7f2) / dark (#1a1612), plus the appleWebApp metadata for the home-screen status bar style and title. Manifest's stale #3b82f6 theme_color updated to match brand cream. MOB-20: Apply env(safe-area-inset-*) to the sticky chrome — the top header gets max(padding, inset-left/right) so the logo and tab links clear the notch in landscape; the bottom tab bar already had inset-bottom and now also gets inset-left/right. MOB-21: Replace 100vh with 100dvh in body min-height, modal max-heights, the map view container, and the fullscreen map. Older engines fall back via the duplicated vh declaration. MOB-22: Set -webkit-tap-highlight-color: transparent on body to suppress the iOS Safari grey flash; add a generic touch-pointer :active rule (opacity 0.7) so taps still register visually on plain anchors and bare buttons. Components with their own :active styling are unaffected. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import type { Metadata } from 'next';
|
||||
import type { Metadata, Viewport } from 'next';
|
||||
import { DM_Sans, Playfair_Display } from 'next/font/google';
|
||||
import Script from 'next/script';
|
||||
import { Navigation } from '@/components/Navigation';
|
||||
@@ -21,7 +21,24 @@ const playfairDisplay = Playfair_Display({
|
||||
display: 'swap',
|
||||
});
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
// viewport-fit=cover lets us paint behind the notch / Dynamic Island so
|
||||
// env(safe-area-inset-*) values resolve to real numbers on iPhone.
|
||||
viewportFit: 'cover',
|
||||
themeColor: [
|
||||
{ media: '(prefers-color-scheme: light)', color: '#faf7f2' },
|
||||
{ media: '(prefers-color-scheme: dark)', color: '#1a1612' },
|
||||
],
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
title: 'SchoolCompare',
|
||||
statusBarStyle: 'default',
|
||||
},
|
||||
title: {
|
||||
default: 'SchoolCompare | Compare School Performance',
|
||||
template: '%s | SchoolCompare',
|
||||
|
||||
Reference in New Issue
Block a user