Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save trevdor/ac0e524bd599fc6ad0a4a27744531944 to your computer and use it in GitHub Desktop.
Save trevdor/ac0e524bd599fc6ad0a4a27744531944 to your computer and use it in GitHub Desktop.
1. identify a component `desktop-client` does poorly on mobile
2. find the corresponding component in `/mobile` and copy it somewhere reasonable within `/desktop-client`
e.g. `packages/loot-design/src/components/mobile/accounts.js -> packages/desktop-client/src/components/accounts/MobileAccounts.js`
(I don't like this either, but haven't decided what would be better. Open to suggestions! Maybe a `/mobile` subfolder within e.g. `src/components/accounts`, `src/components/budget`...) It all feels a bit off cuz we're in `desktop-client` after all.
3. point the relevant bit of code to the new component
e.g.
```
const AcctCmp = isMobile ? MobileAccounts : Accounts;
return (<AcctCmp {...props} />);
```
5. watch the build fail because the new component or one of its subcomponents imports something from react-native or like react-native-gesture-handler.
6. yank out anything react-native, pulling in loot-design core components to fill the void where possible
e.g. get `<Text>` from `packages/loot-design/src/components/Text.js` instead of react-native, swap `<Button>` from loot-design/src/components/common in place of `<RectButton>` from RN
7. where a loot-design component doesn't exist, try to make one of the react-aria examples fit the hole
8. implement new react-router routes if needed
e.g. /accounts maps to the All Transactions view on desktop. On mobile, either /accounts needs to instead be the account cards list and there's no All Transactions view (this is how James' original iOS version does it), or we keep All Transactions at /accounts and add a route like /accounts/list for presenting the list of account cards
9. tweak styles like crazy
e.g. stacked text based on flex cols may become one-line flex rows centered across the full width, padding needs adjusted, etc.
10. yank out bits that don't make sense on mobile (if it was cloned from the desktop version)
e.g. hover effects can disappear, the floatable sidebar disappears, etc
11. remove editing, often commenting instead of deleting so that it's later easier to make it work the way it did in React Native
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment