Epic: Responsive view

[bpierre]

Make it work on mobile; see aragon/design#4

• Menu panel
  • Menu Panel communication with apps PR
  • Iframe apps using menu panel PR
• Side panel PR
• Onboarding
  • Start screen PR
• Review apps one by one to see which ones might need work for mobile
  • Voting PR
  • Finance PR
  • Token Manager PR
  • Permissions PR
  • Apps PR
  • Settings PR

---

Additional implementation iteration (following initial implementation above):

• Fix Menu Panel shadow similar to Signer Panel shadow PR
• Enable swipe to open/close for the Menu Panel PR
• Fix BreakPoint API and Component to avoid re-rendering every time screen size changes ref
  • aragon/aragon PR
  • apps PR1 PR2 PR3
• Update app's layout to AppView from aragon/ui PR
• Regarding changes to iframe apps: common Components & changes can be moved to aragon/ui (MenuButton and borderless TableCell)
  • aragon/aragon PR
  • aragon/apps
• Update MenuButtons to use ButtonIcon component and update alignment with layouts PR
• Fix Permissions title not being animated on navigation PR
• Fix Permissions EmptyBlock margin PR
• Fix button's :focus-visible PR
• Permissions move Buttons to UI PR
• Move ToggleFiltersButton to aragon/ui ref
• Use FocusVisible in ToggleFiltersButton ref
• Review iframe screen sizes < 768 within desktop screens < 768 + 219 as the MenuButtons appear and they shouldn't ref
• Fix issue with breakpoint using iframes proportions instead of window.parent

---

• Responsive Notifications panel
• Show more on mobile (click twice) removes all transfers. update: Only happens on iOS. Weird behaviour: add eth filter, then remove it, then click on show older transfers and the bug does not happen.
• Finance fix filters margin ref
• Full responsive Onboarding
• Discuss and plan a more "secure" implementation of communication between apps and client (to avoid misuse of fullscreen) ref
• Voting was not rendering full cards while getting the data
• Fix scroll to top on Permissions app
• Fix/discuss two grid columns for Permissions app and margin ref
• Fix long times for voting overflow ref

[ptrwtts]

This may already be implied, but the goal should be that the apps are usable within mobile web3 browsers like Toshi, Status, Trust Browser, etc.

[jounih]

@ptrwtts Yep, that is exactly the goal!

[AquiGorka]

Menu Panel requirements

• Need to display menu icon on top of the header
• Apps may need to hide menu icon and show back icon
• Routes should update accordingly
  • Pass current route
  • Request route change

Ideas from the discussion on how to address task:

• use the same mechanism for apps to show back icon to render the menu icon (drawing it directly from the app).
• use postMessage from app to toggle menu and signer panels

[sohkai]

use the same mechanism for apps to show back icon to render the menu icon (drawing int directly from the app).

I think this could also be interesting as a generic mechanism if an app wanted to declare itself "fullscreen", so even on larger screens it could hide the side panel.

We could also provide some level of feature detection for in-app detection of whether the side panel is available, in the event we want an app to be locked (e.g. a Survey org).

[luisivan]

Now tracking on Aragon One's ZenHub board (GitHub issue). This Epic will be deprecated soon