Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix alignment between ELS and Events in bubble layout #7392

Merged
merged 3 commits into from
Dec 16, 2021
Merged

Fix alignment between ELS and Events in bubble layout #7392

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9847c77
Fix alignment between ELS and Events in bubble layout
t3chguy Dec 16, 2021
177e41d
Improve ELS behaviour in bubble layout
t3chguy Dec 16, 2021
c0ba16a
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Dec 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 24 additions & 23 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ limitations under the License.
--gutterSize: 11px;
--cornerRadius: 12px;
--maxWidth: 70%;
margin-right: 100px;
}

.mx_EventTile[data-layout=bubble] {
position: relative;
margin-top: var(--gutterSize);
margin-left: 49px;
margin-right: 100px;
font-size: $font-14px;

.mx_ThreadInfo {
Expand Down Expand Up @@ -356,14 +356,24 @@ limitations under the License.
.mx_EventListSummary[data-layout=bubble] {
--maxWidth: 70%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: 94px;

.mx_EventListSummary_toggle {
margin: 0 55px 0 5px;
float: none;
margin: 0;
order: 9;
margin-left: 5px;
margin-right: 55px;

&[aria-expanded=false] {
order: 9;
}
&[aria-expanded=true] {
text-align: right;
margin-right: 100px;
}
}

.mx_EventListSummary_line {
display: none;
}

.mx_EventListSummary_avatars {
padding-top: 0;
}
Expand All @@ -372,30 +382,21 @@ limitations under the License.
content: "";
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] {
// Align with left edge of bubble tiles
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 */
.mx_EventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
Expand Down