OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix alignment between ELS and Events in bubble layout (#7392) 

* Fix alignment between ELS and Events in bubble layout

* Improve ELS behaviour in bubble layout
pull/21833/head
Michael Telatynski 2021-12-16 18:34:59 +00:00 committed by GitHub
parent 9a8265429c
commit 4a9173a7f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -20,13 +20,13 @@ limitations under the License.
--gutterSize: 11px; --gutterSize: 11px;
--cornerRadius: 12px; --cornerRadius: 12px;
--maxWidth: 70%; --maxWidth: 70%;
margin-right: 100px;
} }
.mx_EventTile[data-layout=bubble] { .mx_EventTile[data-layout=bubble] {
position: relative; position: relative;
margin-top: var(--gutterSize); margin-top: var(--gutterSize);
margin-left: 49px; margin-left: 49px;
margin-right: 100px;
font-size: $font-14px; font-size: $font-14px;
.mx_ThreadInfo { .mx_ThreadInfo {
@ -356,14 +356,24 @@ limitations under the License.
.mx_EventListSummary[data-layout=bubble] { .mx_EventListSummary[data-layout=bubble] {
--maxWidth: 70%; --maxWidth: 70%;
margin-left: calc(var(--avatarSize) + var(--gutterSize)); margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: 94px;
.mx_EventListSummary_toggle { .mx_EventListSummary_toggle {
margin: 0 55px 0 5px;
float: none; float: none;
margin: 0;
order: 9; &[aria-expanded=false] {
margin-left: 5px; order: 9;
margin-right: 55px; }
&[aria-expanded=true] {
text-align: right;
margin-right: 100px;
}
} }
.mx_EventListSummary_line {
display: none;
}
.mx_EventListSummary_avatars { .mx_EventListSummary_avatars {
padding-top: 0; padding-top: 0;
} }
@ -372,23 +382,6 @@ limitations under the License.
content: ""; content: "";
clear: both; clear: both;
} }
.mx_EventTile {
margin: 0 6px;
padding: 2px 0;
}
.mx_EventTile_line {
margin: 0;
> a {
// Align timestamps with those of normal bubble tiles
left: -76px;
}
}
.mx_MessageActionBar {
transform: translate3d(90%, 0, 0);
}
} }
.mx_EventListSummary[data-expanded=false][data-layout=bubble] { .mx_EventListSummary[data-expanded=false][data-layout=bubble] {
@ -396,6 +389,14 @@ limitations under the License.
padding: 0 49px; padding: 0 49px;
} }
.mx_EventListSummary[data-expanded=true][data-layout=bubble] {
display: contents;
.mx_EventTile {
padding: 2px 0;
}
}
/* events that do not require bubble layout */ /* events that do not require bubble layout */
.mx_EventListSummary[data-layout=bubble], .mx_EventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] { .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {