Skip to content

Change appearance of account cards in web UI#17689

Merged
Gargron merged 3 commits intomainfrom
feature-suggestions-card-design
Mar 7, 2022
Merged

Change appearance of account cards in web UI#17689
Gargron merged 3 commits intomainfrom
feature-suggestions-card-design

Conversation

@Gargron
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
Member Author

Gargron commented Mar 7, 2022

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

@ClearlyClaire
Copy link
Copy Markdown
Contributor

Still too cramped in some languages:

image

Otherwise, everything looks fine

@Gargron
Copy link
Copy Markdown
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
Copy Markdown
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