Frontend Component Responsiveness

This document describes responsiveness rules for frontend components in the PermaplanT web application. It focuses on layout and usability best practices that target specific PermaplanT components.

Map Usability

Toolbar Visibility

Small Screens (< 768px)

  • Portrait mode:
    • The left toolbar may be shown.
    • The right toolbar should be hidden by default.

Large Screens (≥ 768px)

  • Portrait mode:

    • The left and right toolbars may be shown by default.

  • Landscape mode:

    • The left and right toolbars may be shown by default.

Small Screens (< 768px)

  • Landscape mode:
    • The navbar should be hidden by default.

Large Screens (≥ 768px)

  • Landscape mode:
    • The navbar may be shown by default.

Portrait mode: The navbar may be shown by default.

Timeline Visibility

Small Screens (< 768px)

  • Landscape mode:
    • The timeline should be hidden by default.

Large Screens (≥ 768px)

  • Landscape mode:
    • The timeline may be shown by default.

Portrait mode: The timeline may be shown by default.