feat(web): better overall responsiveness

[Ethan13310]

trafficstars

This PR aims to make the web interface fully responsive.

Overall Changes

• The page height now correctly matches the view-port height on mobile browsers with dynamic view-port heights (like iOS Safari).
• Prevents the page from bouncing when over-scrolling on touch devices.
• The outclick event is now correctly emitted on touch devices.

Sidebar

• Better animations when opening and closing the sidebar.
• When the sidebar is partially of fully closed, a button is displayed on the upper left corner (next to the Immich logo) to toggle the sidebar.

(⚠️ Animations have been slowed down to 1s for this video, but are still at 200ms)

(And yes, the slight change of left-margin is made on purpose)

https://github.com/immich-app/immich/assets/9944639/18ee4179-0cd1-491e-9e44-d4554d91dfb9

• The sidebar is now fully gone on small screens.

https://github.com/immich-app/immich/assets/9944639/adabdfc7-c7e5-4b9c-aef0-b6aa7fba4be7

Navigation Bar

• Administration and Toggle Theme buttons have been moved to the account info panel on small screens to prevent the navigation bar from overflowing.
• The account info panel does not overflow anymore on small screens.

Work is sill in progress

[alextran1502]

Thank you so much for working on this! I think this is one of the most impact QoL improvements we can do for the web now!

I would love to completely hide the menu on the left unless the user clicks on the hamburger icon. This will open up more real estate for all the views

[aviv926]

It looks great. Is there an option for users to allow the sidebar to be in an open state (previous state) say through Account Settings? This is a very good use case for older people who can't necessarily understand the meaning of symbols alone.

[Ethan13310]

It looks great. Is there an option for users to allow the sidebar to be in an open state (previous state) say through Account Settings? This is a very good use case for older people who can't necessarily understand the meaning of symbols alone.

The sidebar will remain fully opened on large screens (desktop PCs and laptops). No change here.

It will be displayed in its small state on medium screens (tablets). But in that case, clicking the "hamburger" icon on the top left corner will fully open the sidebar. Hovering the sidebar with your mouse (if any) will also open it.

[NicholasFlamy]

Animations have been slowed down to 1s for this video, but are still at 200ms

If the video from mobile is the normal speed then I really appreciate the really fast animation. I hate slow animations because all they do is slow down productivity.

[zackpollard]

Hey, all these changes look great! Haven't done a review of them specifically but just to avoid it getting too large, it might be a good idea to get this PR in a reviewable state soon instead of making even more changes, then we can get it merged and you can continue optimising away after that in a new PR! :smile:

[Ethan13310]

Hey, all these changes look great! Haven't done a review of them specifically but just to avoid it getting too large, it might be a good idea to get this PR in a reviewable state soon instead of making even more changes, then we can get it merged and you can continue optimising away after that in a new PR! 😄

Yep, indeed! When I'm done I'll split this PR into smaller ones 😃

[NicholasFlamy]

If it isn't too much to ask, could you please provide some more video clips of some of the changes when you get the chance? As teasers for us who look at the PRs?

[jrasm91]

This PR has a bunch of good stuff with it, but realistically we'll never be able to merge it due to the number of conflicts. I'd love to see subsequent PRs implementing different parts of this in the future though.

[Ethan13310]

Good morning, Sorry I didn't have much time to continue working on it since May. But since it's my work, I'll try to fix all merge conflicts and split all of it into smaller PRs