Skip to content

[C-5778] Update web profile page layout - #11374

Merged
schottra merged 7 commits into
mainfrom
profile-layout-updates
Feb 14, 2025
Merged

[C-5778] Update web profile page layout#11374
schottra merged 7 commits into
mainfrom
profile-layout-updates

Conversation

@schottra

@schottraschottra commented Feb 13, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This is a cleanup and layout adjustment to the profile page to get ready for upcoming changes to the left side.

  • Removed nearly all CSS module styling from ProfilePage in favor of harmony equivalents and css props
    • I left some in the module because this has already been a lot and digging down into the remaining nested usage was going to take a while
  • Updated max content width for this page to be 1080px. Normally we would use the Page component in inset mode. But due to the way cover photos work on this page, it needs to be flush. So I put some of the layout numbers into shared constants to make this easy to update going forward.
  • Removed ProfilePageWrapping component as it's not necessary with the simplified layout.
  • Updated layout to be simpler. We're no longer using absolutely positioned elements with hard-coded offsets. Almost everything is flexbox now and arranged as a series of full-width rows with two columns each. (See linear/figma if needed)

How Has This Been Tested?

Running a local web client against staging, navigated to my own profile and that of another artist and verified that all elements rendered correctly. Compared against Figma mocks to check layout.

Screenshots

Owner page before:
image

Owner page after:
image

Artist page before:
image

Artist page after:
image

@changeset-bot

changeset-botBot commented Feb 13, 2025•
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 31e6b40

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dylanjeffers
dylanjeffers approved these changes Feb 13, 2025
View reviewed changes

@dylanjeffersdylanjeffers left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome work here, moves us much closer to where we want

Comment threadpackages/web/src/components/nav-banner/NavBanner.tsx Outdated
Comment threadpackages/web/src/pages/profile-page/components/desktop/ProfilePage.module.css
margin-top: 8px;
}

.info > .edit > .editField {

@dylanjeffersdylanjeffersFeb 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great job clearing all this out

Comment threadpackages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx
fromOpacity={1}
>
<Box w='100%'>
<ProfileWrapping

@dylanjeffersdylanjeffersFeb 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for getting rid of this

@schottra
Merge remote-tracking branch 'origin/main' into profile-layout-updates
ba7e480
* origin/main: (21 commits)
Test listen streak challenge 2 listens in 1 day (#11373)
Listen streak challenge fix 2 plays in one day (#11372)
Randomize storage node ordering in StorageNodeSelector. (#11371)
Disable endless listen streak challenge, delete rows (#11369)
Fix user-link overflow (#11370)
MRVR country fixes (#11118)
[C-5270C-5269C-5268C-5629] Comment layout improvements (#11360)
🪦 poa ganache (#11367)
Fix playlist invalid sort test (#11368)
core block diff health check (#11365)
Audius Protocol v0.7.90
Hide endless challenge audio (#11364)
[C-5769] Use batch fetching to normalize core entity hooks (#11355)
entity manager through core on dev (#11359)
fix lint (#11362)
Fix plays indexing starvation (#11361)
Revert "filter chain health on these nodes" (#11358)
Tag audiusd with protocol releases to allow reverts (#11347)
[C-5763C-5603] Migrate profile collections to tan-query (#11285)
[C-5767] Migrate related-artists to tan-query #2 (#11303)
...
@schottra
fix z index and padding issues
6e1f66a
@schottra
use page width to compute hiding point for sort button
31e6b40
@schottra
schottra enabled auto-merge (squash) February 13, 2025 23:44
@schottra
schottra merged commit e718ce9 into mainFeb 14, 2025
@schottra
schottra deleted the profile-layout-updates branch February 14, 2025 00:00
schottra added a commit that referenced this pull request Feb 14, 2025
@schottra
Merge remote-tracking branch 'origin/main' into update-client-collect…
0deaf9e
…ibles
* origin/main: (71 commits)
[PAY-3881][PAY-3883] Add indexing/endpoints for separated collectibles data (#11287)
[C5778] Update web profile page layout (#11374)
Test listen streak challenge 2 listens in 1 day (#11373)
Listen streak challenge fix 2 plays in one day (#11372)
Randomize storage node ordering in StorageNodeSelector. (#11371)
Disable endless listen streak challenge, delete rows (#11369)
Fix user-link overflow (#11370)
MRVR country fixes (#11118)
[C-5270C-5269C-5268C-5629] Comment layout improvements (#11360)
🪦 poa ganache (#11367)
Fix playlist invalid sort test (#11368)
core block diff health check (#11365)
Audius Protocol v0.7.90
Hide endless challenge audio (#11364)
[C-5769] Use batch fetching to normalize core entity hooks (#11355)
entity manager through core on dev (#11359)
fix lint (#11362)
Fix plays indexing starvation (#11361)
Revert "filter chain health on these nodes" (#11358)
Tag audiusd with protocol releases to allow reverts (#11347)
...
@schottraschottra changed the title [C5778] Update web profile page layout[C-5778] Update web profile page layoutFeb 14, 2025
audius-infra pushed a commit that referenced this pull request Feb 15, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.122
6431d6e
[341ca35] Fix infinite query return args (#11384) Dylan Jeffers
[82c97e4] [C-5766] Paginate profile collections (#11375) Dylan Jeffers
[5f61f37] [C-5771QA-1983] Fix harmony white and static white (#11383) Dylan Jeffers
[4cbd971] [C-1984] Improve left-nav buttons with IconButton improvements (#11382) Dylan Jeffers
[4066498] [C-5782, C-5783] Add user comments endpoint and tan query hook (#11366) Kyle Shanks
[96cfea5] [C-5768] New fetch single entity pattern (#11318) Andrew Mendelsohn
[1056ad1] [PAY-3882] Update client collectibles handling (#11312) Randy Schott
[e718ce9] [C5778] Update web profile page layout (#11374) Randy Schott
[b68d0c1] Fix user-link overflow (#11370) Dylan Jeffers
[3d33536] [C-5270C-5269C-5268C-5629] Comment layout improvements (#11360) Dylan Jeffers
[77fdd02] Hide endless challenge audio (#11364) Dylan Jeffers
[bfab8f0] [C-5769] Use batch fetching to normalize core entity hooks (#11355) Andrew Mendelsohn
[e85347a] [C-5763C-5603] Migrate profile collections to tan-query (#11285) Dylan Jeffers
[48ba8aa] [C-5767] Migrate related-artists to tan-query #2 (#11303) Dylan Jeffers
[0c7e2e7] Format number commas in reward notifs (#11356) Reed
[b73cf1f] [PAY-3941] Claim all rewards tile respects optimistic challenges (#11352) Reed
[e9e19d9] Filter out listen streak endless notifications (#11353) Reed
[514ce3f] Don't show oneshot expiry if ineligible (#11351) Reed
[7147843] Ineligible oneshot instead of incomplete on mobile (#11350) Reed
[d053519] Format number commas for all reward amounts (#11349) Reed
[dcca08b] Feature flag on claim all button (#11345) Isaac Solo
[f6aef59] [QA-1909] Fix playlist menu min-width (#11344) Dylan Jeffers
[ac02b23] [QA-1772] Fix windows app frame (#11340) Dylan Jeffers
[6ca3797] [QA-1768] Improve now playing drawer close arrow (#11339) Dylan Jeffers
[1b1f4a8] Update dapp-store build artifacts audius-infra
[2fec196] [QA-1891] Fix track tile icon clipping and zero state (#11338) Dylan Jeffers
[a35337a] Airdrop pt one migration (#11335) Isaac Solo
[3d5c629] [QA-1959] Hide referred tile with new challenge name (#11336) Reed
[dab4766] Fix reward claim error gap too large (#11337) Reed
[7a7c962] Fix harmony and web lint (#11332) Dylan Jeffers
[ce10a10] Bump android version to 468 (#11331) Dylan Jeffers
[42374fe] Fix explore page featured content (#11321) Dylan Jeffers
[97aa11b] Sign out from oauth should not go to trending (#11327) Isaac Solo
[d11f31c] Update airdrop copy and add X icon (#11306) Isaac Solo
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

Assignees

No one assigned

Labels

size/XXL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@schottra@dylanjeffers