feat(photos): justified (aspect-preserving) layout option
Adds a Grid/Justified toggle to the photos toolbar. Justified mode packs tiles into Flickr-style rows scaled to the container width using each photo's real aspect ratio (from the new /api/photos width/height, falling back to 1:1 when missing). It composes with the virtualized renderer: per-group materialization and the off-screen spacer height estimates are both layout-aware. The choice persists in localStorage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JW6ghFMDtnRYuYNzZhb47M
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2) var(--space-2) var(--space-1);
|
||||
}
|
||||
|
||||
@@ -54,6 +55,25 @@
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Justified (aspect-preserving) layout — the grid becomes a column of rows;
|
||||
tile sizes are set inline by photos.js (see _justifiedRows). */
|
||||
.photos-layout-justified .photos-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.photos-jrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.photos-layout-justified .photo-tile {
|
||||
aspect-ratio: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Monthly mode — larger tiles, more breathing room */
|
||||
.photos-group-monthly .photos-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
|
||||
Reference in New Issue
Block a user