feat: dynamically collapse legs based on available space #55
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
...dules/assistant/trip/trip-pattern/trip-pattern-header/__tests__/trip-pattern-header.test.tsx
Outdated
Show resolved
Hide resolved
Should be fixed now, please test. |
| // Dynamically collapse legs to fit horizontally | ||
| useEffect(() => { | ||
| if (legsParentWidth && legsContentWidth) { | ||
| if (legsContentWidth >= legsParentWidth - LAST_LEG_PADDING) { |
There was a problem hiding this comment.
Added a LAST_LEG_PADDING here to make some space between the destination leg and second to last leg. Couldn't do it in a nice way with CSS without sacrificing the line in some way.
There was a problem hiding this comment.
I'm not seeing a better approach right now, so I'm fine with this 👍
|
I'm getting a lot of errors on the assistant page, but might not be relevant to this PR 🤔
|
Hmm, haven't seen this. |
Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>
Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>
adriansberg
force-pushed
the
adriansberg/collapse-legs
branch
from
020847c
to
0a829ba
Compare
Dynamically collapse legs based on available space
This PR introduces a significant enhancement in leg-handle feature in our system. It adds a dynamic collapsing functionality based on the available space. This attribute adapts to the space available and smartly collapses the leg elements to ensure optimal utilization of the space without compromising on the user's interaction.
This feature not only optimizes the design for minimal spaces but also enhances the user interface by providing more flexibility and usability, especially in designs with space constraints. Now, the elements on our interface will be optimally adjusted to provide the best user experience in any given viewing area.
I have reused the logic used in the app for dynamically collapsing the legs based on the width available. The implemented logic only collapses the legs however, we might want to look into expanding them as well if the user e.g. shrinks then grows their browser, the wanted effect is probably expanding the previously collapsed legs.
Introduced the
@react-hook/resize-observerand made a custom hook for getting the width of the elements needed to decide whether legs should collapse or not. Could have not added this hook and gone for a solution that only collapses on load, but I figured it would be nice to collapse on the fly when shrinking as well.👇 Screenshots and a GIF 👇
Fixes https://github.com/AtB-AS/kundevendt/issues/14914