github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-10 04:02:38 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[PR #964] [MERGED] ✨ Responsive context #3434

New Issue
Closed
opened 2026-02-28 20:41:34 -06:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-02-28 20:41:34 -06:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/964
Author: @trevdor
Created: 4/28/2023
Status: ✅ Merged
Merged: 5/17/2023
Merged by: @trevdor

Base: master ← Head: trevdor-responsive-context

📝 Commits (10+)

  • 514a8d5 ✨ Responsive context
  • 922198a Refactor Routes to redirect away from pages not supported at narrow widths
  • fbe4e72 fixup! Refactor Routes to redirect away from pages not supported at narrow widths
  • ebc9828 Release notes
  • 0eb457f PR feedback: tidy ups
  • f1d624f Revert "Refactor Routes to redirect away from pages not supported at narrow widths"
  • 613f309 Fix Routes; redirect when not supported in narrow view
  • 6bc6443 fixup! Fix Routes; redirect when not supported in narrow view
  • b510369 @typescript-eslint/no-unused-vars (#974)
  • 37c335a Finishing touches, including fixing #971

📊 Changes

18 files changed (+364 additions, -236 deletions)

View changed files

➕ packages/desktop-client/src/ResponsiveProvider.tsx (+55 -0)
📝 packages/desktop-client/src/components/App.js (+35 -32)
📝 packages/desktop-client/src/components/FinancesApp.js (+156 -127)
📝 packages/desktop-client/src/components/FloatableSidebar.js (+19 -11)
📝 packages/desktop-client/src/components/MobileWebMessage.js (+4 -2)
📝 packages/desktop-client/src/components/Page.js (+15 -9)
📝 packages/desktop-client/src/components/Titlebar.js (+4 -2)
📝 packages/desktop-client/src/components/common/Modal.tsx (+2 -2)
📝 packages/desktop-client/src/components/manager/BudgetList.js (+7 -7)
📝 packages/desktop-client/src/components/manager/ManagementApp.js (+1 -1)
📝 packages/desktop-client/src/components/settings/Format.js (+11 -7)
📝 packages/desktop-client/src/components/settings/UI.tsx (+1 -1)
📝 packages/desktop-client/src/components/settings/index.js (+8 -5)
📝 packages/desktop-client/src/style.tsx (+6 -10)
➖ packages/desktop-client/src/tokens.js (+0 -14)
➕ packages/desktop-client/src/tokens.ts (+34 -0)
📝 packages/desktop-client/src/util.js (+0 -6)
➕ upcoming-release-notes/964.md (+6 -0)

📄 Description

Introduces a ResponsiveProvider as the sole location that tracks window size and makes that info available to the entire app. This can be used for media queries and size-based component switching.

  • The app will always be in one of four possible widths: narrow, small, medium, or wide
    That means three breakpoints. Breakpoints are made available with or without px units to satisfy all JS or CSS use cases.
  • Removes the isMobile concept entirely. Layout and styling is solely based on available viewport width. We should work to ensure all click actions have an appropriate touch action if they don't already.
  • Besides the obvious application for phones & narrow devices, this flexibility helps desktop users who may want to snap a narrow view to one side of their screen (say, for comparison to a bank statement)
  • Fixes #971 by switching the number format controls to a column layout when horizontal space isn't adequate for a row.

Bonus

✨ Because most phones cross from narrow to medium view when turned to landscape orientation, transaction entry is available on mobile immediately.

Miscellaneous

🐛 Stops us recreating the react router history every time we change responsive modes
🎨 Re-arranges all media query-based styles to be "mobile-first" (narrow first, anyway). We define mobile styles as a base and restrict ourselves to min-width to change override styles for wider views.
♻️ Refactors FinancesApp from a class to a function component
✨ Added a floating property to the sidebar context so layout decisions could take into account whether or not the sidebar is currently pinned. When it's floating, it's ok if content takes up the full viewport width--the sidebar only slides out over it temporarily. No reflow needed.

Questions/Issues

A. Do we need a custom ResizeObserver on the "content" (non-sidebar) portion of our app? I prefer us not to always need to consider both window width AND whether the sidebar is expanded. ResponsiveProvider could include e.g. a contentWidth for this purpose. No, this ended up being unhelpful. Layouts would reflow in surprising ways when the sidebar floats, and so far, everything it would have been useful for can be done based on whole viewport size.
B. Are these the right breakpoints? We don't do much with wide yet, but it seemed reasonable for that to match the width where Actual offers two budget months side-by-side. I think as they are now is pretty good.
C. Some "desktop" screens don't fully function as intended in mobile landscape orientation at the moment. I'm looking into whether this is my routing or missing touch events, etc. I believe I've addressed this

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/964 **Author:** [@trevdor](https://github.com/trevdor) **Created:** 4/28/2023 **Status:** ✅ Merged **Merged:** 5/17/2023 **Merged by:** [@trevdor](https://github.com/trevdor) **Base:** `master` ← **Head:** `trevdor-responsive-context` --- ### 📝 Commits (10+) - [`514a8d5`](https://github.com/actualbudget/actual/commit/514a8d52d48014f6027dfd35d60e32e43e19337c) :sparkles: Responsive context - [`922198a`](https://github.com/actualbudget/actual/commit/922198a1726b3636add6c814c3e6f8d7f6442ca0) Refactor Routes to redirect away from pages not supported at narrow widths - [`fbe4e72`](https://github.com/actualbudget/actual/commit/fbe4e720ce46b548efc67ffc2293ecf07ec71ce1) fixup! Refactor Routes to redirect away from pages not supported at narrow widths - [`ebc9828`](https://github.com/actualbudget/actual/commit/ebc9828205c017186545ea43463621f80d67cd25) Release notes - [`0eb457f`](https://github.com/actualbudget/actual/commit/0eb457f2483b3b75529141cbf8fc29a75f0ec4a0) PR feedback: tidy ups - [`f1d624f`](https://github.com/actualbudget/actual/commit/f1d624f804e72f0092e7dfb32b75fd21ccab1f8a) Revert "Refactor Routes to redirect away from pages not supported at narrow widths" - [`613f309`](https://github.com/actualbudget/actual/commit/613f309950f9e04f85c687040530e554d317b246) Fix Routes; redirect when not supported in narrow view - [`6bc6443`](https://github.com/actualbudget/actual/commit/6bc64430b04e613ee25e167cb8016a8fa120d04a) fixup! Fix Routes; redirect when not supported in narrow view - [`b510369`](https://github.com/actualbudget/actual/commit/b51036973d7ce710c6185bc8cc2a9afcc29ff63a) @typescript-eslint/no-unused-vars (#974) - [`37c335a`](https://github.com/actualbudget/actual/commit/37c335a4946acd18ebb2b5c1624c1a1df70ba8b4) Finishing touches, including fixing #971 ### 📊 Changes **18 files changed** (+364 additions, -236 deletions) <details> <summary>View changed files</summary> ➕ `packages/desktop-client/src/ResponsiveProvider.tsx` (+55 -0) 📝 `packages/desktop-client/src/components/App.js` (+35 -32) 📝 `packages/desktop-client/src/components/FinancesApp.js` (+156 -127) 📝 `packages/desktop-client/src/components/FloatableSidebar.js` (+19 -11) 📝 `packages/desktop-client/src/components/MobileWebMessage.js` (+4 -2) 📝 `packages/desktop-client/src/components/Page.js` (+15 -9) 📝 `packages/desktop-client/src/components/Titlebar.js` (+4 -2) 📝 `packages/desktop-client/src/components/common/Modal.tsx` (+2 -2) 📝 `packages/desktop-client/src/components/manager/BudgetList.js` (+7 -7) 📝 `packages/desktop-client/src/components/manager/ManagementApp.js` (+1 -1) 📝 `packages/desktop-client/src/components/settings/Format.js` (+11 -7) 📝 `packages/desktop-client/src/components/settings/UI.tsx` (+1 -1) 📝 `packages/desktop-client/src/components/settings/index.js` (+8 -5) 📝 `packages/desktop-client/src/style.tsx` (+6 -10) ➖ `packages/desktop-client/src/tokens.js` (+0 -14) ➕ `packages/desktop-client/src/tokens.ts` (+34 -0) 📝 `packages/desktop-client/src/util.js` (+0 -6) ➕ `upcoming-release-notes/964.md` (+6 -0) </details> ### 📄 Description Introduces a **ResponsiveProvider** as the sole location that tracks window size and makes that info available to the entire app. This can be used for media queries and size-based component switching. * The app will always be in one of four possible widths: **narrow**, **small**, **medium**, or **wide** That means three breakpoints. Breakpoints are made available with or without `px` units to satisfy all JS or CSS use cases. * Removes the `isMobile` concept entirely. Layout and styling is solely based on available viewport width. We should work to ensure all click actions have an appropriate touch action if they don't already. * Besides the obvious application for phones & narrow devices, this flexibility helps desktop users who may want to snap a narrow view to one side of their screen (say, for comparison to a bank statement) * Fixes #971 by switching the number format controls to a column layout when horizontal space isn't adequate for a row. ### Bonus :sparkles: Because most phones cross from narrow to medium view when turned to landscape orientation, transaction entry is available on mobile immediately. ### Miscellaneous 🐛 Stops us recreating the react router history every time we change responsive modes 🎨 Re-arranges all media query-based styles to be "mobile-first" (narrow first, anyway). We define mobile styles as a base and restrict ourselves to `min-width` to change override styles for wider views. ♻️ Refactors FinancesApp from a class to a function component ✨ Added a `floating` property to the sidebar context so layout decisions could take into account whether or not the sidebar is currently pinned. When it's floating, it's ok if content takes up the full viewport width--the sidebar only slides out over it temporarily. No reflow needed. #### Questions/Issues A. Do we need a custom ResizeObserver on the "content" (non-sidebar) portion of our app? I prefer us not to always need to consider both window width AND whether the sidebar is expanded. `ResponsiveProvider` could include e.g. a `contentWidth` for this purpose. **No, this ended up being unhelpful. Layouts would reflow in surprising ways when the sidebar floats, and so far, everything it would have been useful for can be done based on whole viewport size.** B. Are these the right breakpoints? We don't do much with `wide` yet, but it seemed reasonable for that to match the width where Actual offers two budget months side-by-side. **I think as they are now is pretty good.** C. Some "desktop" screens don't fully function as intended in mobile landscape orientation at the moment. I'm looking into whether this is my routing or missing touch events, etc. **I believe I've addressed this** --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-02-28 20:41:34 -06:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#3434
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?