Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

The redesigned profile fields are now on mastodon.social.

I wasn't too sure when I first saw the mockups, but I'm starting to like this.

#mastodon #ProfileFields #fediverse #design #UXUI

A screenshot of a Mastodon profile with the usual elements, including profile image, header image, description, etc.

The profile fields which include links to various websites and were previously shown in a table layout with each field on a new line, are now displayed as sort of mini cards, two next to each other on one line and a "+2" card that would, upon clicking, show all profile fields shown in a table layout (not visible in the screenshot).
A screenshot of a Mastodon profile with the usual elements, including profile image, header image, description, etc. The profile fields which include links to various websites and were previously shown in a table layout with each field on a new line, are now displayed as sort of mini cards, two next to each other on one line and a "+2" card that would, upon clicking, show all profile fields shown in a table layout (not visible in the screenshot).
A screenshot of a Mastodon profile with the usual elements, including profile image, header image, description, etc. The profile fields which include links to various websites and were previously shown in a table layout with each field on a new line, are now displayed as sort of mini cards, two next to each other on one line and a "+2" card that would, upon clicking, show all profile fields shown in a table layout (not visible in the screenshot).
  • Copy link
  • Flag this post
  • Block
Paul Chambers🚧
Paul Chambers🚧
@paul@oldfriends.live  ·  activity timestamp last month

@stefan Not of fan of buttons/box styles, like the previous change with hashtags, nor this link box/button design, esp when things are hidden behind a +#. Not a fan at all.

For the record, I whined at Google's Material Design when they started it and its been a 12 year old whinefest. I despise box elements.

Luckily, we have a choice for other frontends if I want to install them or do a CSS override. I haven't looked at the PRs so I don't know if users will have a choice of profile styles when they get a finished release. I hope there are more choices.

links in boxes/buttons
links in boxes/buttons
links in boxes/buttons
  • Copy link
  • Flag this comment
  • Block
Renaud Chaput
Renaud Chaput
@renchap@oisaur.com  ·  activity timestamp last month

@stefan note that this is a very early work in progress and not really ready for real usage and will contain bugs / unfinished things. But expect more changes to the profile screen in the coming week!

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@renchap Yes, saw some other references to updated profile designs in recent commits, really excited to see what else the team is coming up with!

  • Copy link
  • Flag this comment
  • Block
Shadow, First of His Name
Shadow, First of His Name
@shadow@vmst.io  ·  activity timestamp last month

@stefan I'm fine with the new verification badge, it just removes the whole colour and boring plain ✅.

As for the table, it's now in column horizontal row with clickable "...more" into modal popup instead of plain multiple rows?

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@shadow Yep.

You can visit any mastodon.social profile (you don't have to be logged in) and put this in the browser console:

localStorage.experiments = 'profile_redesign'

And refresh the page. To remove:

delete localStorage.experiments

  • Copy link
  • Flag this comment
  • Block
Radgryd
Radgryd
@Radgryd@mstdn.games  ·  activity timestamp last month

@stefan @shadow What decides how many profile fields are displayed before it goes to +2?

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@Radgryd I didn't work on this feature myself, but looking at the code, I see this is based on the length of the mini-cards:

https://github.com/mastodon/mastodon/blob/a1c17fef3aa863fc18eaa0941fa32f15222f859c/app/javascript/mastodon/components/mini_card/list.tsx#L100

@shadow

GitHub

mastodon/app/javascript/mastodon/components/mini_card/list.tsx at a1c17fef3aa863fc18eaa0941fa32f15222f859c · mastodon/mastodon

Your self-hosted, globally interconnected microblogging community - mastodon/mastodon
  • Copy link
  • Flag this comment
  • Block
Radgryd
Radgryd
@Radgryd@mstdn.games  ·  activity timestamp last month

@stefan Thank you! 😄

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@Radgryd You're very welcome!

  • Copy link
  • Flag this comment
  • Block
Royce Williams
Royce Williams
@tychotithonus@infosec.exchange  ·  activity timestamp last month

@stefan Hey, wow - didn't know this was happening. What do they look like for verified links?

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@tychotithonus See the GitHub link in my reply:

https://github.com/mastodon/mastodon/pull/37513

"Verification is not implemented yet as the designs are still being finalized."

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

@tychotithonus Actually, looks like there is an update on this already!

https://github.com/mastodon/mastodon/pull/37538

Looks nice!

  • Copy link
  • Flag this comment
  • Block
Stefan Bohacek
Stefan Bohacek
@stefan@stefanbohacek.online  ·  activity timestamp last month

Screenshot of the current design attached for comparison. More info and how to enable the preview: https://github.com/mastodon/mastodon/pull/37513

A screenshot of the same profile page section when the design experiment is disabled. The profile fields are shown in a table layout, with verified links highlighted in green.
A screenshot of the same profile page section when the design experiment is disabled. The profile fields are shown in a table layout, with verified links highlighted in green.
A screenshot of the same profile page section when the design experiment is disabled. The profile fields are shown in a table layout, with verified links highlighted in green.
  • Copy link
  • Flag this comment
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.32 no JS en
Federation disabled
Log in
Instance logo
  • Explore
  • About
  • Members
  • Code of Conduct