Bottom Navigation Bar

When you access Kora on a mobile device or tablet, the side navigation disappears. A bottom navigation bar appears instead. This bar stays fixed at the bottom of your screen. It remains accessible regardless of where you have scrolled.

Bottom Navigation Layout:

The navigation bar contains five items arranged horizontally:

1. Home (far left) - Returns to home dashboard
2. Tasks (left-centre) - Access your task list
3. App Launcher (centre) - Opens main module menu
4. Maps (right-centre) - Jump to map manager
5. Field Observations (far right) - Quick access to GPS-based observations

Why Bottom Navigation:

• Thumb-friendly: Most people hold phones with one hand. Bottom navigation is within easy thumb reach
• Always visible: No need to open menus to navigate between main areas
• Touch-optimised: Large tap targets (64px height) easy to hit accurately
• No accidental taps: Bottom location prevents accidental touches while interacting with content above

Active Page Indicator:

• Current section is highlighted with teal accent color
• Small dot indicator appears below active icon
• Visual feedback confirms where you are in the system

App Launcher on Mobile: The centre position in bottom navigation opens the App Launcher dropdown, showing all available modules:

• Animal Management
• Maps
• Biosecurity
• Tasks
• Field Observations
• Knowledge Hub
• User Profile
• Additional modules based on your user type and permissions

Touch-Optimized Interface

Every interactive element on mobile is designed for finger taps, not mouse clicks:

Touch Target Sizes:

• Buttons, links, and controls are larger on mobile (minimum 44x44px)
• Sufficient spacing between elements prevents accidental taps
• Form inputs have expanded tap areas for easier selection
• Icons are larger and more distinct

Touch Gestures:

• Tap: Select items, open records, activate buttons
• Long press: Access context menus or additional options (where implemented)
• Swipe: Navigate between cards, dismiss notifications, slide through image galleries
• Pinch: Zoom in/out on maps
• Drag: Pan maps, scroll through content

Visual Feedback:

• Elements highlight when touched
• Buttons show pressed state
• Loading indicators appear for actions that take time
• Success/error messages confirm actions completed

Input Optimization:

• Appropriate keyboards appear for different input types (numeric for numbers, email keyboard for email fields, date picker for dates)
• Dropdowns use mobile-native selection interfaces
• Auto-complete suggestions reduce typing
• Voice input supported where device allows

Card-Based Data Views

On mobile, data tables transform into vertical card layouts:

Instead of Multi-Column Tables: Desktop shows animals in rows with columns (Name | ID | Species | Location | Health Status | Age | Last Observation)

Mobile Shows Vertical Cards: Each animal becomes a card with all information stacked vertically:

• Top: Animal name and ID
• Body: Species, location, age
• Badges: Health status indicators, quarantine flags, follow-up markers
• Bottom: Last observation date, quick action buttons

Card Benefits on Small Screens:

• All information visible without horizontal scrolling
• Scannable at a glance (visual badges, color coding)
• Tap any card to open full animal record
• Swipe down to refresh list
• Infinite scroll loads more as you reach bottom

Example - Animal List on Mobile:

┌──────────────────────────────┐
│  Daisy #A001                 │
│  ───────────                 │
│  🐄 Cattle | North Paddock   │
│  Age: 4 years                │
│  🟡 Follow-Up Required       │
│  Last observed: 2 hours ago  │
│  [View] [Quick Observation]  │
└──────────────────────────────┘

┌──────────────────────────────┐
│  Thunder #A002               │
│  ───────────                 │
│  🐄 Cattle | North Paddock   │
│  Age: 6 years                │
│  🟢 Healthy                  │
│  Last observed: 1 day ago    │
│  [View] [Quick Observation]  │
└──────────────────────────────┘

Each card is self-contained with all essential information and quick actions. Tap to dive deeper.

Data Presentation Adaptations:

• Tables → Cards: As shown above
• Multi-column layouts → Single column: Content stacks vertically
• Sidebars → Bottom sheets or tabs: Context panels appear as slide-up sheets or tab navigation
• Hover tooltips → Tap-to-expand: Information that appeared on hover requires tap on mobile

Bottom Sheets for Context

Bottom sheets are slide-up panels that appear from the bottom of the screen, primarily used in the mapping system on mobile.

What Are Bottom Sheets:

• Panels that slide up from bottom of screen
• Show contextual information without leaving current view
• Dismissible by swiping down or tapping outside
• Can be full-height or half-height depending on content

Bottom Sheets in Map Manager:

When you tap an element on the mobile map, a bottom sheet slides up showing related information:

Tap a Location:

• Bottom sheet shows location details (name, type, area, subdivisions)
• List of animals currently at that location
• Quick actions: View location details, Create observation at location, Add animals

Tap an Animal on Map:

• Bottom sheet shows animal summary (name, ID, species, health status)
• Last observation summary
• Quick actions: View full record, Record observation, Create task

Tap a Biosecurity Zone:

• Bottom sheet shows zone details (security level, access restrictions)
• Active protocols for that zone
• Compliance status
• Quick actions: View zone details, Record protocol assessment

Tap a Movement Line:

• Bottom sheet shows movement history for selected animal
• From/to locations, movement dates, reasons
• Quick actions: View complete movement history

Why Bottom Sheets on Mobile:

• Keep map visible while viewing details
• No need to navigate away and back
• Quick access to related information
• Easy to dismiss and continue map exploration
• Better than overlays that block entire screen

Example - Mobile Map Interaction:

1. You are viewing the map showing all paddocks
2. Tap "North Paddock" location
3. Bottom sheet slides up showing "North Paddock" details and list of 12 cattle currently in that paddock
4. Tap any cattle in bottom sheet to see its summary
5. Swipe down to dismiss bottom sheet and return to full map view
6. Tap different paddock to see its details in bottom sheet

Mobile Map Experience

The mapping system adapts significantly for mobile use:

Simplified Map Controls:

Desktop has full Leaflet controls (layer switcher, measurement tools, drawing toolbar, etc.) along edges of map.

Mobile focuses on essential controls:

• Zoom buttons: +/- buttons for zooming (larger than desktop for easier touch)
• Locate me: Button to centre map on your current GPS location
• Layer selector: Simplified menu for switching between satellite/terrain/street views
• My location marker: Blue dot showing where you are if GPS is active

Touch-Based Map Interaction:

• Pinch zoom: Spread two fingers to zoom in, pinch to zoom out
• Drag to pan: Single finger drag moves map
• Double-tap: Quick zoom in
• Two-finger rotation: Rotate map orientation (where supported)

Viewing vs. Editing:

Mobile map is optimised for viewing and navigation:

• See your current location on map
• View animals at their locations
• Navigate to specific paddocks or enclosures
• Check biosecurity zone boundaries
• Review movement paths

Complex editing remains desktop-focused:

• Creating new locations with precise boundaries
• Drawing complex subdivisions
• Detailed boundary adjustments
• Feature positioning

You can still create simple markers or quick location pins on mobile. However, detailed boundary drawing works best on desktop with mouse precision.

Map Information Density:

• Fewer labels visible at once (prevents overcrowding on small screen)
• Simplified marker icons (larger, clearer)
• Less detail at higher zoom levels (progressive disclosure: zoom in to see more)
• Clearer color coding for zones, locations, and animals

Mobile Map Use Cases:

• Field navigation: "Show me where North Paddock is" → GPS guides you there
• Animal location verification: "Is Daisy still in North Paddock?" → Check map
• Zone compliance: "Am I in a high-security zone?" → Check current location against zones
• Movement documentation: "Record that I moved these cattle from here to there" → Use map to confirm locations

Mobile-Optimised Workflows

Certain workflows are streamlined on mobile:

Quick Observation Recording:

1. Tap "Field Observations" in bottom navigation
2. Tap FAB (Floating Action Button) to create new observation
3. GPS captures your location automatically
4. Select animal (by scanning QR code or searching)
5. Record symptoms or notes (voice-to-text supported where available)
6. Take photo if needed
7. Tap Save. Done in under a minute

Task Completion:

1. Open Tasks from bottom navigation
2. View tasks as cards (today's tasks, overdue tasks, upcoming tasks)
3. Tap task card to expand details
4. Tap "Complete" button
5. Confirm completion with optional notes
6. Task marked complete instantly

Animal Quick Lookup:

1. Scan animal's QR code
2. Animal record opens immediately
3. View health summary, last observation, current location
4. Quick action buttons: Record Observation, Create Task, Record Treatment
5. Tap action to begin workflow

Mobile Workflows Prioritize:

• Minimal typing (dropdowns, selections, QR scans instead of text entry)
• GPS automation (location captured automatically, no manual entry)
• Camera integration (photos captured directly, no external app switching)
• Speed over detail (capture essentials now, add details later on desktop)
• One-handed operation (thumb-friendly controls, minimal reaching)

Tablet Hybrid Experience

Tablets (769-1023px width) get a hybrid experience:

Like Mobile:

• Bottom navigation bar (not side navigation)
• Touch-optimised controls
• Card-based data presentation

Like Desktop:

• More screen space allows some multi-column layouts
• Extended cards with more information visible
• Slightly more detailed data tables (though still adapted from desktop tables)
• Bigger tap targets but more content per screen

Tablets Work Well For:

• Field work requiring more screen space than phone (viewing maps while walking)
• Longer data entry sessions (larger keyboard, more comfortable typing)
• Reviewing multiple animals' records in succession (bigger cards show more detail)
• Drawing simple map features (larger touch area than phone, though still not as precise as mouse)

Example - Tablet Use Case: Zoo keeper carrying tablet on daily rounds. Larger screen than phone shows:

• Animal card with photo, health summary, feeding schedule all visible at once
• Comfortable typing for observation notes
• Easy QR code scanning with larger camera view
• Bottom navigation for quick jumps between sections
• Enough space to review yesterday's observations while recording today's

Advantages of Mobile Experience

Immediate Capture:

• Record observations the moment you notice something (no delay, no forgetting details)
• Photo documentation on the spot
• GPS coordinates captured exactly where you are standing

Portability:

• Carry Kora in your pocket everywhere
• No need to return to office to access information
• Check animal records while standing next to the animal

Built-in Sensors:

• GPS for automatic location tracking
• Camera for photo documentation
• QR scanner for instant identification

Field-Appropriate:

• Works in paddocks, barns, enclosures, remote territories
• No need for laptop setup or Wi-Fi access (mobile data sufficient)
• One-handed operation possible (hold phone, interact with animal with other hand)

Real-Time Updates:

• Changes sync immediately
• Teams see updates instantly
• No end-of-day data entry backlog

Mobile experience transforms Kora from office software into field-ready animal management. It goes wherever you and your animals are.