From 137b7c5617cfbdf90563c9e9ea673f28d9272bf4 Mon Sep 17 00:00:00 2001 From: Adam Jolicoeur Date: Fri, 22 May 2026 09:39:13 -0400 Subject: [PATCH 1/2] fix: set tab bar to match iOS design --- dev-dist/sw.js | 2 +- ios/App/CapApp-SPM/Package.swift | 12 ++- public/pwa.css | 35 +++--- src/components/MobileNav.tsx | 156 +++++++++++++++------------ src/components/PageLayout.tsx | 2 +- src/components/TaskTrackingPanel.tsx | 2 +- src/main.tsx | 2 +- src/pages/Index.tsx | 2 +- 8 files changed, 122 insertions(+), 91 deletions(-) diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 33648cb..0c2c978 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -79,7 +79,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict'; */ workbox.precacheAndRoute([{ "url": "index.html", - "revision": "0.utnvbc1mnuk" + "revision": "0.u5tkfl26p2g" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/ios/App/CapApp-SPM/Package.swift b/ios/App/CapApp-SPM/Package.swift index 1b80b91..0e8a144 100644 --- a/ios/App/CapApp-SPM/Package.swift +++ b/ios/App/CapApp-SPM/Package.swift @@ -11,14 +11,22 @@ let package = Package( targets: ["CapApp-SPM"]) ], dependencies: [ - .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.3.1") + .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", exact: "8.3.1"), + .package(name: "CapacitorApp", path: "../../../node_modules/@capacitor/app"), + .package(name: "CapacitorHaptics", path: "../../../node_modules/@capacitor/haptics"), + .package(name: "CapacitorKeyboard", path: "../../../node_modules/@capacitor/keyboard"), + .package(name: "CapacitorStatusBar", path: "../../../node_modules/@capacitor/status-bar") ], targets: [ .target( name: "CapApp-SPM", dependencies: [ .product(name: "Capacitor", package: "capacitor-swift-pm"), - .product(name: "Cordova", package: "capacitor-swift-pm") + .product(name: "Cordova", package: "capacitor-swift-pm"), + .product(name: "CapacitorApp", package: "CapacitorApp"), + .product(name: "CapacitorHaptics", package: "CapacitorHaptics"), + .product(name: "CapacitorKeyboard", package: "CapacitorKeyboard"), + .product(name: "CapacitorStatusBar", package: "CapacitorStatusBar") ] ) ] diff --git a/public/pwa.css b/public/pwa.css index 6a8f6b7..b430172 100644 --- a/public/pwa.css +++ b/public/pwa.css @@ -44,7 +44,7 @@ html { /* Prevent text selection on buttons in PWA */ button, .button, -[role="button"] { +[role='button'] { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; @@ -57,7 +57,6 @@ button, /* Landscape mode optimizations */ @media (orientation: landscape) and (max-height: 500px) { - /* Compact header for landscape mobile */ header { height: 48px; @@ -72,10 +71,9 @@ button, /* Standalone mode specific styles (when app is installed) */ @media (display-mode: standalone) { - /* Add subtle indication that app is installed */ body::before { - content: ""; + content: ''; position: fixed; top: 0; left: 0; @@ -106,7 +104,21 @@ body { /* Improve button touch targets on mobile */ @media (max-width: 768px) { - button:not([aria-hidden="true"]) { + button:not([aria-hidden='true']) { + min-height: 44px; + min-width: 44px; + } + button[role='checkbox'] { + min-height: 24px; + min-width: 24px; + } +} + +/* Improve input targets on mobile */ +@media (max-width: 768px) { + input:not([aria-hidden='true']), + textarea:not([aria-hidden='true']), + select:not([aria-hidden='true']) { min-height: 44px; min-width: 44px; } @@ -118,7 +130,6 @@ body { } @keyframes pulse { - 0%, 100% { opacity: 1; @@ -156,7 +167,6 @@ body { /* iOS specific fixes */ @supports (-webkit-touch-callout: none) { - /* Fix iOS safari bounce */ body { position: fixed; @@ -172,10 +182,10 @@ body { } /* Fix iOS input zoom */ - input[type="text"], - input[type="email"], - input[type="password"], - input[type="number"], + input[type='text'], + input[type='email'], + input[type='password'], + input[type='number'], select, textarea { font-size: 16px !important; @@ -247,10 +257,9 @@ body { /* Android specific fixes */ @media (max-width: 768px) { - /* Prevent address bar from covering content */ .mobile-viewport { min-height: 100vh; min-height: -webkit-fill-available; } -} \ No newline at end of file +} diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx index 63a70b5..3d09196 100644 --- a/src/components/MobileNav.tsx +++ b/src/components/MobileNav.tsx @@ -1,78 +1,92 @@ -import { memo } from "react"; -import { Link, useLocation } from "react-router-dom"; -import { Home, Archive, Settings, PaperclipIcon, ClipboardList } from "lucide-react"; -import { useAuth } from "@/hooks/useAuth"; -import { useHaptics } from "@/hooks/useHaptics"; +import { memo } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { + Home, + Archive, + Settings, + PaperclipIcon, + ClipboardList +} from 'lucide-react'; +import { useAuth } from '@/hooks/useAuth'; +import { useHaptics } from '@/hooks/useHaptics'; export const MobileNav = memo(function MobileNav() { - const location = useLocation(); - const { isAuthenticated } = useAuth(); - const { lightImpact } = useHaptics(); + const location = useLocation(); + const { isAuthenticated } = useAuth(); + const { lightImpact } = useHaptics(); - const isActive = (path: string) => { - return location.pathname === path; - }; + const isActive = (path: string) => { + return location.pathname === path; + }; - const navItems = [ - { - path: "/", - icon: Home, - label: "Home" - }, - { - path: "/tasks", - icon: ClipboardList, - label: "Tasks" - }, - ...(isAuthenticated ? [{ - path: "/report", - icon: PaperclipIcon, - label: "Report" - }] : []), - { - path: "/archive", - icon: Archive, - label: "Archive" - }, - { - path: "/settings", - icon: Settings, - label: "Settings" - } - ]; + const navItems = [ + { + path: '/', + icon: Home, + label: 'Home' + }, + { + path: '/tasks', + icon: ClipboardList, + label: 'Tasks' + }, + ...(isAuthenticated + ? [ + { + path: '/report', + icon: PaperclipIcon, + label: 'Report' + } + ] + : []), + { + path: '/archive', + icon: Archive, + label: 'Archive' + }, + { + path: '/settings', + icon: Settings, + label: 'Settings' + } + ]; - const gridClass = - navItems.length <= 3 - ? "grid-cols-3" - : navItems.length === 4 - ? "grid-cols-4" - : "grid-cols-5"; + const gridClass = + navItems.length <= 3 + ? 'grid-cols-3' + : navItems.length === 4 + ? 'grid-cols-4' + : 'grid-cols-5'; - return ( - - ); + return ( + + ); }); diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx index 56b136f..7ade451 100644 --- a/src/components/PageLayout.tsx +++ b/src/components/PageLayout.tsx @@ -31,7 +31,7 @@ export const PageLayout = ({ )} {!isIosBuild && title !== undefined && ( -
+

{icon} diff --git a/src/components/TaskTrackingPanel.tsx b/src/components/TaskTrackingPanel.tsx index 05f7591..4a7a919 100644 --- a/src/components/TaskTrackingPanel.tsx +++ b/src/components/TaskTrackingPanel.tsx @@ -87,7 +87,7 @@ export function TaskTrackingPanel() { {activeTodos.length > 0 && (
    {activeTodos.map((item) => ( -
  • +
  • + {/* */} diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 776bb7e..2704540 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -97,7 +97,7 @@ const TimeTrackerContent = () => { {/* Stats (always visible) */} {!isDayStarted && ( -
    +
    From 033ce3a3c6141ef4666b7694114f5fac87ab866c Mon Sep 17 00:00:00 2001 From: Adam Jolicoeur Date: Fri, 22 May 2026 09:43:48 -0400 Subject: [PATCH 2/2] docs: sync documentation with recent navigation bar changes Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e83465b..470b984 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- iOS navigation bar redesigned as a floating pill — rounded-full shape, frosted-glass background (`rgba(255,255,255,0.80)`), drop shadow, and `mb-2 mx-2` margins replacing the full-width border-top bar + — `src/components/MobileNav.tsx` +- Page title heading hidden on non-iOS web builds (`hidden` class added to title `div` in `PageLayout`) + — `src/components/PageLayout.tsx` +- Homepage stats grid changed from single-column to two-column on mobile (`grid-cols-2`) + — `src/pages/Index.tsx` +- Todo list item alignment in `TaskTrackingPanel` changed from `items-start` to `items-center` + — `src/components/TaskTrackingPanel.tsx` +- Theme accent color changed from `orange` to `blue` + — `src/main.tsx` + ### Added - Apple HIG compliance pass for the native iOS app