WIP PWA for Grain
fix: move follow button below profile header for mobile
+13
-10
+13
-10
src/components/organisms/grain-profile-header.js
+13
-10
src/components/organisms/grain-profile-header.js
···
98
98
color: var(--color-text-secondary);
99
99
}
100
100
.follow-button {
101
+
width: 100%;
101
102
background: var(--color-accent);
102
103
color: white;
103
104
border: none;
104
105
border-radius: 8px;
105
-
padding: 6px 16px;
106
+
padding: 10px 16px;
106
107
font-size: var(--font-size-sm);
107
108
font-weight: var(--font-weight-semibold);
108
109
cursor: pointer;
110
+
margin-top: var(--space-sm);
109
111
}
110
112
.follow-button.following {
111
113
background: transparent;
···
228
230
<div class="right-column">
229
231
<div class="handle-row">
230
232
<span class="handle">${handle}</span>
231
-
${!this.#isOwnProfile && this._user ? html`
232
-
<button
233
-
class="follow-button ${this.profile.viewerIsFollowing ? 'following' : ''}"
234
-
?disabled=${this._followLoading}
235
-
@click=${this.#handleFollowClick}
236
-
>
237
-
${this.profile.viewerIsFollowing ? 'Following' : 'Follow'}
238
-
</button>
239
-
` : ''}
240
233
<button class="menu-button" @click=${this.#openMenu}>
241
234
<grain-icon name="ellipsisVertical" size="20"></grain-icon>
242
235
</button>
···
251
244
${description ? html`<div class="bio">${description}</div>` : ''}
252
245
</div>
253
246
</div>
247
+
248
+
${!this.#isOwnProfile && this._user ? html`
249
+
<button
250
+
class="follow-button ${this.profile.viewerIsFollowing ? 'following' : ''}"
251
+
?disabled=${this._followLoading}
252
+
@click=${this.#handleFollowClick}
253
+
>
254
+
${this.profile.viewerIsFollowing ? 'Following' : 'Follow'}
255
+
</button>
256
+
` : ''}
254
257
255
258
<grain-action-dialog
256
259
?open=${this._menuOpen}