mirror of
https://github.com/apache/superset.git
synced 2026-08-03 20:42:30 +00:00
f9da2f93de
Adds an opt-in, consumption-only mobile experience (feature flag MOBILE_CONSUMPTION_MODE, default off, @lifecycle: development): - Dashboards: charts stacked full-width with real plugin dimensions (ChartHolder reports full column count on mobile; heights capped to the viewport minus chrome), sticky swipeable tab bars with gradient overflow affordances, filter bar in a drawer (FilterBar mobileMode), compact header (title scrolls away; edit/publish/fave/refresh controls hidden; dashboard info moved into the kebab menu) - Dashboard list: forced card view, full-width cards, search/filters and sort in a drawer (single FilterControls instance) - Home: dashboards-only Recents, compact empty states, desktop-only sections hidden - Navigation: hamburger drawer (dashboards, theme/language, user info/logout with row-tap navigation) - Route guarding: routes declare mobileSupported in routes.tsx; everything else renders a MobileUnsupported screen; viewport growth unblocks automatically (useIsMobile subscribes to matchMedia only when the flag is on, so flag-off deployments have zero render delta) - Serves a viewport meta tag (flag-gated) so mobile browsers lay out at device width instead of the ~980px legacy viewport; exposes is_feature_enabled to Jinja via the common context processor - User docs (using-superset/mobile-experience.mdx) with a Playwright screenshot generator following the docs:screenshots pattern - Docker dev config enables the flag; jest + Playwright coverage throughout Squashed from the iterative mobile-dashboard-support history (preserved at backup/mobile-pre-rebase-2). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
90 lines
4.1 KiB
Plaintext
90 lines
4.1 KiB
Plaintext
---
|
|
title: Mobile Experience
|
|
sidebar_position: 7
|
|
version: 1
|
|
---
|
|
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
|
|
# Mobile Experience
|
|
|
|
Superset ships an optional, consumption-only mobile experience for viewing
|
|
dashboards on phones and other small screens. When enabled, screens below
|
|
768px wide get a layout built for touch: dashboards render their charts
|
|
stacked full-width, navigation collapses into a drawer, and dashboard
|
|
filters open in a slide-out panel.
|
|
|
|
The mobile experience is **read-only by design**. It is aimed at consumers
|
|
of analytics — people checking a dashboard from a phone — not at dashboard
|
|
authors. Authoring surfaces (chart builder, SQL Lab, dataset management,
|
|
and administrative screens) remain desktop-only.
|
|
|
|
## Enabling the mobile experience
|
|
|
|
The mobile experience is gated behind the `MOBILE_CONSUMPTION_MODE` feature
|
|
flag, which is off by default. Enable it in your `superset_config.py`:
|
|
|
|
```python
|
|
FEATURE_FLAGS = {
|
|
"MOBILE_CONSUMPTION_MODE": True,
|
|
}
|
|
```
|
|
|
|
With the flag disabled, Superset renders identically at every screen size,
|
|
and phones display the desktop layout scaled down (the pre-existing
|
|
behavior). The flag also controls whether Superset serves a viewport meta
|
|
tag, which is required for mobile browsers to apply the responsive layout
|
|
at their native width.
|
|
|
|
## What works on mobile
|
|
|
|
| Area | Mobile behavior |
|
|
| --- | --- |
|
|
| **Dashboards** | Charts stack vertically at full width, sized to the screen. Tab bars are sticky and swipeable. Native filters open in a drawer via the filter icon in the header. |
|
|
| **Dashboard list** | Card view with full-width cards; search and filters open in a drawer. |
|
|
| **Home** | Recents (dashboards only) and dashboard cards; desktop-only sections are hidden. |
|
|
| **Navigation** | A hamburger menu opens a drawer with links to dashboards, theme and language selection, and user info/logout. |
|
|
|
|
<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap'}}>
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_dashboard.jpg")} alt="A dashboard on mobile with charts stacked full width" width="260" />
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_filter_drawer.jpg")} alt="The dashboard filter drawer on mobile" width="260" />
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_dashboard_list.jpg")} alt="The dashboard list in card view on mobile" width="260" />
|
|
</div>
|
|
|
|
<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginTop: '1rem'}}>
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_home.jpg")} alt="The Superset home page on mobile" width="260" />
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_nav_drawer.jpg")} alt="The mobile navigation drawer" width="260" />
|
|
<img src={useBaseUrl("/img/screenshots/mobile/mobile_unsupported.jpg")} alt="The screen shown for views that are not available on mobile" width="260" />
|
|
</div>
|
|
|
|
## What doesn't work on mobile
|
|
|
|
Everything not listed above shows a friendly "This view isn't available on
|
|
mobile" screen with shortcuts back to dashboards and the home page. That
|
|
includes:
|
|
|
|
- Chart builder (Explore) and chart-level links — chart titles on
|
|
dashboards are plain text on mobile, and chart entries are filtered out
|
|
of the home page's Recents feed
|
|
- SQL Lab and query history
|
|
- Creating or editing dashboards, charts, datasets, and databases
|
|
- List views other than dashboards (charts, datasets, saved queries, etc.)
|
|
- Administrative and settings screens
|
|
|
|
Editing controls are also removed from the screens that *are* supported:
|
|
the dashboard header hides the edit, publish, and favorite controls, and
|
|
dashboard/chart kebab menus are reduced to view-oriented actions.
|
|
|
|
If a device crosses the 768px threshold — for example, rotating a tablet
|
|
to landscape or resizing a window — the full desktop experience becomes
|
|
available immediately.
|
|
|
|
## Notes for operators
|
|
|
|
- The flag is deployment-wide; there is no per-role or per-user targeting.
|
|
- Dashboard permalinks and links shared from desktop resolve normally on
|
|
mobile as long as they point at dashboards.
|
|
- Embedded dashboards are unaffected: the embedded SDK controls its own
|
|
layout, and the viewport meta tag is only interpreted by the top-level
|
|
page.
|