Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.

[PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats - #3815

Merged
schottra merged 1 commit into
mainfrom
pay-1660-fix-stats-overlap
Jul 28, 2023
Merged

schottra merged 1 commit into
mainfrom
pay-1660-fix-stats-overlap

Conversation

@schottra

Copy link
Copy Markdown
Contributor

Description

The stats row gets large if you happen to be following multiple people which reposted and favorited a track. The styling for the socials row includes a margin to make space for the plays. But it wasn't set up to restrict its content to the available space.

Also for small track tiles, we change the height of the row to 18px, which causes the plays count to be off-center since it is rendered absolutely. There is longer term cleanup needed on the socials row so that the content isn't sized larger than its container and centered. But it wasn't a safe change to make due to the multiple places we use the Stats component. This fixes the display issues for now, and we will address it more fully later.

Dragons

N/A

How Has This Been Tested?

Verified locally on Chrome

How will this change be monitored?

N/A

Feature Flags

N/A

Screenshots

Before
Screenshot 2023-07-28 at 2 35 56 PM


After
Screenshot 2023-07-28 at 2 36 37 PM

@schottra
schottra requested review from amendelsohn, dharit-tan and piazzatron and removed request for amendelsohn July 28, 2023 18:59
@audius-infra

Copy link
Copy Markdown
Collaborator

Preview this change https://demo.audius.co/pay-1660-fix-stats-overlap

@amendelsohn amendelsohn 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.

Ah yeah that looks better 😁

@amendelsohn

Copy link
Copy Markdown
Contributor

I see that the reposts and favorites are granted different amounts of space. Is that by design? Maybe can fix the flex grow ratio somehow?

@schottra

Copy link
Copy Markdown
Contributor Author

I see that the reposts and favorites are granted different amounts of space. Is that by design? Maybe can fix the flex grow ratio somehow?

I noticed this as well. The flex behavior is inside the Stats component, which I don't want to touch at the moment. I did a little fiddling with it and it's not straightforward to get them to behave equally due to the overflow behavior.

@schottra
schottra merged commit c0679c3 into main Jul 28, 2023
@schottra
schottra deleted the pay-1660-fix-stats-overlap branch July 28, 2023 19:28

.small .bottomRight {
/* Match socialsRow to keep these in line */
height: 18px;

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.

var?

audius-infra pushed a commit that referenced this pull request Jul 29, 2023
[5e99303] Add favorite test and fix aria-label (#3817) Raymond Jacobson
[ccc32ce] [C-2908 C-2744] fix desktop follow button (#3816) Dylan Jeffers
[c0679c3] [PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats (#3815) Randy Schott
[089a9e6] Pin stripe package versions (#3813) Reed
[a281267] [C-2774] Update upload inputs (#3806) Dylan Jeffers
[f504ef9] [C-2901] Fix menu types (#3811) Dylan Jeffers
[cb9a385] [C-2905] Update Text types and props to camelCase (#3810) Kyle Shanks
[027b3a5] [PAY-1624] Implement Purchase modal (#3808) Randy Schott
[deadb5f] [C-2902] Update the upload forms to use the typography component (#3809) Kyle Shanks
[039c951] [C-801] Fix oauth nodes (#3807) Raymond Jacobson
[c3765c7] Update typography component to use classnames (#3805) Kyle Shanks
[cab0a3e] Switch to Stripe package instead of script (#3798) Reed
[a84126f] [C-2890] Add first version of a typography component to web (#3796) Kyle Shanks
[4addddc] Fix mobile prem-content drawer unlocking margin (#3804) Reed
[233b585] [C-2857] Remove get blocknumber (#3802) Dylan Jeffers
[d113bdb] Prepare for 1.5.34 full app release (#3801) Dylan Jeffers
[2f09db4] [C-2887] Fix collection button widths (#3800) Dylan Jeffers
[8158e10] [PAY-1655] Add ColorValue prop to Text component (#3799) Reed
[fe4bc6a] Revert cacheActions.add thunk (#3797) Dylan Jeffers
[2370bbe] [PAY-1650] Update play/preview buttons on track details to use HarmonyButton (#3795) Randy Schott
[3579dc2] [PAY-1651] Implements Harmony Buttons (#3794) Randy Schott
[5af77ec] [C-2886] Improve cache performance (#3792) Dylan Jeffers
[6fb78f1] [PAY-1587] Mobile USDC Purchase Drawer Skeleton (#3793) Reed
[1277a41] [C-2883] Migrate confirmer to common (#3788) Dylan Jeffers
[ce2548e] [plat-1111] add usdc purchase seller and buyer notifications (#3770) sabrina-kiam
[bc04f52] Fix mobile LockedStatusBadge padding (#3790) Reed
[8943078] [C-2680] Attribution Modal (#3778) Andrew Mendelsohn
@AudiusProject AudiusProject deleted a comment from linear Bot Sep 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants