Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change appearance of account cards in web UI #17689

Merged
merged 3 commits into from
Mar 7, 2022

Conversation

Gargron
Copy link
Member

@Gargron Gargron commented Mar 2, 2022

image

@Gargron Gargron added the ui Front-end, design label Mar 2, 2022
@Gargron Gargron force-pushed the feature-suggestions-card-design branch 6 times, most recently from 385c6c2 to 464b4e4 Compare March 3, 2022 00:27
@Gargron Gargron force-pushed the feature-suggestions-card-design branch from 464b4e4 to ba249cf Compare March 3, 2022 20:50
@Gargron Gargron requested a review from ykzts March 4, 2022 21:00
@ClearlyClaire
Copy link
Contributor

This:

  • changes the account cards currently used in the profile directory by:
    • replacing the “last active” bit with the number of people being followed by the account
    • changing the icon button to follow/unfollow/unmute/unblock to a text button to follow/unfollow/unblock (unmuting is skipped for some reason), moved from alongside the user name to alongside the Posts/Followers/Following
    • changing the background color of the bio and stats part and getting rid of a separator between the bio and stats
    • changing the margins to have the profile picture eat on a few pixels of the header image instead of eating space below
  • it also changes how account cards are used by:
    • only displaying one column in /web/directory instead of possibly multiple columns of accounts
    • using the account cards in /explore/suggestions
    • the bio section can be longer and respects line breaks

Overall it's an improvement, and the code seem ok, but I'm unsure why the “unmute” case was dropped.

Multi-line bios are also cropped very awkwardly:
image

Additionally, this feels cramped in some situations:
image

In particular in some languages:
image

@Gargron
Copy link
Member Author

Gargron commented Mar 7, 2022

Fixed visual glitches caused by unnecessary padding. Added unmute button. Shortened unblock/unmute text.

@ClearlyClaire
Copy link
Contributor

Still too cramped in some languages:

image

Otherwise, everything looks fine

@Gargron
Copy link
Member Author

Gargron commented Mar 7, 2022

The counters now have a min. width that leaves enough space for French, the button shrinks and gets ellipsized.

@ClearlyClaire
Copy link
Contributor

That's better, though the ellipsized button isn't ideal either :/
image

@Gargron Gargron merged commit dba4be1 into main Mar 7, 2022
@Gargron Gargron deleted the feature-suggestions-card-design branch March 7, 2022 10:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui Front-end, design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants