The height of the search results element was unrestricted, which meant that the
asset visibility calculations were completely incorrect. The consequence of
this is that assets which should not have been visible, were. In practical
terms, all assets below the viewport were rendered when they shouldn't have
been which is terrible for performance. Limiting the height of the viewport
fixes that calculation and assets are correctly hidden.
The consequence of limiting the height of the viewport is that the intersector
then incorrectly thought the scroll position was always at the end. This has
been fixed by calculating the position of sliding window against the calculated
asset layout container height.
Co-authored-by: Alex <alex.tran1502@gmail.com>
The thumbhash had a z-index setting which meant it would cover the search bar,
and would always cause weird animations when scrolling up in search results.
This is fixable by removing the z-index and moving it in front the other
elements to get a naturally higher higher z-index preference.
The contents of search results are slightly offset by the search bar, search
terms and spacing (margins/padding), and needs to be factored in when
calculating whether an asset is visible or not. The offset was 0, which
meant that assets were removed from view too early.
The timeline has been quite aggressive with scrolling to assets, even if they
were right in the middle of the page. If the asset is visible, then we
shouldn't scroll to it. It's really confusing when assets jump around after
being viewed.
The search results page can become unstable with large amounts of assets, and
has therefore been limited to displaying just 5000 assets. This limit is
arbitrary and may be too restrictive.
Fix the calculation for the date group width, so there's never a scenario where photos will be hidden. On mobile devices, photos in the second row can sometimes have a top of <100px, which throws off the calculation of the date group width.
Revert "fix(web): prevent flashing white background in dark mode on page load/reload (#19934)"
This reverts commit 32f23b8d383fa6214f83c29150ca4d5cb97af068.
* - add component
- update server's StackCreateDto for merge parameter
- Update stackRepo to only merge stacks when merge=true (default)
- update web action handlers to show stack changes
* - make open-api
* lint & format
* - Add proper icon to 'remove from stack'
- change web unstack icon to image-off-outline
* - cleanup
* - format & lint
* - make open-api: StackCreateDto merge optional
* initial addition of new endpoint
* remove stack endpoint
* - fix up remove stack endpoint
- open-api
* - Undo stackCreate merge parameter
* - open-api typescript
* open-api dart
* Tests:
- add tests
- update assetStub.imageFrom2015 to have required stack attributes to include it with tests
* update event name
* Fix event name in test
* remove asset_update check
* - merge stack.removeAsset params into one object
- refactor asset existence check (no need for asset fetch)
- fix tests
* Don't return updated stack
* Create specialized stack id & primary asset fetch for asset removal checks
* Correct new permission names
* make sql
* - fix open-api
* - cleanup
* prevent flashing white background in dark mode on page load/reload, tested with Safari and Chrome on macOS
* integrate into existing FOUC-prevention
---------
Co-authored-by: Evan <evan@MacBook-Pro.local>
