WIP PWA for Grain
feat: click profile avatar to view fullscreen
Tap avatar to open fullscreen overlay, tap overlay to close.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+53
-6
+53
-6
src/components/organisms/grain-profile-header.js
+53
-6
src/components/organisms/grain-profile-header.js
···
4
4
5
5
export class GrainProfileHeader extends LitElement {
6
6
static properties = {
7
-
profile: { type: Object }
7
+
profile: { type: Object },
8
+
_showFullscreen: { state: true }
8
9
};
9
10
10
11
static styles = css`
···
40
41
line-height: 1.4;
41
42
white-space: pre-wrap;
42
43
}
44
+
.avatar-button {
45
+
background: none;
46
+
border: none;
47
+
padding: 0;
48
+
cursor: pointer;
49
+
}
50
+
.fullscreen-overlay {
51
+
position: fixed;
52
+
top: 0;
53
+
left: 0;
54
+
right: 0;
55
+
bottom: 0;
56
+
background: rgba(0, 0, 0, 0.9);
57
+
display: flex;
58
+
align-items: center;
59
+
justify-content: center;
60
+
z-index: 1000;
61
+
cursor: pointer;
62
+
}
63
+
.fullscreen-overlay img {
64
+
max-width: 90vw;
65
+
max-height: 90vh;
66
+
border-radius: 50%;
67
+
object-fit: cover;
68
+
}
43
69
`;
44
70
71
+
constructor() {
72
+
super();
73
+
this._showFullscreen = false;
74
+
}
75
+
76
+
#openFullscreen() {
77
+
this._showFullscreen = true;
78
+
}
79
+
80
+
#closeFullscreen() {
81
+
this._showFullscreen = false;
82
+
}
83
+
45
84
render() {
46
85
if (!this.profile) return null;
47
86
48
87
const { handle, displayName, description, avatarUrl, galleryCount, followerCount, followingCount } = this.profile;
49
88
50
89
return html`
90
+
${this._showFullscreen ? html`
91
+
<div class="fullscreen-overlay" @click=${this.#closeFullscreen}>
92
+
<img src=${avatarUrl || ''} alt=${handle || ''}>
93
+
</div>
94
+
` : ''}
95
+
51
96
<div class="top-row">
52
-
<grain-avatar
53
-
src=${avatarUrl || ''}
54
-
alt=${handle || ''}
55
-
size="lg"
56
-
></grain-avatar>
97
+
<button class="avatar-button" @click=${this.#openFullscreen}>
98
+
<grain-avatar
99
+
src=${avatarUrl || ''}
100
+
alt=${handle || ''}
101
+
size="lg"
102
+
></grain-avatar>
103
+
</button>
57
104
<grain-profile-stats
58
105
galleryCount=${galleryCount || 0}
59
106
followerCount=${followerCount || 0}