ipfs / ipfs/ipfs-webui

Peers screen: Improve responsive display

Open
#1,609 3 comments 0 reactions 0 assignees View on GitHub
area/screen/peers effort/days exp/beginner P3 status/inactive
Dominant language
JavaScript
Stars
1.6k
Forks
534
PR merge metrics
No merged PRs in 30d

Description

### The problem
The current-state Peers screen looks fine at wide desktop resolutions (below, 1440px wide) ...
![image](https://user-images.githubusercontent.com/1507828/91905457-cd63ab00-ec63-11ea-9231-eaa167c06f82.png)

**However, both the map and the peers table deteriorate significantly at narrower widths, regardless of height:**
- 768px wide (table columns start to break):
![image](https://user-images.githubusercontent.com/1507828/91905788-4d8a1080-ec64-11ea-979a-533ad27cd737.png)
- 425px wide (map cropped horizontally, table unusable):
![image](https://user-images.githubusercontent.com/1507828/91905851-65fa2b00-ec64-11ea-9b53-8039a505c977.png)

**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](https://user-images.githubusercontent.com/1507828/91906023-b8d3e280-ec64-11ea-95da-ab9762f5be79.png)
- 320x911 (map unusably cropped):
![image](https://user-images.githubusercontent.com/1507828/91906116-e325a000-ec64-11ea-8042-458c83c0d6a6.png)

### 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)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.