Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): make asset grid row height responsive (#16970)

Browse Source 
* feat(web): max grid row height responsive

* also gallery-viewer

* lint
This commit is contained in:
Min Idzelis 2025-03-19 11:57:44 -04:00 committed by GitHub
parent 9398b0d4b3
commit 7075c5b393
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View File

@ -59,11 +59,14 @@
const _assets = assets;
updateSlidingWindow();
const rowWidth = Math.floor(viewport.width);
const rowHeight = rowWidth < 850 ? 100 : 235;
geometry = getJustifiedLayoutFromAssets(_assets, {
spacing: 2,
heightTolerance: 0.15,
rowHeight: 235,
rowWidth: Math.floor(viewport.width),
rowHeight,
rowWidth,
});
});

14
web/src/lib/stores/assets-store.svelte.ts
View File

@ -32,7 +32,9 @@ export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'> & {
timelineAlbumId?: string;
deferInit?: boolean;
};
export type AssetStoreLayoutOptions = {
rowHeight: number;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function updateObject(target: any, source: any): boolean {
if (!target) {
@ -559,6 +561,7 @@ export class AssetStore {
// --- private
static #INIT_OPTIONS = {};
#rowHeight = 235;
#viewportHeight = $state(0);
#viewportWidth = $state(0);
#scrollTop = $state(0);
@ -601,6 +604,7 @@ export class AssetStore {
const changed = value !== this.#viewportWidth;
this.#viewportWidth = value;
this.suspendTransitions = true;
this.#rowHeight = value < 850 ? 100 : 235;
// side-effect - its ok!
void this.#updateViewportGeometry(changed);
}
@ -776,6 +780,11 @@ export class AssetStore {
this.#updateViewportGeometry(false);
}
updateLayoutOptions(options: AssetStoreLayoutOptions) {
this.#rowHeight = options.rowHeight;
this.refreshLayout();
}
async #init(options: AssetStoreOptions) {
// doing the following outside of the task reduces flickr
this.isInitialized = false;
@ -845,10 +854,11 @@ export class AssetStore {
createLayoutOptions() {
const viewportWidth = this.viewportWidth;
return {
spacing: 2,
heightTolerance: 0.15,
rowHeight: 235,
rowHeight: this.#rowHeight,
rowWidth: Math.floor(viewportWidth),
};
}