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

Redesign public profiles and toots #8068

Merged
merged 1 commit into from Jul 28, 2018

Conversation

Projects
None yet
7 participants
@Gargron
Member

Gargron commented Jul 24, 2018

Random images / text taken from real accounts/toots/websites used as samples.

Rough overview of changes:

  • Public profile page
    • Toots
    • Following/followers
  • Public toot page
  • Profile card
    • Edit profile preview
    • Authorize follow
    • Remote follow
    • Invited-by on sign up page when invited
  • Removed some templates that were no longer used but had translations

Some side notes:

  • Preview on "edit profile" now not only shows avatar/header changes, but display name and lock status also
  • Header size limit raised to 1500x500 (using new system from #8083)
  • The sidebar on the profile page has potential to become more useful, I have some features in mind that would let users customize their profile more
  • Pagination for toots on public profile page replaced with "Show more" in top/bottom of the stream as I think it's more intuitive in terms of direction and looks better in the new layout
  • Badges are not shown in the narrow layout since they don't align well with anything and it's not super critical information
  • The blurb about the server with the server thumbnail is hidden on narrow layout since it's also not critical information
  • I don't know what else to tell you. It's a big patch and I lost track

Desktop, profile page:

image

Desktop, profile page footer:

image

Desktop, toot page:

image

Desktop, list of followers:

image

Desktop, profile preview in settings (such a card is also used on invite-to-follow, remote follow and authorize follow pages):

image

Smaller width, profile page:

screen shot 2018-07-28 at 03 46 01

Smaller width, profile page footer:

screen shot 2018-07-28 at 03 46 11

Smaller width, toot page:

screen shot 2018-07-28 at 03 46 36

iPhone 6, toot page:

screen shot 2018-07-28 at 03 46 45

iPhone 6, profile page:

screen shot 2018-07-28 at 03 46 50

iPhone 6, list of followers:

screen shot 2018-07-28 at 03 47 13

@Gargron Gargron force-pushed the feature-redesign-profiles branch 7 times, most recently from 6ae8e1f to 07412c1 Jul 25, 2018

@Gargron Gargron force-pushed the feature-redesign-profiles branch 5 times, most recently from 5e2d71e to fd87e9b Jul 28, 2018

@Gargron Gargron force-pushed the feature-redesign-profiles branch from fd87e9b to f300dc9 Jul 28, 2018

@moshpirit

This comment has been minimized.

moshpirit commented Jul 28, 2018

Why is the bio under the tabs? (Patreon / GitHub / ...) I think it's more intuitive if it's the other way around, don't you think? To me it's more relevant the bio than the links

@ykzts

ykzts approved these changes Jul 28, 2018

@Gargron Gargron merged commit bb71538 into master Jul 28, 2018

11 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: check-i18n Your tests passed on CircleCI!
Details
ci/circleci: install Your tests passed on CircleCI!
Details
ci/circleci: install-ruby2.3 Your tests passed on CircleCI!
Details
ci/circleci: install-ruby2.4 Your tests passed on CircleCI!
Details
ci/circleci: install-ruby2.5 Your tests passed on CircleCI!
Details
ci/circleci: test-ruby2.3 Your tests passed on CircleCI!
Details
ci/circleci: test-ruby2.4 Your tests passed on CircleCI!
Details
ci/circleci: test-ruby2.5 Your tests passed on CircleCI!
Details
ci/circleci: test-webui Your tests passed on CircleCI!
Details
codeclimate All good!
Details

@Gargron Gargron deleted the feature-redesign-profiles branch Jul 28, 2018

@ThibG

This comment has been minimized.

Collaborator

ThibG commented Jul 29, 2018

It's an improvement overall, but there are a few things that I'm not sure about:

  • The main content not being centered irks me
  • Why aren't there three toots/followers/following “tabs” on narrower screen width? How do I get back from followers to toots?
  • User bio and instance info being in the same place is very confusing
@kit-ty-kate

This comment has been minimized.

kit-ty-kate commented Jul 29, 2018

User bio and instance info being in the same place is very confusing

I also agree with that.

Also, not having the users bio displayed on the followers/following lists are really a bad thing IMHO. It doesn't encourage people to search to follow others based on interests but only based on imagery. I think it's really bad.

@trwnh

This comment has been minimized.

Contributor

trwnh commented Jul 29, 2018

Few things I'm personally kind of iffy about:

  • touch target for permalinks is way too small
  • not sure I like the boost/fav counters being visible
  • a little weird that most URLs use the at-sign but follower+following use the "/users/username" convention
  • i wish the header size and avatar had strict aspect ratios and relative size/position but i understand if this is too hard to be consistent about
@simon-brooke

This comment has been minimized.

simon-brooke commented Jul 31, 2018

It would be really nice to make Mastodon skinnable/themable, both by allowing a simple upload of CSS files by administrators and perhaps having an online library of themes to choose from.

byronhulcher added a commit to byronhulcher/mastodon that referenced this pull request Aug 18, 2018

@JMendyk JMendyk referenced this pull request Sep 4, 2018

Open

Long URL in Profile page breaks grid design (web UI) #8602

1 of 2 tasks complete

kyori19 added a commit to kyori19/mastodon that referenced this pull request Sep 20, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment