sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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
3 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/rooms/_EventTile.scss
+27
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;
}
res/css/views/rooms/_IRCLayout.scss
+2 -2
View File
@@ -163,13 +163,13 @@ $irc-line-height: $font-18px;
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: calc(var(--name-width) + 10px + var(--icon-width));
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
}
.mx_EventTile_line {
left: calc(var(--name-width) + 10px + var(--icon-width));
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_TextualEvent {