Distinction between subject and body of messages is hard #812

Closed
opened 2020-03-24 08:36:28 +00:00 by feufochmar · 1 comment
Member

Distinction cannot be easily done between the subject line and the body when messages are uncollapsed. A visual clue could be helpful especially when messages are auto-uncollapsed.

See for instance the following image.

Screenshot_20200324_090339

The first post does not have a subject, while the second have a subject. The only clue that the second post has a subject is the "Show less" link, but coming after the post.

On Mastodon, the "Show less" button being next to the subject tells it's the subject, and not the body. There is also a paragraph space instead of a line-break.

Here are a few possibilities for a better distinction between subject and body:

  • emphasise the subject (with <em> or <strong>)
  • center the subject (like the "Show less" button)
  • put a space or an horizontal line after the subject
  • use a different foreground or background color for the subject

When I inspect the elements, I note that the subject and the body are put in the same <div> (<div class="status-content-media-body">), and that the "Show less/more" link rewrites this <div>. To allow a better distinction between subject and body, they should be put in two separate <div>.

Distinction cannot be easily done between the subject line and the body when messages are uncollapsed. A visual clue could be helpful especially when messages are auto-uncollapsed. See for instance the following image. ![Screenshot_20200324_090339](/attachments/e81b4abd-35ad-4f96-ae16-2c1b065bcb11) The first post does not have a subject, while the second have a subject. The only clue that the second post has a subject is the "Show less" link, but coming after the post. On Mastodon, the "Show less" button being next to the subject tells it's the subject, and not the body. There is also a paragraph space instead of a line-break. Here are a few possibilities for a better distinction between subject and body: - emphasise the subject (with `<em>` or `<strong>`) - center the subject (like the "Show less" button) - put a space or an horizontal line after the subject - use a different foreground or background color for the subject When I inspect the elements, I note that the subject and the body are put in the same `<div>` (`<div class="status-content-media-body">`), and that the "Show less/more" link rewrites this `<div>`. To allow a better distinction between subject and body, they should be put in two separate `<div>`.

I agree that it's hard to see the difference. Maybe emphasizing would be the best.

I agree that it's hard to see the difference. Maybe emphasizing would be the best.
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe#812
No description provided.