WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: reorganize profile header to match Instagram layout

+33 -25
+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
··· 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>