Frontend Component Responsiveness

This guide should help improve the responsiveness of the PermaplanT web application going forward.
Its focus are layout and usability best practices that target specific PermaplanT components.

Map Usability

Toolbar visibility

  • On smaller screens (< 768 px) in portrait mode, the left toolbar may be shown and the right toolbar should be hidden by default.
  • On larger screens (>= 768 px) in portrait mode, left and right toolbars may be shown by default.
  • On screens in landscape mode, left and right toolbars may be shown by default.
  • On smaller screens (< 768 px) in landscape mode navbar is hidden by default.
  • On larger screens (>= 768 px) in landscape mode navbar may be shown by default.
  • On screens in portrait mode, the navbar may be shown by default.

Timeline visibility

  • On smaller screens (< 768 px) in landscape mode timeline should be hidden by default.
  • On larger screens (>= 768 px) in landscape mode timeline may be shown by default.
  • On screens in portrait mode, the timeline may be shown by default.