Dashboard Responsive Design

The responsive dashboard system provides:

• Automatic layout adaptation - Grid columns adjust based on screen size
• Burger menu - Sidebar hidden on mobile, accessible via hamburger icon
• Touch-friendly controls - Larger touch targets on mobile devices
• Read-only mode - Editing disabled on mobile to prevent accidental changes

Files:

• Dashboard.Responsive.css - All responsive CSS styles
• Obj.Dashboard.Responsive.pas - TResponsiveManager component

/// CSS Variables for breakpoints
:root {
    --mobile-breakpoint         : 768px;
    --tablet-breakpoint         : 1024px;
    --small-mobile-breakpoint   : 480px;
}

TResponsiveManager

Main component that handles responsive behavior.

TYPE
   TDeviceMode = (dmDesktop, dmTablet, dmMobile, dmSmallMobile);

   TResponsiveManager = CLASS(TComponent)
      PUBLIC
         PROCEDURE Initialize;
         PROCEDURE OpenSidebar;
         PROCEDURE CloseSidebar;
         PROCEDURE ToggleSidebar;
         PROCEDURE CheckDeviceMode;
         
         FUNCTION IsMobile: Boolean;
         FUNCTION IsTablet: Boolean;
         FUNCTION IsDesktop: Boolean;
         FUNCTION GetResponsiveColumns: Integer;
         
         PROPERTY CurrentMode: TDeviceMode READ FCurrentMode;
         PROPERTY SidebarOpen: Boolean READ FSidebarOpen;
         
      PUBLISHED
         PROPERTY LayoutContainer: TCoreDiv;
         PROPERTY Sidebar: TControl;
         PROPERTY Canvas: TControl;
         PROPERTY ReadOnlyOnMobile: Boolean DEFAULT True;
         PROPERTY MobileBreakpoint: Integer DEFAULT 768;
         PROPERTY TabletBreakpoint: Integer DEFAULT 1024;
         PROPERTY SmallMobileBreakpoint: Integer DEFAULT 480;
         PROPERTY OnDeviceModeChanged: TDeviceModeChangedEvent;
   END;

Key Features

• ResizeObserver - Uses ResizeObserver (not timers) for reliable size detection
• Window resize listener - Backup for viewport changes
• Automatic burger menu - Created and managed automatically
• Overlay for menu close - Clicking outside closes sidebar

Dashboard.Responsive.css

Include this CSS file in your application for responsive styles.

Key CSS Classes

Grid Responsive Rules

/// Tablet: Force 2 columns
@media screen and (max-width: 1024px) {
    .dashboard-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/// Mobile: 2 columns, padding for burger
@media screen and (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 60px 10px 10px 10px;
    }
    
    /// Cards span single column only
    .dashboard-card {
        grid-column: span 1 !important;
    }
}

/// Small Mobile: Single column
@media screen and (max-width: 480px) {
    .dashboard-container {
        grid-template-columns: 1fr !important;
    }
}

Step 1: Include CSS

Add the responsive CSS to your HTML:

<link rel="stylesheet" href="Dashboard.Responsive.css">

Step 2: Setup HTML Structure

<div class="dashboard-layout">
    <div class="dashboard-sidebar">
        <!-- TSideBar component here -->
    </div>
    <div class="dashboard-main-content">
        <div class="dashboard-container">
            <!-- TDashboardCanvas component here -->
        </div>
    </div>
</div>

Step 3: Create ResponsiveManager

PROCEDURE TMainForm.WebFormCreate(Sender: TObject);
BEGIN
   FResponsiveManager := TResponsiveManager.Create(Self);
   FResponsiveManager.LayoutContainer := pnlMain;      /// Main container div
   FResponsiveManager.Sidebar := pnlSidebar;           /// Sidebar panel
   FResponsiveManager.Canvas := DashboardCanvas;       /// Dashboard canvas
   FResponsiveManager.ReadOnlyOnMobile := True;        /// Disable editing on mobile
   FResponsiveManager.OnDeviceModeChanged := HandleModeChanged;
   FResponsiveManager.Initialize;
END;

Step 4: Handle Mode Changes (Optional)

PROCEDURE TMainForm.HandleModeChanged(Sender: TObject; NewMode: TDeviceMode);
BEGIN
   CASE NewMode OF
      dmDesktop:
         Console.log('Switched to desktop mode');
      dmTablet:
         Console.log('Switched to tablet mode');
      dmMobile, dmSmallMobile:
         Console.log('Switched to mobile mode');
   END;
END;

When ReadOnlyOnMobile is True (default), the following is disabled on mobile:

• Card resize handles hidden
• Drag and drop disabled
• Expand/shrink buttons hidden
• Delete button hidden in actions menu
• Resize options hidden in actions menu

CSS Classes for Read-Only

.dashboard-readonly .card-resize-handle {
    display: none !important;
}

.dashboard-readonly .dashboard-card {
    cursor: default !important;
}

.dashboard-readonly .btn-expand,
.dashboard-readonly .btn-shrink,
.dashboard-readonly .btn-delete {
    display: none !important;
}

Programmatic Control

/// Check if currently mobile
IF ResponsiveManager.IsMobile THEN
   ShowMessage('You are on a mobile device');
   
/// Get recommended columns for current mode
Columns := ResponsiveManager.GetResponsiveColumns;
DashboardCanvas.SpanAcross := Columns;