Responsive

[luisivan]

✅ Idea

User story

As as user, I want to be able to view and interact with my organizations from anywhere. As a user, my favorite way of interacting on the go is with a smartphone. Therefore, I want Aragon on my phone.

Technical requirements

Implement responsive views across all frontend. See more requirements on the PR.

Summary

By implementing responsive across all the frontend, the user will be able to use Aragon on their phone and view organizations. If they use a Web3 provider, they will also be able to interact with the organization.

✅ Design

Figma boards:

• Token Manager
• Payroll
• Survey
• Finance
• Voting

✅ Frontend implementation

Sprint 7:

• Finish burger menu ref PR PR PR PR PR

---

• 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 PR
• Use FocusVisible in ToggleFiltersButton ref (done since ButtonIcon is used)
• Review iframe screen sizes < 768 within desktop screens < 768 + 219 as the MenuButtons appear and they shouldn't ref PR PR PR
• Fix issue with breakpoint using iframes proportions instead of window.parent

---

• Responsive Notifications panel issue
• 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. issue
• Finance fix filters margin ref PR
• Full responsive Onboarding issue
• Discuss and plan a more "secure" implementation of communication between apps and client (to avoid misuse of fullscreen) ref PR PR PR PR PR
• Voting was not rendering full cards while getting the data issue
• Fix scroll to top on Permissions app issue
• Fix/discuss two grid columns for Permissions app and margin ref issue
• Fix long times for voting overflow issue