JobsiteOn

Using the Dashboard on Mobile

Understand how the dashboard adapts to phones and tablets, including stacked cards, touch gestures, and mobile-specific tips.

Ava Martinez
Written by Ava MartinezUpdated 2 days ago3 min readBeginner

What this guide covers

This guide explains how the JobsiteOn dashboard looks and works on mobile devices. You will learn how the layout adapts, what gestures are available, and tips for getting the most out of the dashboard on a smaller screen.

Mobile layout overview

On screens smaller than 768px, the dashboard switches to a single-column layout:

  1. KPI cards stack vertically (one card per row)
  2. Job pipeline becomes a horizontal scrollable strip
  3. Active Jobs table becomes a card-based list
  4. Action Center cards stack in a two-column grid

Screenshot: iPhone screen showing the dashboard with three KPI cards stacked vertically: Revenue ($47,250) at the top, Pending Quotes (12) in the middle, and Outstanding Invoices ($23,500) at the bottom

Interacting with KPI cards on mobile

Tap any KPI card to navigate to the detailed view, just like clicking on desktop. The sparkline is visible but smaller. If you need to read the exact trend, tilt your phone to landscape mode for a wider sparkline.

Tip: In landscape orientation, the dashboard shows two KPI cards side by side, making comparisons easier.

Scrolling through the pipeline

The job pipeline displays as a horizontal scrollable strip on mobile. Swipe left and right to see all five stages.

Animation: A finger swiping left across the job pipeline strip on a phone screen, scrolling from "Lead/RFP" through "Proposal Sent", "Approved", "In Progress", to "Closeout/Lien" with stage counts visible on each

Active Jobs on mobile

The Active Jobs table converts to a card layout on mobile. Each job appears as a card showing:

  • Job name and address
  • Status pill
  • Assigned team member
  • Scheduled date

Tap any card to open the job detail page.

Screenshot: Mobile Active Jobs section showing three stacked job cards with rounded corners, each displaying the job name, a colored status pill, team member avatar, and date

Date filter on mobile

The date filter button is at the top of the dashboard. Tap it to open the preset list as a bottom sheet. Selecting a custom range opens a calendar picker optimized for touch.

Note: The custom date range calendar picker uses large touch targets so you can easily tap specific dates even on smaller phone screens.

Mobile-specific tips

  • Use the bottom navigation bar to quickly switch between Dashboard, Schedule, Jobs, and Inbox
  • Add JobsiteOn to your home screen for instant access without opening a browser first
  • Check the dashboard during commutes or between job sites for quick status updates
  • Use landscape mode when you need to see more data at once

Did this answer your question?

Related Articles