UI redesign: message content layout #5511
Description
This issue is about new message content layout, not colors, not any other functionality.
I don't know how exactly mobile message look detached from the web or if it is the same css but for different media query.
If web app would have the same layout of message on mobile that would be great.
All sizes are in 100% scale (no high definition), so my px would be points in iOS and dp in android I guess.
I'm very sorry but mockup containers structure isn't clean. So I try to clarify things here and in chat if you have any confusion.
The whole container of messages utilizes 100% of the width on mobile. There is no any gap between 2 messages.
Within the message there are such paddings for text
Notice the vertical space of 2px between the author and the message.
In case the message is without an author:
Left and right margin space will be utilized for different 16px size icons (moved, edited, bookmarked):
The font is the same as in web app:
Let me know if it is not possible to use it. I was hoping we could embed Source Sans 3 for the whole mobile app.
Author
Author container can be of a fixed width with ellipsis of a long name:
In my mock I gave a bit of space around the userpic:
User pic is 32x32 with 3px corner radius
For the time display I'm using small caps:
You can make it 50% transparent black color.
Topic bars
Topic bar is 40px height
font-family: Source Sans 3;
font-size: 16px;
font-weight: 600;
line-height: 18px;
letter-spacing: 0.02em;
text-align: left;
A date is a bit tricky. It has font-variant: small-caps; while the font-size is 16px. Since the background almost never white the color is 40% opacity black in the light theme.
I made it vertically aligned
but the correct way would be to align it according to the text baseline:
. This might require to manipulate the top margin/padding
Topic/stream/ recipient bar color
The algorithm of colorizing the recipient bar is described here https://codepen.io/terpimost/pen/WNzdrJN?editors=0010
The core idea is in these two functions
To see default zulip colors scroll example all the way down