WIP PWA for Grain
feat: center images vertically when gallery has portrait photos
When any photo in a gallery has a portrait aspect ratio (< 1), the
carousel now sets its height to match the tallest image and centers
all images vertically within that space.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+27
-2
+27
-2
src/components/organisms/grain-image-carousel.js
+27
-2
src/components/organisms/grain-image-carousel.js
···
27
27
flex: 0 0 100%;
28
28
scroll-snap-align: start;
29
29
}
30
+
.slide.centered {
31
+
display: flex;
32
+
align-items: center;
33
+
justify-content: center;
34
+
}
35
+
.slide.centered grain-image {
36
+
width: 100%;
37
+
}
30
38
.dots {
31
39
position: absolute;
32
40
bottom: 0;
···
41
49
this._currentIndex = 0;
42
50
}
43
51
52
+
get #hasPortrait() {
53
+
return this.photos.some(photo => (photo.aspectRatio || 1) < 1);
54
+
}
55
+
56
+
get #minAspectRatio() {
57
+
if (!this.photos.length) return 1;
58
+
return Math.min(...this.photos.map(photo => photo.aspectRatio || 1));
59
+
}
60
+
44
61
#handleScroll(e) {
45
62
const carousel = e.target;
46
63
const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
···
50
67
}
51
68
52
69
render() {
70
+
const hasPortrait = this.#hasPortrait;
71
+
const minAspectRatio = this.#minAspectRatio;
72
+
73
+
// Calculate height based on tallest image when portrait exists
74
+
const carouselStyle = hasPortrait
75
+
? `aspect-ratio: ${minAspectRatio};`
76
+
: '';
77
+
53
78
return html`
54
-
<div class="carousel" @scroll=${this.#handleScroll}>
79
+
<div class="carousel" style=${carouselStyle} @scroll=${this.#handleScroll}>
55
80
${this.photos.map(photo => html`
56
-
<div class="slide">
81
+
<div class="slide ${hasPortrait ? 'centered' : ''}">
57
82
<grain-image
58
83
src=${photo.url}
59
84
alt=${photo.alt || ''}