Skip to content

Peers screen: Improve responsive display #1609

Description

@jessicaschilling

The problem

The current-state Peers screen looks fine at wide desktop resolutions (below, 1440px wide) ...
image

However, both the map and the peers table deteriorate significantly at narrower widths, regardless of height:

  • 768px wide (table columns start to break):
    image
  • 425px wide (map cropped horizontally, table unusable):
    image

Additionally, map display degrades substantially at non-16x9ish aspect ratios due to the map dimensions being pegged to percentage of total screen height:

  • 1024x385 (map unusably small, gets lost in its surrounding white space):
    image
  • 320x911 (map unusably cropped):
    image

Need in brief

Improve the responsive display of the Peers screen so both the map and the table are as functional at mobile widths and unusual aspect ratios as they are in the standard 16x9, 1440px+ display. This is likely to (but will not necessarily) include:

  • Mobile-friendly (e.g. pinch + scale button) zoom/pan controls for peers map
  • Side-scroll for peers table

Please note that react-virtualized is used not only for the table on the Peers screen, but also for tables on other screens of the app. If replacing react-virtualized is part of a proposed solution, please also solve for how to implement elsewhere in Web UI.

Acceptance criteria

Solution must ...

  • Not sacrifice any functionality of full-sized display
  • Gracefully adjust when aspect ratio and display dimensions are resized (e.g. from portrait to landscape on a phone/tablet)
  • Display gracefully at and between the following display widths:
    • 320x568 (small phone portrait)
    • 568x320 (small phone landscape)
    • 375x667 (medium phone portrait)
    • 667x375 (medium phone landscape)
    • 414x736 (large phone portrait)
    • 736x414 (large phone landscape)
    • 768x1024 (small tablet portrait)
    • 1024x768 (small tablet landscape)
  • Display as gracefully as possible at extreme desktop-browser-window aspect ratios (e.g. but not limited to 400x1200, 1200x400, etc)

Activity

  1. jessicaschilling commented on Sep 1, 2020

    @jessicaschilling
    ContributorAuthor

    @lidel and @rafaelramalho19 -- thoughts on this issue's definition and acceptance criteria for potential inclusion on the bounty board?

  2. lidel commented on Sep 21, 2020

    @lidel
    Contributor

    @jessicaschilling apologies, missed this one. I think this makes a perfect bounty, but to avoid duplicated work, would wait until we land #1602/#1616, and then see if acceptance criteria still make sense with the more dense table.

  3. jessicaschilling commented on Sep 21, 2020

    @jessicaschilling
    ContributorAuthor

    +1. I suspect we'll need side-scroll on this table regardless of where we come out with those issues, but good plan.

  4. added
    P3Low: Not priority right now
    status/blockedUnable to be worked further until needs are met
    effort/daysEstimated to take multiple days, but less than a week
    on Dec 2, 2022
  5. moved this from Needs Grooming to UX Design Needed in IPFS-GUI (PL EngRes)on Dec 2, 2022
  6. added
    status/inactiveNo significant work in the previous month
    exp/beginnerCan be confidently tackled by newcomers
    and removed
    status/blockedUnable to be worked further until needs are met
    on Dec 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low: Not priority right nowarea/screen/peersIssues related to Peers screeneffort/daysEstimated to take multiple days, but less than a weekexp/beginnerCan be confidently tackled by newcomersstatus/inactiveNo significant work in the previous month

    Type

    No type

    Projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions