WIP PWA for Grain
feat: reorganize profile header to match Instagram layout
+33
-25
+3
-7
src/components/molecules/grain-profile-stats.js
+3
-7
src/components/molecules/grain-profile-stats.js
···
10
10
static styles = css`
11
11
:host {
12
12
display: flex;
13
-
gap: var(--space-lg);
13
+
gap: var(--space-sm);
14
+
font-size: var(--font-size-sm);
14
15
}
15
16
.stat {
16
-
display: flex;
17
-
flex-direction: column;
18
-
align-items: center;
19
-
gap: 2px;
17
+
display: inline;
20
18
}
21
19
.count {
22
-
font-size: var(--font-size-md);
23
20
font-weight: var(--font-weight-bold);
24
21
color: var(--color-text-primary);
25
22
}
26
23
.label {
27
-
font-size: var(--font-size-xs);
28
24
color: var(--color-text-secondary);
29
25
}
30
26
`;
+30
-18
src/components/organisms/grain-profile-header.js
+30
-18
src/components/organisms/grain-profile-header.js
···
25
25
}
26
26
.top-row {
27
27
display: flex;
28
-
align-items: center;
29
-
gap: var(--space-lg);
30
-
margin-bottom: var(--space-md);
28
+
align-items: flex-start;
29
+
gap: var(--space-md);
30
+
margin-bottom: var(--space-sm);
31
31
}
32
-
.info {
32
+
.right-column {
33
33
flex: 1;
34
34
min-width: 0;
35
+
padding-top: var(--space-xs);
36
+
}
37
+
.handle-row {
38
+
display: flex;
39
+
align-items: center;
40
+
gap: var(--space-sm);
41
+
margin-bottom: var(--space-xs);
35
42
}
36
43
.handle {
37
-
font-size: var(--font-size-md);
44
+
font-size: var(--font-size-lg);
38
45
font-weight: var(--font-weight-semibold);
39
46
color: var(--color-text-primary);
40
-
margin-bottom: var(--space-xs);
47
+
}
48
+
.info {
49
+
min-width: 0;
41
50
}
42
51
.name {
43
52
font-size: var(--font-size-sm);
···
84
93
padding: 0;
85
94
cursor: pointer;
86
95
color: var(--color-text-secondary);
87
-
margin-left: auto;
88
96
}
89
97
`;
90
98
···
142
150
size="lg"
143
151
></grain-avatar>
144
152
</button>
145
-
<grain-profile-stats
146
-
galleryCount=${galleryCount || 0}
147
-
followerCount=${followerCount || 0}
148
-
followingCount=${followingCount || 0}
149
-
></grain-profile-stats>
150
-
${this.#isOwnProfile ? html`
151
-
<button class="settings-button" @click=${this.#goToSettings}>
152
-
<grain-icon name="gear" size="20"></grain-icon>
153
-
</button>
154
-
` : ''}
153
+
<div class="right-column">
154
+
<div class="handle-row">
155
+
<span class="handle">${handle}</span>
156
+
${this.#isOwnProfile ? html`
157
+
<button class="settings-button" @click=${this.#goToSettings}>
158
+
<grain-icon name="gear" size="20"></grain-icon>
159
+
</button>
160
+
` : ''}
161
+
</div>
162
+
<grain-profile-stats
163
+
galleryCount=${galleryCount || 0}
164
+
followerCount=${followerCount || 0}
165
+
followingCount=${followingCount || 0}
166
+
></grain-profile-stats>
167
+
</div>
155
168
</div>
156
169
<div class="info">
157
-
<div class="handle">@${handle}</div>
158
170
${displayName ? html`<div class="name">${displayName}</div>` : ''}
159
171
${description ? html`<div class="bio">${description}</div>` : ''}
160
172
</div>