Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-30 19:54:52 -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; const _assets = assets;
updateSlidingWindow(); updateSlidingWindow();
const rowWidth = Math.floor(viewport.width);
const rowHeight = rowWidth < 850 ? 100 : 235;
geometry = getJustifiedLayoutFromAssets(_assets, { geometry = getJustifiedLayoutFromAssets(_assets, {
spacing: 2, spacing: 2,
heightTolerance: 0.15, heightTolerance: 0.15,
rowHeight: 235, rowHeight,
rowWidth: Math.floor(viewport.width), rowWidth,
}); });
}); });

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

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