Skip to content
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

add styles for compact layout #4132

Merged
merged 4 commits into from Jun 1, 2017

Conversation

@uhoreg
Copy link
Member

uhoreg commented Jun 1, 2017

for #109, depends on matrix-org/matrix-react-sdk#986

I started with the styles from #109 (comment), and tweaked it and added a bunch more things, such as:

  • tweak spacing for emotes so that the avatars don't collide
  • shrunk spacing for URL previews
  • shrunk bottom bar (left panel buttons, composer, right panel invite button)
  • shrunk notification bar and unread messages bar
  • shifted e2e icons and read receipts to be aligned with the new message positions

There may be other things that need tweaking, but I've been using this for most of the day without noticing anything weird.

Signed-off-by: Hubert Chathi <hubert@uhoreg.ca>
@uhoreg

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 1, 2017

Here, have a screenshot too:
image

@ara4n

This comment has been minimized.

Copy link
Member

ara4n commented Jun 1, 2017

There's a bug in mini-avatar vertical offset on showing textualevents which aren't part of a continuation (i think?):
screen shot 2017-06-01 at 15 07 08
I'm failing to spot where that override has been missing

@ara4n

This comment has been minimized.

Copy link
Member

ara4n commented Jun 1, 2017

ftr:

Matthew
uhoreg: my only concern here is at the maintainability of the overrides
how alarmed would you be if I suggested turning the magic numbers in the overrides at least into variables?
e.g. $compact-event-tile-padding-top rather than 18px or whatever
in the expectation that in future the non-compact-layout magic values would also be sensibly named
and appropriate arithmetic expressions used?
(which would then obviously let folks fine-tune more easily in future)

uhoreg
Yup, using variables sounds fine to me

@uhoreg

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 1, 2017

@ara4n I think I've fixed the issue with the mini avatar positioning.

I'm not really a fan of the smaller username. IMHO it looks a bit off, especially when it's right next to an emote or info event that has the username in normal size

I'll take a look next into how best to make variables for the numbers.

@ara4n

This comment has been minimized.

Copy link
Member

ara4n commented Jun 1, 2017

given this is working and the variables are subject to taste, i'm going to merge anyway. not sure what to do about subjective differences in taste about the layout though; i find the smaller username makes the content much more legible, as it makes it clearer that the name is less significant.

@ara4n ara4n merged commit f099f56 into vector-im:develop Jun 1, 2017
1 check failed
1 check failed
continuous-integration/travis-ci/pr The Travis CI build could not complete due to an error
Details
@4nd3r

This comment has been minimized.

Copy link
Contributor

4nd3r commented Jun 2, 2017

imho avatars should be bit smaller in compact mode, particularly when timestamps are always shown.

scrot-1496398315

@uhoreg uhoreg referenced this pull request Jun 19, 2017
2 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.