imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Specify spacing around EventTileBubble for each layout (#9001)

Browse source 
* Apply margin to EventTileBubble on each layout

Use a variable to ensure alignment of EventTileBubble on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Improve style rules

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply the same block margin to every layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-07 09:24:24 +00:00 • committed by GitHub
parent e3fda73b2b
commit b1fb609ab3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

27
res/css/views/rooms/_EventTile.scss
View file

@ -73,6 +73,10 @@ $left-gutter: 64px;
}
}
.mx_EventTileBubble {
margin-block: 10px; // TODO: Use a spacing variable
}
.mx_MImageBody {
.mx_MImageBody_thumbnail_container {
display: flex;
@ -217,10 +221,28 @@ $left-gutter: 64px;
}
}
&[data-layout=bubble],
&[data-layout=group] {
.mx_EventTileBubble {
margin-inline: auto;
}
}
&[data-layout=irc] {
--EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
.mx_MessageTimestamp {
text-align: right;
}
.mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_ReplyTile .mx_EventTileBubble {
left: unset; // Cancel the value specified above for the tile inside ReplyTile
}
}
&[data-layout=group] {
@ -306,6 +328,11 @@ $left-gutter: 64px;
}
&[data-layout=bubble] {
.mx_EventTileBubble {
// Timestamps are inside the tile, so the width can be less constrained
max-width: 600px;
}
&.mx_EventTile_continuation {
margin-top: 2px;
}